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
I had this idea stuck in my head for a while...
What if scrolling through a website felt more like controlling the camera in a cinematic Ferrari commercial?
So I decided to build it.
The hero section starts inside the cockpit. As you scroll, the camera moves through the windshield, circles around the Ferrari, and finishes behind the car all controlled by your scroll.
Getting it to feel smooth was the biggest challenge. Scrubbing a video directly didn't deliver the experience I wanted, so I switched to a frame by frame approach instead. It took a bit more work, but the result feels much more natural and responsive.
This is the kind of experience I love building where motion isn't just there to look cool, it becomes part of the storytelling.
You can try the live demo here:
https://pure-velocity-sculpt.base44.app
I'd genuinely love to hear your thoughts. 👇
#WebDesign #LandingPage #UIDesign #UXDesign #MotionDesign #CreativeCoding #ScrollAnimation #AI #WebDevelopment #Awwwards
Good Job 👍. Having a whole website driven by motion is always fantastic, but the perennial challenge with that approach is balancing it with SEO and performance speed. If not well optimized, it will never rank.
Thank you! Absolutely motion should enhance the experience, not come at the expense of performance or SEO. That's always the goal.
Nicely done, good work here.
Thank you!
Okay this is such a fun concept, scrolling as camera movement instead of just scroll-triggered fades. Frame by frame instead of scrubbing video is a smart workaround. Did you run into any performance issues getting it smooth on lower-end devices?
Thanks! Yeah, optimization took a lot of trial and error. Compressing the frames and keeping everything as lightweight as possible helped it run smoothly across different devices.
Upgoating this, so cool
Thank you!
The presentation is excellent.
Thank you!
This is a brilliant use of motion; turning scrolling into cinematic storytelling makes the experience feel truly immersive.
Thank you!
Screams Premium. Great work Amir.
Thank you!
Great job. How many frames did you actually have to render out to pull this off?
Thanks! It was actually a fairly lightweight setup I didn’t render hundreds of individual frames. I used a small set of high-quality renders and handled most of the motion, transitions, and interaction in the web experience itself. That kept it smooth while also making it much easier to optimize for performance.
Brilliant work! 🔥🔥
Thank you!
this feels very performant.
Thank you!
3JS ?
Not in this version. I went with a pre-rendered sequence and scroll-driven playback instead of Three.js, which gave me much better control over the cinematic look and performance.
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
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic 🚀
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
I wanted my next framer template's portfolio showcase to have a standout interaction, not another flat slider.
That idea is now the hero: a carousel where every image bends on a cylinder as it moves. Perspective, velocity skew, a touch of chromatic distortion on the edges.
It's raw WebGL with the cylinder math written from scratch, no libraries. I didn't write any of it. I described the motion to Framer's agent, one prompt with my art direction, and it built the code component, wired it into the canvas, and exposed the motion as sliders: tilt, curve, skew strength, distortion, chroma, parallax.
My part was tuning those sliders until the motion felt right for the template, which took longer than the build itself.
The gap between an effect I can imagine and a component I can ship used to be "someday". Now it's an afternoon.
What's an effect you've wanted on your site but never built?
looks amazing!
Designed and developed the full landing page concept for Greenroot, a science-backed, nature-made supplement brand. 🌱
Fantastic work !
1, great work 🙌