Pro 3D & cinematic building blocks
The premium pieces a Cartwright design is assembled from — palette-reactive 3D heroes, a rotatable product showroom, a CSS-only configurator, scroll-driven storytelling and editorial stat bands. Every element reads your brand's colours at runtime and degrades gracefully (WebGL2 / reduced-motion / saveData-gated).
6 elements
Hover to play
Each preview shows the element inside a shipped design. The 3D elements share one Live-Canvas renderer — three.js never lands in a first-load bundle.
Live-Canvas hero
premium · 3D3D Live-Canvas hero — any of the 9 palette-reactive scenes behind your headline. One shared WebGL renderer, reduced-motion / saveData-gated, lazy-loaded.
element: "hero-aurora"Butterfly flock hero
organic · metamorphosisThe FABLE instanced butterfly flock hero — procedural wings, flap-and-glide flight, scattering from the pointer. Palette-tinted to your brand.
element: "butterflies-hero"3D showroom
product · 3DRotatable 3D product showroom with spec rail — drag to orbit the hero product while the specs track alongside.
element: "showroom-3d"
Configurator
interactive · CSS-onlyBuild-your-own with live price — pure CSS :has(), zero JavaScript. Options update the summary and total as you pick.
element: "configurator"Scroll cinema
cinematic · scrollScroll-driven story — native animation-timeline: view(). Scenes pin, fade and hand off as you scroll, no scroll-jacking library.
element: "scroll-cinema"
Stat band
editorialEditorial stat band — oversized numerals with measured captions, the magazine-spread proof row for any landing page.
element: "stat-band"How it works
Premium by composition
Elements are the building blocks the premium DesignPacks are made of. Pick a design that ships them, or ask your AI agent to compose them into a bespoke page — every element adopts your palette by construction.