Web design · Motion · Front-end build

Two homepages for one AI brand, built to move.

ACME AI is a fictional company with one message: AI for your teams’ most busy work. The same story is told twice, in two very different visual languages, each with its own motion system, layout rhythm and interaction details.

Every brand, product, customer and number on these pages is invented.

Try it live below ↓ View code on GitHub Download ZIP

Open full screen ↗

This is the real page running, not a recording. Scroll inside the window, hover and click around.

Design 01

01 · Editorial Dark

Serif editorial, a 3D work loop and a bento grid

A dark, magazine-like layout: oversized serif headlines, lime highlights and dense product panels that feel alive without shouting.

Real-time Three.js hero: a twisting loop of metallic slats with labels pinned to moving 3D nodes and a pulse that travels the loop
Bento grid with a scrolling approval feed, a floating request card, six-row connector marquees and a work log with a row sweep
Count-up stats with a 650-dot activity grid, a live log ticker and an animated equaliser
Auto-advancing chapter tabs with progress bars and coded SVG illustrations

Three.jsInstancedMeshIntersectionObserverCSS keyframesResponsive

Open live page → Watch section tour

Design 02

02 · Cinematic Light

Full-bleed photography, glass layers and quiet motion

A bright, spacious layout that leans on photography, soft neutrals and scroll-driven storytelling.

Full-bleed hero with a slow Ken Burns zoom, a scanning line and a word-by-word blur reveal on the headline
Scroll-pinned 3D glass-plate stack: seven isometric layers lift in sync with expanding pills and a progress bar
Eight product cards with hand-coded animated visuals: masking, checklists, orbits, flows and floating chips
Centre-mode industry carousel with autoplay, swipe and dots, count-up stats, parallax story images and an accordion FAQ

CSS 3D transformsposition: stickyScroll-linked JSVanilla JSResponsive

Open live page → Watch tour

No framework, no build step

Plain HTML, CSS and JavaScript. Each page is a single file you can open, read and reuse. Three.js is the only library, and only on the first design.

Built for a visual page builder

Both pages were first built inside a drag-and-drop page builder, with inline styles so every text, colour and button stays editable. A small shim lets them run standalone here.

Motion with manners

The 3D scene and auto-play pause when off screen, every animation respects reduced-motion settings, and never hide content if JavaScript fails. Layouts hold up from phones to wide desktops.