← Visual Library / Effects

Spline 3D embed

Embed an interactive 3D scene from Spline as a hero element. Cursor-tracking, light, depth — all without writing Three.js by hand.

Effects Captured

Use when — flagship landing pages where a premium hero is worth ~5 MB of payload. Skip for marketing sites where conversion speed matters more.

Live demo

// mocked — real Spline scene goes here

CSS

/* The actual Spline embed — drop the exported code in your component */
<canvas id="canvas3d"></canvas>

<script type="module">
  import { Application } from 'https://unpkg.com/@splinetool/runtime';
  const canvas = document.getElementById('canvas3d');
  const app = new Application(canvas);
  app.load('https://prod.spline.design/YOUR-SCENE-ID/scene.splinecode');
</script>

The Spline workflow

Free account at spline.design. 3 projects max on free tier.
Community tab → search "rotating interactive hero" (or any keyword).
Click Remix on a scene you like. Adds it to your projects.
Click the scene's background → make transparent (so your page bg shows through).
Color-pick all colored shapes → swap to your brand palette. Both base color and depth color need updating.
Delete any text or label objects you don't need.
Export → Code → copy.
In Claude Code: paste the exported code with "add this to the hero section."

Trade-offs

Payload: ~5 MB. Slow first paint on 3G.
Performance: needs a decent GPU. Lazy-load below the fold; pre-load for hero.
Accessibility: add an aria-hidden="true" wrapper since 3D scenes are decorative.

Lighter alternative: Three.js + a single mesh

If you need exactly one rotating shape, write 30 lines of Three.js directly. Lighter, faster, no dependency on Spline's runtime.

Source: Jono Catliff masterclass, 2026-05-19. See masterclass notes.