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
An interactive, 5-column image archive grid built with native JavaScript filters, auto-reflowing column math, and lightbox layers.
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
Related posts
The grid gives the dense information a clear rhythm, and the oversized type creates a strong entry point. The jellyfish accents add personality without competing with the hierarchy.
Here is the canvas with workflow on Higgsfield in case anyone is curious.
Have always wanted to work with one of car industry's giants.
Thank you for trusting me with 2027 model shots for marketing.
Tools used: @Higgsfield AI
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.
Challenges
View all
