We build the sites your competitors wish they had.
We integrated custom Three.js WebGL directly into the project page of our Stride template. 🧪
Go break the canvas -----> https://framer.link/XWYYeJ2
The high-end scroll vault is open. Free for 24 hours. 🔓
Go grab it, drop it into your active canvas, and let the physics take over. Clock is ticking. ⏰
We’ve just bundled our entire collection of Framer components into one library.
Live Now ---> EXPLORE COLLECTION
We wanted to see how far we could push the Framer engine, so we built Stride.
Check this one out ----> STRIDE
Talk about timing. 😅
We were grinding to get these ready for the marketplace review process, only to realize the review process isn't even a thing anymore right when we finished.
Building these was a serious challenge—especially pushing the limits of Three.js and WebGL without wrecking the performance.
But it was worth it to finally see them live.
We’ve had so much fun building the interactive WebGL elements for this one.
Go take it for a spin! 👇 Link in comment section.
We just pushed a performance patch to Stride. 🧪
The hover interactions feel smooth, more responsive, and hold a flawless 60fps.
Experience the new feel here: STRIDE
Why custom shaders make your layouts look instantly expensive. 🧪
If you want to command high-end rates, your canvas can't look like a standard, flat SaaS grid. This is exactly where custom GLSL shaders change the game.
When you introduce a fluid noise texture, a liquid hover state, or a kinetic image distortion, you add physical weight to the digital environment.
It subconsciously signals high-fidelity engineering to the user. They immediately recognize they aren't just scrolling a standard webpage—they are interacting with a crafted digital product.
You don't even need massive 3D environments to pull this off. A simple, perfectly optimized fragment shader tied to mouse velocity will instantly elevate a basic hero section into an Awwwards-level experience.
Stop building flat internet. Start adding physical weight to your canvas.
For the designers who haven't seen the light version of the Stride template yet—here is a quick look. 🧊
Link in the comment section ---->
We took every premium component we've engineered over the last few months and packed them into a single drop.
From the advanced CSS transforms of the 3D Helix Gallery to the raw WebGL shatter of the Quantum Mesh Media.
It is all here -----> GET ALL COMPONENTS
Hot take: a $129 Framer template isn’t expensive. Hiring a designer to build what it does is $3,000. The ones who complain about price have never shipped a client site.
After Art is coming. ⚡️
Just tightening up the final WebGL easing curves in the lab. it officially drops by this weekend.
Meet the Quantum Mesh Media component.
This uses a custom hashing algorithm to create a tactile digital shatter and chromatic twist effect whenever the cursor hits the media.
Drop it in and let the physics take over.
-----> https://framer.link/ENKb581
A quick look at the custom shaders we wired up for the new template.
Who else is experimenting with WebGL image textures right now? 🦍✨
Flux & Form is live now ---> https://framer.link/oq9diqO
Hey @Framer can we please have a bookmark button to posts.
Getting a WebGL shader to look good is step one. Getting it to actually function on a live site is step two. If you are dropping custom GLSL into Framer, follow this exact checklist:
1. Connect the UI: Map your GLSL uniforms to Framer's property controls so you can edit the canvas visually without touching the code again.
2. Pause on Scroll: Only render the WebGL context when the component is actually in the viewport. Save the GPU.
3. Clamp the Resolution: Manage the device pixel ratio so your heavy fluid motion doesn't crash mobile browsers.
Build heavy, but optimize ruthlessly. 🦍✨