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
Noise Reveal, a premium reveal component for Framer
I built a component that gives Framer sites cinematic reveals for images, video and live layouts. It has a soft, film-like edge with glow and grain, and can play on load, on view, from a variant or scrubbed by scroll.
It’s built for production: the reveal is prepared before it scrolls in, it’s accessible with reduced-motion support, it falls back when WebGL isn’t available, and pages stay plain HTML when nothing is moving.
Launched on the Framer Marketplace. Open to custom Framer and interaction work.
Try its Preview here: https://www.framer.com/marketplace/components/noise-reveal/
framer.com
Noise Reveal — Component for Framer
Grainy dissolve and scroll reveals — Noise Reveal is a premium Effects component for Framer, on the Framer Marketplace. Build on it with Framer’s agent, directly on the canvas.
Indeed it is 🔥
Nice to have a scroll option.
Yea! 🔥
The WebGL fallback and reduced-motion support are the parts most reveal effects skip, so it's great to see them called out. Does the fallback keep some of the grain edge with CSS, or does it drop to a simple fade?
Without WebGL it drops to a plain cross-fade, so you lose the grain edge but the content still shows up. Rebuilding the edge in CSS would never look like the shader, so I kept the fallback simple and reliable.
Makes sense. A half-convincing grain in CSS would probably look more broken than a clean fade. Content first, effect second is the right order for something people drop into client sites.
The cinematic reveal looks great, and I like that you thought about the fallback for older browsers and reduced motion. That kind of detail is what separates a demo from a production-ready component.
Thanks Nadeem! 😊
Keeping the page plain HTML when nothing is moving is a really nice touch, most WebGL effects just leave a canvas running the whole time. How has the Marketplace launch gone so far, are people mostly using it on hero images or on video?
Thanks Muhammad! You can actually use it for images, videos, or even layouts!! Which means you can actually use it as a section or hero entrance effect too!
For what people use the most, it depends on the use case that fits the person who uses the effect. So there is no typical answer
A hero entrance feels like the sweet spot for it, that grain edge would make a great first impression.
Love how the different components work together to create a cohesive digital experience.
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
These stickers are clickable on kaisle13.framer.website they link to each individual artists profile page and each sticker custom designed for that artist.
So cool!!
What happens when you hold down the delete button for too long?
Well, I made sure your entire website finds out. 🔥💀
Built this little Framer component.
Nice!
Made for design studios
You really did a great job!