CSS 3D Playground
repository

CSS 3D Playground

Stage the motion. Export the code.

CSS and Three.js engines. Export targets named in the README are CSS, GSAP, Anime.js, and Three.js.

Open the playground Open the repository
Card workbench
Paper media stage
GSAP export
Mobile editor

Screens

Workbench, media, export, mobile.

Card workbench
Paper media stage
GSAP export
Mobile editor

Use

Six steps from the README.

  1. Stage

    Pick card

  2. Engine

    CSS or Three.js.

  3. Time

    Edit the timeline.

  4. Export

    CSS

Local

Install with pnpm.

pnpm install

Then pnpm run dev at http://127.0.0.1:3000. Node 22.22.2+. pnpm 11.21+.

Limits

Session media.

  • Storage

    Documents and history stay in browser storage. Uploaded media is session-local.

Boundary

No accounts.

Stays local

  • Documents, history, and session media.

Leaves the machine

  • The README says no accounts, analytics, or telemetry.

Animate on the page. Copy the export you need.

Open the playground