Bardia Madani

Honest update: I didn't sell a single component last month. Brutal, right? 😅

So instead of letting them gather digital dust, I'm doing a full reset, every single component is now $5.

How I run 34 shader backgrounds on a single Framer homepage without crashing. Here’s how:

Browsers have a hard limit on how many WebGL contexts you can run at once — usually 10 to 15 before things start freezing or the page just dies. That’s not a Framer thing, it’s a GPU safety net. So if you tried to give 34 shader backgrounds their own component, you’d hit the wall in seconds.

Here’s what I did inside Uneo to safely offer 34 presets (and keep switching instant):

1. One context, one canvas, 4 active programs

I cache all shader data upfront for the presets you can cycle through, then only compile and keep hot what’s really needed. That dropped my footprint from 26 separate shader instances down to just 4 active GPU programs. The rest are on standby no extra contexts piling up, no limit hit.

2. Single massive shader file = instant switching

Yeah, putting everything into one huge code file felt challenging at first, but it makes cycling instant. Switching presets is just binding a different pre-compiled fragment program and updating uniforms. No reload, no recompile, no stutter.

3. Toggle the cache off in production

The cache is great while you’re exploring, but once you pick a single shader for your site, you don’t need 33 extras sitting in memory. A simple property toggle turns the cache off so only your chosen shader compiles, your published site stays lean.

4. Removable lazy-load with distance controls

I added an optional lazy-load system. You can tell the canvas to only initialize when the user scrolls within a specific distance, and destroy itself when they scroll far enough away. Great for keeping long pages snappy if the shader isn’t always in view.

No crashes, no context limits, and switching feels like flipping a switch.

Live: Uneo

Hope this helps someone hitting the same GPU limits in Framer. If you’ve found a different way to manage multiple shaders at scale, I’d genuinely love to hear it.

One of my favorite parts of building UNEO was experimenting with interactive shader backgrounds.

I wanted to create something beyond the usual SaaS gradients and static hero sections, so I built a shader system with different presets and controls that can be adjusted to match different brands.

The goal was to make the website feel more like a real product experience while keeping it flexible for anyone using the template.

Some of the things included:

✦ Interactive WebGL shader backgrounds

✦ Multiple visual presets

✦ Customizable controls

✦ Smooth Framer animations

✦ SaaS-focused sections and layouts

Building the shader system was probably the most challenging part of the project, but also the most rewarding.

You can try the shader presets here:

Uneo

Would love to know:

Do you think interactive backgrounds make SaaS websites feel more premium, or do you prefer simpler designs?

I just finished building Uneo, an AI SaaS-focused Framer template I’ve been working on for a while.

The idea was simple: start with a waitlist page, then expand into a full SaaS website when you’re ready. No rebuilding everything from scratch later.

I also spent a lot of time on the visuals. It includes interactive shader backgrounds with different presets and controls, so you can create a look that fits your brand.

Would love to hear what you think.

Just finished a bunch of custom interactive shader backgrounds for a Framer template. No plugins, pure webgl, all cursor‑reactive.

Honestly curious, if this were your template, what’s the first thing you’d refine?

I’m giving away my new slider component for Framer for free for the next 24 hours.

It’s designed for testimonial and team sections, with the active card coming into focus while the surrounding cards recede with blur, opacity, and grayscale.

There are three layouts included: → Testimonials → Team → Custom Frames

You can also switch between shader, gradient, noise, and glass backgrounds.

I added a separate preview component to the Marketplace page so you can try changing most of the property controls directly in Framer before installing it.

I built a whole component just to showcase another component.

I wanted people to actually interact with the Card Carousel before deciding whether to use it, so I built a dedicated property control component for it.

What would you use it for: testimonials, team sections, or something else?

Couldn't find a clean, working slot ticker for Framer, so I had to build my own.

Available on the Marketplace for free now.

Finally putting this one out there

Three.js Hover Media a smooth WebGL hover reveal for any Frame.

Pin it to any Frame, drop in images or video, dial in the distortion. No stretching, no layout fuss.

Hope you like it.