Web Design Studio

Distinctive websites, interactive 3D and motion—built with your coding agent.

Formerly Cinematic Scroll. The product has a broader name; the established cinematic-scroll install commands, GitHub repository and ClawHub listing stay the same.

One sentence in. A distinctive, production-ready website out.
Live site · Real 3D flagships · Install · ClawHub · Star on GitHub

Web Design Studio is a free, MIT-licensed design and build skill for coding agents. It turns a product, portfolio, launch, or story into a distinctive website with deliberate art direction, interactive 3D, scroll choreography, resilient motion, and evidence that the result actually works.

It is not a prompt pack and it is not a runtime dependency. The skill guides the agent; the finished website stays yours.

Choose the install route for your agent:

OpenClaw / ClawHub

npx clawhub install @mustbesimo/cinematic-scroll

Claude Code, Cursor and other agents supported by the skills installer

npx skills add MustBeSimo/cinematic-scroll-skill

Inspect the ClawHub package or check agent-specific setup.

Then ask:

Use cinematic-scroll to turn this product into a one-page story. Match the brand and assets in this project, create one memorable scroll reveal, and prove the mobile and reduced-motion versions.

No account, Pro purchase, TasteHQ key, or image-generation key is required.

Interaction toolkit

Six text treatments, magnetic/depth surfaces, four original shader families and a shared scroll/pointer/proximity runtime—all MIT. React and Three.js adapters add demand rendering, adaptive quality, asset cleanup and context recovery. The WebGPU/TSL study is a separate experimental preview with WebGL2 fallback.

• FIELD: observe, focus and reframe an optical instrument.
• Effects lab: isolate and explore the ingredients.
• Runtime guide: copyable APIs and integration contracts.

Open the standalone HTML files, or serve the repository. For React, run npm ci && npm run dev in templates/nextjs, then visit /v3-flagship, /effects-lab or /webgpu-preview. Generated examples stay synchronized with npm run build:lab and npm run build:flagship. No remote publication is needed.

Three/types are pinned to 0.185.0 because the compatible postprocessing release excludes 0.186. Optional runtime code belongs to your output; there is no hosted service dependency or paid visual-effect tier. Web Design Studio Pro's Motif Engine remains separate.

What you get

• A content-led story and visual direction before effects are chosen.
• Standalone HTML for a fast first page, or integration into an existing app.
• Pinned chapters, parallax, scrubbed video, kinetic type, and real 3D patterns.
• Eleven swappable visual systems and nine reusable components.
• Progressive fallbacks for touch, reduced motion, missing JavaScript, and WebGL failure.
• A deterministic doctor plus browser proof across desktop, mobile, reduced-motion, and no-JS profiles.
• Optional TasteHQ brand matching when a target URL or embedded grammar is available.

The agent chooses the lightest stack that can carry the story. Most pages do not need WebGL; when real depth matters, the same performance and fallback standards still apply.

See the proof

Seven Real 3D flagships

Seven live websites, seven different reasons to use depth. Every flagship is scrollable, source-visible, bounded by a performance budget, and backed by a designed fallback.

01 · Aureus Liquid chrome · camera descent	02 · Atelier Marne Art halls · architectural flythrough
03 · Verdant Instanced foliage · sunlight	04 · Aether Object · world · field · figure
05 · Obsidian Faceted glass · material response	06 · Weather Cloud volume · density control
07 · Nexus Particles · wave displacement	Explore all 28 examples → Try a live scene, then copy its build prompt and adapt it to your subject.

If an example helps you build something, star the repository to keep it handy.

More than one aesthetic

The motion grammar stays consistent; the art direction does not. Browse the complete visual collection, including every original editorial and all eleven visual systems.

Live example	Direction	Code
Classic Touch	Renaissance editorial	Source
Maya Torres	Brutalist creative studio	Source
Vantascope	Editorial sci-fi	Source
Maison Solenne	Quiet luxury	Source
Bloom	Playful product story	Source
Atelier Nocturne	Kinetic editorial	Source
Digital Wealth	Financial product story	Source
Kern	Mechanical instrument and calibration	Source
Meridian	symmetric monument	Source
Vanta Labs	clinical noir	Source
Polly & Plot	storybook geometry	Source
Obsidian	temporal monument	Source
Farsight	atmospheric sublime	Source
Keepsake	warm scrapbook	Source
Drift	naturalistic drift	Source
Concrete / Orange	brutalist kinetic	Source
Chroma	liquid chrome	Source
Verdant Press	botanical editorial	Source
Signal	data cinematic	Source
Naturally Rooted	A slower editorial study	Source
Novadeck	A playful digital throwback	Source

The visual systems live in themes/. The components live in components/. They are starting points, not a fixed house style.

Web Design Studio and Pro

The normal edition is the complete, useful product—not a trial.

Web Design Studio · free forever	Web Design Studio Pro · for repeat practice
Build complete cinematic websites	Build on accumulated project knowledge
Story and motion planning	Intent-based pattern retrieval
28 references + 11 visual systems	Reuse tracking across builds
Components and Real 3D patterns	Learned variants from your own language
Doctor + five-profile browser proof	Deeper iteration without starting cold
Optional TasteHQ matching	Proprietary Motif Engine

Use Web Design Studio for as many personal or commercial projects as you like. Use Pro when repeated work should compound into a visual memory.

Explore Web Design Studio Pro → · Compare editions · See how the stack fits

Install

All paths install the same normal edition.

Skills registry

npx skills add MustBeSimo/cinematic-scroll-skill

npm installer

npx cinematic-scroll-skill
npx cinematic-scroll-skill --dir .cursor/skills

OpenClaw / ClawHub

openclaw skills install cinematic-scroll

The ClawHub edition is a lean, text-only normal edition with the complete story, implementation, interaction, 3D, accessibility, and verification workflow. Its source lives in skills/cinematic-scroll/ and is gated by NVIDIA SkillSpector in CI without a suppression baseline.

Claude Code marketplace

/plugin marketplace add MustBeSimo/cinematic-scroll-skill
/plugin install cinematic-scroll@mustbesimo

Git clone

git clone https://github.com/MustBeSimo/cinematic-scroll-skill ~/.claude/skills/cinematic-scroll

For Claude Desktop, Cursor, Hermes, and alternative OpenClaw paths, see COMPATIBILITY.md.

Two build modes

Mode A — a section or standalone page

Use this for a hero, a campaign page, or a fast concept. The output can be one runnable HTML file with no build step.

Build a self-contained pinned hero for this brand. Keep the page readable without JavaScript and give touch devices a natural-flow version.

Mode B — a full release site

Use this for multi-chapter stories and existing React/Next.js products. The skill preserves the installed framework and scroll provider, then integrates the sequence at a real route.

Build a complete release story for this product inside the existing app. Reuse its design system, create one signature moment, and verify the built route.

The included templates/nextjs/ project is available when a new Next.js scaffold is actually needed. Generated media through fal.ai is optional; demo mode and local assets work without a key.

Quality is a gate

cinematic-doctor scores static craft and exits non-zero below the chosen threshold:

npm run doctor -- examples/flagship/index.html

The end-to-end verifier combines contract checks with browser evidence:

node tools/verify/verify-build.mjs ./index.html --phase polish

For a full interaction matrix:

node tools/page-proof/matrix.mjs ./index.html --out .verify/page-proof

That matrix covers desktop, mobile/touch, reduced motion on both layouts, and JavaScript disabled. A requested check that cannot run reports INCOMPLETE; a failed check reports FAIL. Neither is dressed up as success.

Install browser-tool dependencies once with npm install in the skill directory. Chrome or Chromium is needed only for screenshot proof, not to generate a standalone page.

Design system and architecture

SKILL.md                    compact agent contract and workflow router
design.md + tokens/        DTCG color, type, spacing, and motion contract
themes/                    eleven one-file visual systems
components/                nine named patterns in HTML and React
references/                story, build, motion, performance, 3D, and XR guidance
examples/                  live references, prompts, and Real 3D flagships
templates/nextjs/          optional full-site starter
tools/cinematic-doctor/    deterministic static quality gate
tools/page-proof/          browser screenshots and interaction matrix
tools/verify/              one-command verification orchestration
tools/tastehq/             optional brand query and score adapter
evals/                     triggering and workflow behavior checks

The main contract is SKILL.md. It routes to detailed references only when the build needs them, keeping agent context smaller and decisions clearer.

One choreography, two media

scroll-choreography.json is a declarative timing source that can compile to a webpage timeline and launch-film markers. See compile-choreography.mjs and the compilation contract.

Real 3D assets

The flagship can run procedurally before any model arrives. When assets are available, ASSETS-3D.md defines GLB/USDZ formats, scale, pivots, triangle caps, materials, camera nodes, and manifest paths so the upgrade is data—not a rewrite.

Develop and verify this repo

npm install
npm test

The test suite checks tokens, themes, links, skill mirrors, components, the doctor, evals, benchmark behavior, verification semantics, browser-matrix orchestration, package contents, and the TasteHQ adapter.

Useful commands:

npm run tokens:check
npm run themes:check
npm run components:doctor
npm run proof -- examples/noir/index.html
npm run bench -- https://example.com

CinematicBench is the companion passive benchmark for pacing, performance, accessibility, and motion craft.

Principles

• Content and brand lead; effects follow.
• Use real 3D only when spatial depth carries meaning.
• One scroll clock, reversible setup, and no global teardown.
• Mobile is a composition, not a shrunken desktop.
• Reduced motion restores readable flow; it does not merely set duration to zero.
• A static poster or readable page is a designed state, not an apology.
• References inform direction without copying assets, logos, text, or exact compositions.

License

MIT © 2026 Simone Leonelli. See LICENSE.

Built something with it? Submit it to the showcase or email simone@w230.net.