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.
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
Claude
Claude has entered the design space. How are you using it?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
Brand Design
The best brand designers are on Contra. Scroll to see what's trending in brand design. What are you building?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
Related posts
I was so stoked to collaborate with Siobhan on the Good Soup Studio website. Her designs are so bright, bold, and fun—the perfect jumping off point for my motion design. check it out at goodsoupstudio.com
Building motion off someone else's static system is a genuinely different skill than starting from scratch, you're translating intent rather than inventing your own. Was there a moment her designs suggested a motion idea you wouldn't have landed on by yourself?
Introducing KEEPS: A Digital Home for Physical Memories
KEEPS is a mobile app designed to preserve the physical objects that carry our memories.
While most memory apps are built around photos, KEEPS is built around everything else.
Concert tickets, boarding passes, receipts, handwritten notes, invitations, conference badges, and other small objects that people often keep long after their practical purpose has ended.
The idea came from a simple observation: many of us keep these items because they represent experiences, relationships, milestones, and moments we don’t want to forget. Over time, they become scattered across drawers, wallets, books, and boxes, making them difficult to revisit and easy to lose.
KEEPS transforms these physical keepsakes into digital artifacts.
Users can scan real objects, remove backgrounds, add contextual information such as location, date, people, and personal notes, and organize them into custom collections. Artifacts can also be created from templates, allowing users to recreate memories that no longer exist physically.
The prototype includes onboarding, collections, artifact detail pages, discovery flows, creation flows, profile experiences, and a connected navigation system that allows users to move through their archive naturally.
Rather than generating the entire product in a single prompt, I used Flowstep as a design engineering tool.
I started with a visual direction created in Figma, including custom illustrations, typography, layout systems, and the overall structure.
From there, I rebuilt the product inside Flowstep screen by screen, using detailed prompts to define hierarchy, spacing, interactions, navigation patterns, and user flows.
Each screen became the foundation for the next. Existing components were reused, refined, and expanded to create a cohesive design system across the entire application. The process was highly iterative: generating, reviewing, refining, and rebuilding until the product felt consistent both visually and functionally.
The result is not simply a collection of screens, but a connected prototype with clear user journeys, interaction logic, and product intent.
KEEPS is built around a simple belief:
The smallest objects often carry the biggest memories.
Flowstep file link: https://app.flowstep.ai/file?activeFileId=cb23715a-64af-4fb6-822a-c789fb99b461
The walkthrough, screen recording of the prototype working in Flowstep, my custom illustrations, and the screens designed in Flowstep are included below.
Love this!
Exploring two hero directions for an upcoming venture studio template.
Concept 01 is built around a single cinematic image to create a bold first impression and establish the brand’s personality from the very first screen.
Concept 02 takes a more editorial approach, using curated imagery to introduce the studio’s story, capabilities, and ecosystem before the user starts exploring.
Both concepts were designed in Figma and are now being brought to life in Framer. Looking forward to sharing the live version soon.
8 voted
62%
5 voted
38%
13 votes
Closed
Concept 01 brings that instant visual punch, but Concept 02’s editorial flow builds a much stronger narrative for a venture studio ecosystem. Both execution styles look crisp excited to see how the Framer interactions bring them to life