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

Live:  https://ondrel.vercel.app

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.

Loved seeing what Vision Engine can create. Designed this final CTA section using Vision Engine, the results turned out beautifully! ✨ Hope you like it :)

Nice👍