The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
A Few Experiments with Three.js and Shaders
I recreated the Prism effect: as you scroll, the images gradually blur at the edges of the screen, and the separation of color channels creates the illusion of a prismatic lens.
It’s interesting to explore how a few formulas can change the way we perceive a regular gallery.
The RGB split growing toward the screen edges is a nice choice, because the centre stays sharp and readable. Does the shader react to scroll speed or only to position? Speed-based would make a fast flick feel very different from a slow drag.
It’s position-based at the moment the blur and RGB split increase toward the top and bottom of the viewport, regardless of scroll speed.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
I built this to see if I could make a point-cloud museum that moves with your mouse and still stays smooth at 60 FPS without any framework. No libraries. No build steps. Just Canvas2D and a bunch of tiny floating lights.
WHAT I WAS TESTING:
I was testing how well I could keep point-cloud rendering alive under constant user motion while keeping the frame rate locked at 60. The system had to handle hundreds of thousands of points updating every frame, and I had to make sure the browser didn’t stutter from garbage collection or event throttling.
THE TECHNICAL SIDE:
Everything runs in the browser with Canvas2D. No WebGL. No Three.js. No external dependencies. I wrote custom shaders with GLSL to color and animate the point clouds. I hand-tuned the event loop to avoid frame drops during mouse moves, and used requestAnimationFrame with manual frame pacing to stay at 60. Memory is allocated per object and recycled on demand. No global state leaks. No third-party tracking.
WHAT I LEARNED:
The key was not making the math too tight or too loose. Too tight and the browser would freeze. Too loose and the frame rate would drop. I learned to profile frame times, adjust point update rates based on user velocity, and use a simple debounced event handler to keep mouse movement from overwhelming the system. It runs at 60 on an old laptop, and feels buttery on a mid-tier machine.
TRY IT YOURSELF:
Open it in your browser, it's hosted live on my JSFiddle. Move the mouse around. Watch how the clouds react. No lag. No freeze. No framework.😊
Professional, nice work👍
This Framer Page Load is made by me recently. 🚀
The page effect of Framer took shape in just 5 Steps!
i've tried to build this without any components, so I only set up the animations and loadings ⚡️
Check the replies for the rest of the tutorial.
Clean work, love it.
We designed the visual identity for an early-stage studio that helps AI companies adapt one product story for different audiences and channels.
Its positioning was already defined. Our job was to make it visible.
The organizing idea was refraction: one source opening into multiple expressions.
Rays expand from a shared point. Color fields stretch, compress and change direction, which gives a still image a sense of movement.
If your brand needs a lot of variety, decide first what every variation stays connected to.
