# 3D

> Perspective scenes, WebGL sculptures and objects with real depth: cubes, books, helixes and isometric stacks.

- [Tag Sphere](https://www.assembli.design/components/tag-sphere.md): A word cloud wrapped round a sphere: Fibonacci-distributed labels orbit with depth-scaled size and opacity, drag to spin with inertia, and hovering or focusing a word slows the globe. Positions are written straight to the DOM, so there are no re-renders.
- [Book CTA](https://www.assembli.design/components/book-cta.md): Lead-magnet call to action built around a real CSS 3D hardcover with spine, page block and back cover. It floats, turns toward the cursor, and on hover the front cover swings open on its hinge to show the title page. The linen cover has a foil band and moving glare. An email form with pending and success states sits beside it.
- [Contribution Skyline](https://www.assembli.design/components/contribution-skyline.md): A year of activity as a 3D city of bars on canvas, with real per-face shading and painter-sorted depth. Bars rise in a wave on load, the camera sways gently and you can drag to orbit. Hover any bar for its exact count and date. A stats row and legend come built in. Theme-aware, any hue.
- [Cube Letter Swap](https://www.assembli.design/components/cube-letter-swap.md): Rotating word where every letter is a real 3D prism: on each tick the letters roll a quarter turn in a staggered wave with a little overshoot, revealing the next word on the face below, with light falling off as faces turn away. Works inline in any headline. Rolls up or down, with an optional mode that sets each letter on a tile. Screen readers hear each word once.
- [Depth Tunnel](https://www.assembli.design/components/depth-tunnel.md): Scroll-driven 3D gallery: frames hang on alternating walls of a CSS perspective corridor and the camera flies down it as you scroll, easing between wheel steps. Frames emerge from fog, sharpen as they pass, floor and ceiling grids stream by, and a headline waits at the vanishing point.
- [Device Hero](https://www.assembli.design/components/device-hero.md): App launch hero with a phone built entirely from DOM layers: a live screen, a camera plateau on the back and a frame of stacked slices that gives the edge real thickness. It leans toward the cursor on a spring, flips to show its back, and floating cards sit at their own depth for true parallax.
- [Dotted Surface](https://www.assembli.design/components/dotted-surface.md): Background of dots laid on a rolling 3D surface that recedes to a horizon. Columns converge on the vanishing point, points shrink and fog with distance, and wave crests light up in an accent color. Moving the pointer casts onto the ground and sends ripples across it. Canvas 2D, theme-aware, pauses off-screen.
- [Exploded Stack](https://www.assembli.design/components/exploded-stack.md): Architecture section with an isometric stack of solid plates, each with a real thickness edge, that pull apart when they scroll into view and spread further on hover. A beam of light runs up through every layer, and the highlighted plate lifts out and glows. Autoplays through the layers and stays in sync with the list beside it.
- [Feature Cube](https://www.assembli.design/components/feature-cube.md): Feature section built around a real CSS 3D cube. Each side face shows one feature's visual. The cube turns the short way round on a spring when you pick a feature, autoplays with a progress line, and you can grab it to spin. Faces darken as they turn from the light, over a perspective floor grid.
- [Point Morph Hero](https://www.assembli.design/components/point-morph-hero.md): WebGL hero where eleven thousand points morph between a sphere, a torus knot, a wordmark sampled from canvas, a wave field, a lattice and a helix. Each morph bursts outward with a per-point stagger, depth drives size and color, the cursor parts the cloud, and a numbered index lets you pick a shape. Raw WebGL, no three.js.
- [Puzzle Cube](https://www.assembli.design/components/puzzle-cube.md): A fully working 3×3 twisty puzzle in pure CSS 3D: 26 cubies driven by rotation matrices, per-face Lambert shading from a fixed light, drag-to-orbit with inertia, keyboard face turns, and an autoplay loop that scrambles and then solves itself by reversing its history.
- [Sculpture Hero](https://www.assembli.design/components/sculpture-hero.md): Split hero with a raymarched WebGL sculpture: a breathing torus with three orbs melting through it, shaded as iridescent lacquer with anti-aliased edges on a transparent canvas. It turns toward the cursor over a receding ring floor, with floating glass callouts. No three.js; one fragment shader.
- [Testimonial Helix](https://www.assembli.design/components/testimonial-helix.md): Testimonials spiralling around a 3D helix that turns slowly. Cards on the far side show their backs and fade with the angle, Fling it to spin with inertia, and hover to slow it to a reading pace. Radius and rise adapt to the card count and number of turns.
- [Trifold Invite](https://www.assembli.design/components/trifold-invite.md): Letter-folded card in CSS 3D. Closed, it shows a cover flap with a wax seal; open it and the top flap swings up, then the bottom flap swings down, each panel shading as it turns from the light. Folding closes it in reverse order. Bring your own cover, three inside panels and a back.

Back to [all components](https://www.assembli.design/components.md).