GitHub
Customize & Get Code
FCKRS
Animated website backgrounds in a few lines of code.
Randomize!
1. Customize
2. Grab the code
Change
#your-element-selector
to your element and include files from
CDN
Or view
instructions for Strikingly.com
If you have a Strikingly.com site, paste the following code into Strikingly Editor -> Settings -> Custom Code -> Footer Code.
Or view
general instructions
<script src="
three.r119.min.js
"></script>
<script src="
p5.min.js
"></script>
[[INCLUDE]] <script src="
vanta.[[EFFECTNAME]].min.js
"></script> <script> [[CODE]] </script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js
"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js
"></script>
[[INCLUDE]] <script src="
https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.[[EFFECTNAME]].min.js
"></script> <script> [[CODE_STRK]] </script>
More Effects
Waves
Why?
Can interact with mouse / touch
Customize colors & style
to match your brand
No pixelation
– Canvas runs at full resolution
Smaller filesize
than background videos and large background images – three.js is ~120kb minified and gzipped
Runs fast (60fps)
on most laptops/desktops
What's the catch?
Some WebGL effects are slow on older computers.
Don't use more than one or two in a single page!
Not all effects work on mobile devices. Set a background image or color as a fallback.
Vanta.js is brought to you by the folks from Strikingly.com.
Don't have a website yet?
Start with Strikingly!