Skip to content
UI Kit
Accent color

3D scroll animations and scenes

Scenes that move through space while the page scrolls. A camera flies through layers, panels come forward, type gains depth and devices turn to show their pages.

6 components · 25 variants
Switch category

A page that moves through space

A 3D scene turns the scroll into a camera move. The section stays pinned while the camera flies, turns or zooms, and the content arrives out of the depth. Each scene is real HTML in CSS perspective, so headings stay headings for search engines and screen readers, and without JavaScript or with reduced motion the finished layout stands as a calm page.

Camera flight flies forward through planes, as chapters, a gallery in space, years into the distance or a manifesto. Floating panels come forward one by one from a cloud, a shelf, an orbit or beside steps. Depth text gives one real heading 3D layers, as an extruded word, lines at different depths, a headline that stands up, an echo or a story that runs away. Tunnel zoom travels through cards, frames, rings with figures or a gate of light. The rotate showcase turns a phone, a laptop, a cube of pages or a card and shows a new screen at every turn. The perspective floor sets lines or dots under a heading, cards, rising bars or one offer.

One scene per page is plenty, it becomes the moment people remember. Camera flight and depth text fit a story or a manifesto, the rotate showcase and floating panels explain a product, tunnel zoom and the floor open or close a page. Keep each stop to a short line, the camera sets the pace and people read while it moves.

On this page

Every component of this category. Pick one to jump to its variants.

depth-text

Depth text

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.

Props and details · Depth text

Extruded wordNew in 1.2

One large word with a solid body in the accent behind it. It turns from left to right while the section passes and leans toward the mouse.

Lines at different depthsNew in 1.2

A headline whose lines float at different depths. While the section scrolls by they drift apart sideways and come together in the middle.

Headline that stands upNew in 1.2

The lines lie flat like a floor and stand up one after another as the section scrolls into view, the last one in the accent.

Echo into the distanceNew in 1.2

A word repeated as outlines into the distance. While scrolling the echoes close in on the solid front word.

Story that runs awayNew in 1.2

A short story on a tilted plane that runs up and away into the distance while the section stays. The whole text is one heading and paragraphs in the page.

camera-flight

Camera flight

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.

Props and details · Camera flight

Chapters in depthNew in 1.2

Text chapters stand at depth, alternating left and right, over a drawn floor that runs to the horizon. A thin line at the bottom shows how far the flight has come.

Years into the distanceNew in 1.2

Large years with their story, one after another along a line that runs into the distance. Good for a company history or the road of a product.

Manifesto in flightNew in 1.2

One large statement after the other comes toward you out of the dark and passes by. The calmest of the four, for values and a manifesto.

floating-panels

Floating panels

Panels that float in space and come forward one after another while the page scrolls. The one in front turns to face you, the others wait in the room. Without JavaScript they stand in a calm grid.

Props and details · Floating panels

Cloud of featuresNew in 1.2

Feature panels wait in a loose cloud far back, each comes forward to the middle in turn and returns to its place.

Panels on a shelfNew in 1.2

Panels stand side by side like books on a shelf, turned away. The active one slides forward and turns to face you, with a screen on top.

Orbit around the headingNew in 1.2

Panels on a ring in space, the ring turns with the scroll and brings each panel to the front below the heading.

Steps with a columnNew in 1.2

Steps on the left, the matching panel floats forward in a column on the right while the others tip away above and below.

perspective-floor

Perspective floor

A floor of lines or dots that runs to a soft horizon, as a stage for a heading, cards, figures or one offer. It streams toward you while scrolling and drifts slowly while on screen, text always stands on the calm page colour.

Props and details · Perspective floor

Opening over a gridNew in 1.2

A large heading above a floor of lines in the accent that glows at the horizon. Good as the first section of a product or an event.

Cards on a stageNew in 1.2

Three cards stand on a floor of dots with a soft reflection, the middle one a step forward. The camera swings a little while the page scrolls.

Figures as barsNew in 1.2

Figures rise as solid bars out of a floor while the section scrolls into view, the last one in the accent. The legend beside them carries every value in plain text.

Offer above the horizonNew in 1.2

A floor of dots toward a horizon of light in the accent, one card floats above it with an offer and a button.

rotate-showcase

Rotate showcase

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.

Props and details · Rotate showcase

Phone that turnsNew in 1.2

A phone turns round once per screen and shows its back with the cameras in between. The chapters on the left can be clicked to jump there.

Laptop from back to frontNew in 1.2

A laptop turns from its back to the front and opens its lid, then runs through its screens one chapter at a time.

Cube of pagesNew in 1.2

Four pages on the sides of a cube, a quarter turn per page. Good for showing the pages of a website or the areas of an app.

Spinning cardNew in 1.2

A card of our own design spins with the scroll, front and back take turns while the features beside it change. For memberships, gift and payment cards.

tunnel-zoom

Tunnel zoom

A zoom through a tunnel while the page scrolls, lined with cards, framed pictures, rings with figures or a gate of light. The section stays, the camera travels, a closing text waits at the end.

Props and details · Tunnel zoom

Tunnel of cardsNew in 1.2

Cards line the walls, floor and ceiling of a tunnel and pass by on every side. On phones they stand on the two walls, the closing text waits at the end.

Frame after frameNew in 1.2

Framed pictures stand one behind the other. Each fills the window as the camera arrives and passes, its caption on a calm shade.

Rings with figuresNew in 1.2

Rounded rings run into the distance in the accent. A figure stands in each one and passes by, like milestones on a road.

Gate of lightNew in 1.2

Rings of light lead to a round window. As the camera arrives the picture behind it opens to the full window and the closing text rises on a dark shade.

Similar components

More from Visuals, the same area of the kit.

Often combined with

Sections that usually sit next to 3D scenes on a page.

Often searched

Jump to

Copied to the clipboard