Live Canvas · 3D

Palette-reactive 3D scenes

A gallery of three.js heroes for building the wildest premium pages — aurora, waves, a glowing orb, a synthwave grid and more. Every scene is PALETTE-REACTIVE: it reads your brand's colours at runtime, so the same scene renders in each shop's own palette. One shared renderer, WebGL2 / reduced-motion / saveData-gated, lazy-loaded — three.js never lands in a first-load bundle.

Browse designs →Build with an AI agent

9 scenes

Hover to play

Each preview is rendered in a different brand palette to show how the scene adopts your colours. Pick one in /admin/three-d, or drop it behind any design's hero.

▶ Hover

Butterflies

Neworganic · metamorphosis

An instanced flock of palette-tinted butterflies — procedural wings, flap-and-glide flight, scattering from the pointer. The FABLE flagship hero.

scene: "butterflies"
▶ Hover

Aurora

premium · dark-luxe

Full-screen GLSL aurora — flowing, mouse-reactive ribbons of light. The flagship premium dark-luxe hero.

scene: "aurora"
▶ Hover

Waves

Neworganic

A full-bleed plane of flowing noise dunes, palette-graded trough→crest with a fresnel sheen. Calm and organic.

scene: "waves"
▶ Hover

Orb

Newcore · AI

A glowing, gently-pulsing core sphere wrapped in a halo of orbiting points. Reads as a product / AI core.

scene: "orb"
▶ Hover

Grid-flow

Newretro-future

A glowing perspective grid floor + faint ceiling flowing to a horizon. Retro-future synthwave energy.

scene: "gridflow"
▶ Hover

Morphing blob

organic · SaaS

An organic gradient form that undulates with layered noise. Trendy, friendly modern-SaaS look.

scene: "blob"
▶ Hover

Particle field

tech · data

A field of floating dots that drift and react to the cursor. Technical, data / AI atmosphere.

scene: "particles"
▶ Hover

Low-poly / wireframe

structured · tech

A geometric wireframe in perspective. Structured, engineered, blueprint-like.

scene: "wireframe"
▶ Hover

Floating geometry

elegant

Glassy, slowly-rotating shapes. Elegant and brand-neutral — safe on any site.

scene: "floating-geometry"

How it works

One contract, brand-reactive by construction

A scene is a small module (mount / update / render / dispose) that receives your 6-colour brand palette. The shared Live Canvas owns the single WebGL context + frame loop and gates on device + motion preferences. Add a scene = one module + one registry entry — and it instantly works in every shop's palette.

← Back to the marketplace