Pushing Framer’s limits with raw WebGL

Dropping custom GLSL shaders into our new template Iterate was a headache, but the payoff is insane. Standard CSS just wasn't giving us that heavy, tactile feel.

Here is what we battled to get the physics right in the attached video:

1. The Custom Shaders Wrote custom fragment shaders to react perfectly to scroll and mouse events. Took hours of math tweaking to keep the fluid distortion buttery smooth without melting laptops.

2. Memory Leaks Forcing Three.js to play nice with Framer's routing was brutal. We had to hyper-optimize the context cleanup so clicking through the CMS pages won't tank your frame rate.

Iterate went live 2 days ago via Studio Apes. How is everyone else handling custom WebGL in their Framer builds?

Live preview it here ---> Iterate

Pushing Framer’s limits with raw WebGL

Dropping custom GLSL shaders into our new template Iterate was a headache, but the payoff is insane. Standard CSS just wasn't giving us that heavy, tactile feel.

Here is what we battled to get the physics right in the attached video:

1. The Custom Shaders Wrote custom fragment shaders to react perfectly to scroll and mouse events. Took hours of math tweaking to keep the fluid distortion buttery smooth without melting laptops.

2. Memory Leaks Forcing Three.js to play nice with Framer's routing was brutal. We had to hyper-optimize the context cleanup so clicking through the CMS pages won't tank your frame rate.

Iterate went live 2 days ago via Studio Apes. How is everyone else handling custom WebGL in their Framer builds?

Live preview it here ---> Iterate