I built a scroll-driven hero for MINI John Cooper Works in Framer, focusing entirely on scroll speed, variants, and transforms.
The idea was simple. Let scroll control the rhythm. Build depth through layered motion. Make the hero react to the user instead of just animating on its own.
As a long-time MINI fan and an owner of a MINI Cooper JCW E, I wanted the interaction to reflect the brand’s character. Precise, energetic, and sharp.
Here’s a little piece from my current project. As I watch the Swiss design concept become a part of my creative DNA, I find myself constantly gravitating towards this direction in web design.
What’s really interesting is that Volume 3 studio and I are experimenting here, mixing things that seem completely unmixable at first glance.
Since Volume 3 is a CGI and VFX studio, it was crucial to incorporate a 3D dimension into their brand communication. On top of that, a Terminal UI is exactly what keeps that technical vibe going.
So, the final mix is International (Swiss) style, a Terminal UI, and a 3D feel brought to life by neumorphism. Crazy, right???
It looks simple and clean, but behind the scenes, there’s a massive amount of work on the details. We focused on all those little things that push the UX/UI into the premium segment — the things you don't necessarily see right away, but you definitely feel when you're on the page.
The work is still ongoing, so I can't dive into reflecting on the whole process just yet, but I'm gonna keep revealing small parts here.
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.
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?