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
Ondrel: Enterprise AI Site Rebuild (Motion & Interaction Study)
A hand-coded rebuild of a Framer-grade enterprise AI website. Scroll choreography, pinned storytelling and micro-interactions, reproduced in vanilla JS with no page builder, no WebGL and no stock footage.
What's inside:
- Hero video card that expands to full bleed on scroll while the headline splits apart, then settles back
- Scroll-linked headlines that fill in character by character
- Two pinned sequences: a 5-sector carousel and a 4-case showcase, with wipe transitions, live progress pills and a rotating backdrop
- An interactive dot sphere — 200+ particles morphing through four states in sync with the copy
- Capability wheel, vertical journal carousel and infinite logo marquees
- Menu overlay with staggered reveals, hide-on-scroll nav and an announcement banner
- Every video slot is a real-time procedural scene drawn in code (engine test fire, wind turbines, highway aerials, glass towers), so it loads fast and runs even without WebGL
- Fully responsive with a dedicated mobile layout for every section, plus reduced-motion support
Tech HTML · CSS · Vanilla JS · Canvas 2D · Lenis smooth scroll · Vercel
Got a Framer or Webflow site you've outgrown, or a motion-heavy landing page you want in real code? I build these end to end — message me.
Rebuilding a Framer site in vanilla JS with Lenis scroll instead of a page builder is the harder trade - you lose the visual editor but the scroll choreography stops fighting a framework's own physics.
Yes exactly but it was a fun thing to try and build and see how it looks and performs. Did you check fully how do you think it looks and performs?
This is a great example of motion carrying the narrative rather than just decorating it—the pinned sequences and scroll-linked type sound especially intentional. The vanilla JS constraint makes the interaction study even more compelling.
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
Averi.ai came to us with a vision: build the creative system of record for modern marketing teams. A product that blends AI, brand context, and human creativite all in one workspace.
What they didn’t have yet was a digital presence that felt like the product itself and that’s where I stepped in.
Hi Daniel,
Trust you are doing great. Been following for a while now
Well done boss, you’re doing so amazing.
I’m new here and if I may ask, Do you get all your clients here? If yes, how did you make it happen? Also, any tips on how to stand out here and attract clients?
Thank you. I look forward to your response
POV: Your project needed a cool and unique slider for their benefits.
Besides the smooth scrolling experience we've also used abstract animated graphics to compliment each benefit.
Diego Valdez is a portfolio template for photographers and visual artists to showcase their work through a sleek aesthetic.
Designed with a strong focus on imagery to give your work the space it deserves. From editorial photography and fashion to art direction, film, and creative projects, Diego Valdez is built to create an immersive experience that keeps visitors focused on your portfolio.
Love this!