3D on a marketing page is a bet: you are spending real bytes and real battery on the first screen in exchange for a few seconds of attention. Sometimes the bet pays. It pays when the object being rendered is the product, when the reader can move it, or when the alternative is a stock photo of a laptop.
78 public components on 21st have "3D" in the name and 26 more say "globe". What separates the ones worth shipping from the ones that get removed a month later is almost never the shader. It is what happens on a mid-range Android on a hotel wifi.
The globe, which is its own genre
Every developer tool eventually ships a rotating globe, and there is a reason: it says "used everywhere" without a claim you have to defend.
COBE Globe by shuding is the one to start with. Its author describes it as a 5KB WebGL globe with markers, arcs and CSS anchor-positioned labels, drag to rotate with momentum physics. Five kilobytes is the number that matters: it is smaller than most hero images, which makes it the rare 3D element that costs nothing to justify. Globe by dillionverma is the autorotating variant of the same idea, and Wireframe Dotted Globe by shadway is the interactive rotate-and-zoom version.
If a globe is decoration rather than data, the honest comparison is an animated SVG or a video loop, both of which cost less. If it carries markers that mean something, the WebGL version earns its place.
A real scene
When the 3D is the point, Spline Scene is the fastest route from an idea to something on the page: a Spline scene embedded in React, lazy-loaded, with a spotlight effect behind it. Spline is a visual editor, which means the object can be built by someone who does not write shaders.
The trade-off is weight. A hosted scene pulls a runtime and the scene file itself, and it is easy to ship several megabytes without noticing. Check the network panel before deciding, set a poster image for the first paint, and never let the scene block the headline.
Mountain Scene by Dhileep Kumar GM is the lighter end of the same idea: an atmospheric backdrop rather than an interactive object.
Depth without WebGL
Most of what reads as "3D" on a landing page is CSS transforms, and that is good news: no runtime, no context, no GPU memory beyond what compositing already uses.
3D Gallery Photography and 3D Image gallery by shadway are perspective galleries. 3D Carousel by cult-ui rotates cards through a ring. 3D Testimonails by sean0205 applies the same treatment to quotes, and 3D Folder by Jatin Yadav is the tactile object version.
This family is where most projects should start. perspective, transform-style: preserve-3d and rotate3d give you the effect at the cost of a composite, they degrade to flat layouts when something is unsupported, and they do not need a canvas.
What 3D costs, concretely
Four bills, and the order matters because the first two are the ones that get products removed from a phone.
Bytes. Three.js is around 150KB gzipped before your scene, before a loader, before textures. React Three Fiber adds a reconciler on top. Against a 5KB globe or a CSS transform, that is the difference between a decision and a default.
A GPU context. Every canvas takes a WebGL context, and browsers cap how many can exist. Several 3D components on one page will silently lose their contexts, which is why a canvas that works in isolation can render blank in a real layout.
A frame loop that never stops. A requestAnimationFrame loop keeps running while the tab is visible and drains battery on a laptop. Pause it with an IntersectionObserver when the canvas leaves the viewport, and stop on document.hidden.
Nothing for a crawler. A canvas contains no text. Whatever the scene says has to exist in HTML as well, or search engines and answer engines see an empty box where your hero is. Put the headline in the DOM, and give the canvas a plain-language aria-label or hide it from assistive technology entirely.
The reduced-motion case deserves its own line: an autorotating object is motion the reader did not ask for. Under prefers-reduced-motion: reduce, render the first frame and stop.
Where else to look
The honest list of alternatives, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| React Three Fiber + drei | Real scenes: lighting, models, physics, cameras | The largest bundle in this table, and a real learning curve |
| Spline | Designing the object visually rather than in code | A hosted runtime and a scene file to download |
| COBE | One thing, extremely small: the globe | It only does globes |
| CSS 3D transforms | Depth, tilt, flip, perspective galleries | Not a scene: no lighting, no models, no camera |
| 21st | Finished scenes, globes and perspective galleries | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a 3D scene, get the previews inline, and let the agent write the file.
Frequently asked
- Is Three.js too heavy for a landing page?
- Often, yes. Three.js is around 150KB gzipped before your scene, a loader or any textures, and React Three Fiber adds a reconciler on top. A 5KB WebGL globe or a CSS transform gets most of the visual effect for a fraction of that. Reach for a full scene when the 3D object is the product, not when it is decoration.
- Why does my 3D component render blank on some pages?
- Probably a lost WebGL context. Every canvas takes one and browsers cap how many can exist at a time, so several 3D components on one page silently lose theirs. It is the usual reason a canvas that works in isolation renders as an empty box inside a real layout. Use one canvas per page, or CSS transforms for the secondary elements.
- Can search engines read a 3D scene?
- No. A canvas contains no text, so whatever the scene communicates has to exist in the HTML as well. Put the headline and the claim in the DOM, give the canvas a plain-language aria-label or hide it from assistive technology, and never let the scene be the only place a fact lives.
- How do I stop a 3D component draining battery?
- Stop the frame loop when nobody is looking. A requestAnimationFrame loop keeps running while the tab is visible, so pause it with an IntersectionObserver when the canvas leaves the viewport and stop on document.hidden. Under prefers-reduced-motion, render the first frame and do not animate at all.