splinelisted

Embed and integrate Spline (spline.design) 3D scenes — the collaborative browser-based 3D design tool — into Next.js 14 + Tailwind 3.4 + motion v13 (`motion/react`) via the verified @splinetool/react-spline + @splinetool/runtime packages, or decide against a live embed and use an image/video export instead. Use this whenever a task involves Spline in any form, a 3D scene/hero/product visual needs embedding in a web page, a *.splinecode or prod.spline.design URL appears, someone asks for an "interactive 3D hero", "3D landing page", "rotating product model", or "that floaty 3D blob thing", or when weighing the real cost of 3D on a landing page (the runtime is ~582KB gzipped — measured). Also use it for Spline pointer-events layering under hero copy, Suspense/poster fallbacks, reduced-motion and mobile fallbacks, and free-tier watermark questions — code and tradeoffs live in references/integration.md.
shashidharbabu/claude-design-skills · ★ 0 · Web & Frontend · score 60

Install: claude install-skill shashidharbabu/claude-design-skills

# Spline Spline (spline.design) is a **collaborative 3D design tool that runs in the browser** — freemium SaaS. A human models/animates the scene in the Spline editor; the scene then reaches your page one of two ways: 1. **Live embed** — the scene streams from `prod.spline.design/.../scene.splinecode` and renders in a WebGL canvas via Spline's runtime. Interactive, and expensive (numbers below). 2. **Flat export** — image or video of the scene. Zero runtime cost, zero interactivity. Claude Code cannot author the scene. This skill owns **choosing between those two paths** and **integrating whichever wins** — the live-embed engineering (SSR, fallbacks, pointer events, LCP damage control) is in `references/integration.md`. ## Verified packages (npm, Aug 2026) | Package | Version | License | Notes | |---|---|---|---| | `@splinetool/react-spline` | 4.1.0 | MIT | 27KB. Peers: `@splinetool/runtime`, `react`, `react-dom`, **`next >= 14.2.0`** (for the `/next` entry) | | `@splinetool/runtime` | 1.12.98 | **none declared on npm** — treat as proprietary Spline code | `build/runtime.js`: **2.05MB raw, 582KB gzipped** (measured from unpkg) | Install both: `npm i @splinetool/react-spline @splinetool/runtime`. That 582KB gz is the headline. It is ~15x a typical landing-page JS budget line item, plus WebGL init, plus the `.splinecode` scene payload itself. A live Spline hero **will** hurt LCP/INP on mid-range mobile. Default posture: poster-first, runtime deferred (patterns i