3D and motion

A page with depth makes a launch or a product feel tangible. The order below sets one living background under the promise, shows the product in real perspective, lets the story move through space while people scroll and ends calm. Every part shows a still picture without JavaScript and with reduced motion.

8 componentsInstall all of it at once

The order

Top to bottom, the way the sections sit on the finished page.

Step 1 / 8 · 3D backgrounds
Shader gradient
Flowing light behind the headline gives the first screen depth, with a scrim that keeps the text readable.
Flowing light in the accent color and its neighbours, drawn live with WebGL. Folds like silk, follows the pointer and the scroll, with a still picture as fallback.
4 variants · Shader gradient
Step 2 / 8 · 3D surfaces
Device in 3D
The product in a turned device shows the real screen and invites a second look.
A phone, tablet, laptop or browser window in real CSS perspective, with an edge and a back. It rests at a camera angle, leans toward the pointer and floats gently while on screen, your content stays live inside.
5 variants · Device in 3D
Step 3 / 8 · 3D scenes
Depth text
One statement in type with depth marks the turn from promise to proof.
Type in 3D layers that turn, rise and come apart with the scroll. The words stay one real heading, the depth comes from copies hidden from screen readers. Without JavaScript the finished picture stands.
5 variants · Depth text
Step 4 / 8 · 3D surfaces
Tilt cards
Feature cards that lean toward the pointer make each capability feel within reach.
Cards that lean toward the pointer like glass, with a light that follows and contents floating at their own depth. Focus lifts them too, on touch screens and with reduced motion they lie flat and calm.
5 variants · Tilt cards
Step 5 / 8 · 3D scenes
Camera flight
A camera flight through layers tells the way of working in chapters while the page scrolls.
A camera that flies forward through planes of content while the page scrolls. Each plane comes out of the haze, sharpens in front of you and passes by. Without JavaScript the planes stand as a calm list.
4 variants · Camera flight
Step 6 / 8 · 3D scenes
Rotate showcase
A device that turns with the scroll shows several screens of the product in one place.
An object that turns with the scroll and shows a new side or page at every turn, with the matching chapter beside it. Screens change while the back faces you, so the change is never seen.
4 variants · Rotate showcase
Step 7 / 8 · 3D surfaces
Card stacks in 3D
Voices of customers as a stack in depth, one card at a time and all of them in view.
Cards arranged in real depth, a fan in a hand, a deck to deal from, a cascade of windows, a turning ring and a drum to flip through. Live HTML on every card, arrow keys everywhere, the ring pauses on hover and focus.
5 variants · Card stacks in 3D
Step 8 / 8 · 3D backgrounds
Glow orb
A breathing light behind the closing invitation draws the eye to the last button.
A soft, breathing orb of light, shaded like a sphere with a swirl inside and a wide glow, drawn with WebGL. Leans toward the pointer.
4 variants · Glow orb

Install all of it at once

One command puts every component of this collection into your project.

aiw add @ai-website/shader-gradient @ai-website/device-3d @ai-website/depth-text @ai-website/tilt-card @ai-website/camera-flight @ai-website/rotate-showcase @ai-website/card-stack-3d @ai-website/glow-orb

Prompt for your AI assistant

Hand Claude, Cursor, Copilot or Codex the order and it builds the page from exactly these parts.

Build a page with 3D and motion with the UI Kit. Use Shader gradient, Device in 3D, Depth text, Tilt cards, Camera flight, Rotate showcase, Card stacks in 3D and Glow orb in this order. Write real copy for my offer and check the page in light and dark.

The order

Install all of it at once

Prompt for your AI assistant

More collections