Spline is the reason 3D showed up on marketing pages that have no 3D engineer. It is a visual editor: someone models, lights and animates a scene in a browser, then exports it, and a React component drops it into a page. That removes the skill barrier entirely, and it replaces it with a weight problem nobody warns you about.
The component
Spline Scene is the integration: a Spline scene lazy-loaded into React, with a spotlight effect behind it and a responsive layout around it. It is the most-bookmarked 3D component in the catalogue, which is a fair indication of how much appetite there is for scenes that do not require writing shaders.
The 3D guide puts it beside the alternatives: a 5KB WebGL globe, CSS perspective galleries, and a full scene library. Spline sits at the heavy end, and knowing that before the hero ships is the point of this page.
What it costs
Three things arrive with a hosted scene, and only the first is obvious.
The runtime. The viewer library that renders the scene, loaded before anything appears.
The scene file. This is where the surprises are. Geometry, textures and animation, exported by a designer who was optimising for how it looked. A scene can be several megabytes without anyone noticing, because it looks the same at every size.
A canvas that keeps rendering. A frame loop that runs while the tab is visible, draining battery on a laptop and heating a phone.
The fix for all three is the same discipline the shader guide applies: check the network panel before deciding, cap the pixel ratio, stop the loop when the canvas leaves the viewport or the tab is hidden, and ship a poster image so the first paint is not an empty box.
Making a scene affordable
Four things worth asking the person who made it, because they are decided in the editor rather than in your code.
How many polygons, and how large are the textures? A 4K texture on an object that renders at 300 pixels is the single most common source of weight.
Is the animation baked or interactive? A looping baked animation can often be a video, which streams and decodes far more cheaply than a scene renders.
Does it need to react to the pointer? If not, a rendered image sequence or a short loop gets the same impression at a fraction of the cost.
Can it be simplified for mobile? A second, lighter scene, or no scene at all below a breakpoint, is a legitimate answer.
What it can never do
A canvas contains no text. Whatever the scene communicates has to exist in the HTML as well, which the 3D guide states and which is worth repeating here because a Spline hero is usually the whole first screen: if the headline is inside the scene, the most important string on the page is invisible to search engines, answer engines and screen readers.
And it is motion. Under prefers-reduced-motion: reduce, render a still frame and stop.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| Spline | Designing the object visually, with no shader code | A hosted runtime and a scene file to download |
| React Three Fiber | Scenes built in code, with control over every cost | A real learning curve and a large bundle |
| A video loop | The same impression when nothing needs to react | Not interactive |
| 21st | The Spline integration and the lighter 3D alternatives | 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.
Frequently asked
- What does a Spline scene cost on a page?
- Three things: the viewer runtime, the scene file itself, and a canvas that keeps rendering. The scene file is where the surprises are, because it is exported by someone optimising for how it looks and can reach several megabytes without appearing any different.
- How do you make a Spline hero affordable?
- Check the network panel before committing, cap the pixel ratio, stop the frame loop when the canvas leaves the viewport or the tab is hidden, and ship a poster image so the first paint is not an empty box. Ask for a lighter scene, or none, below a mobile breakpoint.
- What should you ask the person who made the scene?
- Polygon count and texture sizes, since a 4K texture on an object rendered at 300 pixels is the commonest waste; whether the animation is baked, in which case a video may be cheaper; whether it needs to react to the pointer at all; and whether it can be simplified for mobile.
- Can a search engine read a Spline hero?
- No. A canvas contains no text, so if the headline lives inside the scene the most important string on the page is invisible to search engines, answer engines and screen readers. Keep the headline in the HTML and let the scene sit behind it.