Shaders that make
your site move.
Seamless-loop WebGL backgrounds and shader components. Paste the React or HTML code, or drop in the MP4. Mesh, grain, dither, liquid metal, glass, 3D and more.
The lead loops
Every loop closes.
Each shader is drawn from maths, frame by frame. The last frame lands exactly on the first, so it never jumps — on a 4K hero or a phone.
6K stills, grain baked in
77 art-directed backgrounds in 15 collections — 308 takes, each with a phone-ready portrait and the clean master.
Backgrounds that breathe
Full-bleed WebGL backgrounds for heroes, sections and slides. Every one loops perfectly and pauses itself off-screen.
Browse shadersUI with a pulse
Buttons, cards, borders and headlines with a living shader inside. Drop-in React components, no 3D library.
Browse componentsBuilt to ship, not to tinker with
Each shader comes as code you paste and video you drop in — whichever your stack wants.
React + vanilla JS
One self-contained file per shader. No three.js, no npm install — WebGL2 and nothing else. Give the parent a height and it fills it.
1import Mercury from "./Mercury";23export default function Hero() {4 return (5 <section className="relative h-screen">6 <Mercury className="absolute inset-0 -z-10" />7 <h1>Your headline</h1>8 </section>9 );10}
MP4 in three sizes
H.264 that plays everywhere, plus a 2560px still for posters and OG images.
480p720pSeamless by construction
Motion travels a closed circle through 4D noise, so the last frame lands exactly on the first. Watch the counter wrap.
Polite on the GPU
The component manages itself, so a background never becomes the heaviest thing on your page.
- Scrolled off-screenPaused
- Tab in backgroundPaused
- Retina displayCapped at 2×
- Reduced motionStill frame
Commercial license
One license covers everything you make with it.
- ✓Client websites & apps
- ✓Your own products & SaaS
- ✓Ads, decks, videos, socials
- ✓Inside templates you sell
- ✕Reselling the shaders themselves
Pick a loop
Browse by shelf, preview every one in motion, and open it full-screen.
Copy or download
Grab the React component, the HTML snippet, or the MP4 at the size you need.
Ship it
Paste it behind your hero. It sizes itself, loops forever and stays light on the GPU.
One license. Every loop.
All 164 shaders and components, plus every 6K still — and everything we add while you're a member.
The whole library, month to month. Cancel anytime.
Billed monthly. Cancel anytime.
Open up to 10 new items a week, from the whole library
Everything in the library, plus every drop for a year.
Billed $129 yearly.
Unlimited — every shader, component and still, any week
Pay once. Every shader and component, forever — including future drops.
One payment. No renewals, ever.
- Unlimited — every shader, component and still, any week
- Logo & Image Effects collections
- Export your own version from the live customizer
- React + vanilla JS code for each one
- 1080p, 720p & 480p seamless-loop MP4s
- 6K stills with grain + clean masters, landscape & portrait
- Commercial license — client work included
- Every new drop the day it lands
Prices in USD. Payments and invoices by Dodo Payments (merchant of record) — cards, UPI and local methods. Upgrade anytime: your old plan is stopped automatically, so you're never billed twice.
Questions, answered
What exactly do I get?+
For every shader: a self-contained React component (.tsx), a plain HTML + JavaScript snippet, seamless-loop MP4s at 1080p, 720p and 480p, and a 2560px PNG still. Components come as React code; stills come at 6K with grain and as a clean master. Everything is yours to use under the commercial license.
Do I need three.js or any library?+
No. Every shader is one WebGL2 fragment shader inside one file. The React version needs only React; the HTML version needs nothing at all. Even the 3D orbs are raymarched in a single shader.
Code or MP4 — which should I use?+
Code renders live and sharp at any size and weighs a few kilobytes, so it's the better choice for websites. The MP4 is for places code can't go: Webflow/Framer backgrounds without custom code, slides, video editors, social posts.
Will it slow my site down?+
The components pause when scrolled off-screen, cap pixel density (configurable via maxDpr), and show a still frame to visitors who prefer reduced motion. A full-screen background is comparable in cost to a looping video, without the download.
Can I use them in client work?+
Yes. The license covers personal and commercial projects, including websites and apps you build for clients. You can't resell or redistribute the shaders themselves as a library, template pack or asset bundle.
Is anything free?+
Browsing is: every preview, the live demos and the colour filters are open to everyone. The code, MP4s and 6K files come with a plan — Monthly, Yearly or Lifetime.
How does the Monthly limit work?+
Monthly opens up to 10 new items a week — shaders, components or stills. Anything you've already opened stays open, so copying it again or downloading another size never counts. The week resets on the same day each week. Yearly and Lifetime have no limit.
What happens if I cancel Monthly or Yearly?+
Anything you've already put into a project keeps working forever — it's your code now. You keep full access until the end of the period you paid for, then lose access to downloading new items and drops. Cancel renewal anytime from your account, and upgrade anytime — the old plan stops automatically.
How do I sign in?+
With your email and a password. Create your account first, then choose a plan — you go straight to secure checkout. Forgot your password? Reset it from the sign-in page.
Do you offer refunds?+
No — everything is digital and delivered the instant you pay, so all sales are final. Every item plays in full on its page before you buy, so you can see exactly what you get. The one exception is our mistake: a double charge, a wrong amount, or no access because of a fault on our side — we'll put that right.
Be first to the next loop
One short email when a new shelf or family lands.