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 skill identifier, npm package and ClawHub listing stay the same. The repository is now MustBeSimo/web-design-studio.

Your brief, backed by reusable design craft and browser evidence.
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.

Why give your agent a skill

Bring a working standard to every cinematic website. Web Design Studio packages art direction, motion patterns, fallback requirements and verification tools so you can reuse the craft instead of reconstructing the instructions for each project. Your brand determines the look; the skill gives the agent a process to build and inspect it.

What you want	What the skill adds
A website that belongs to your brand	Brand precedence, visual references and a content-led story before effects.
Motion that explains the subject	Start → transformation → readable hold → exit, with reusable interaction patterns.
A page that remains usable	Explicit mobile, reduced-motion, no-JS and renderer-failure requirements.
Evidence you can inspect	Static checks and a five-profile browser proof workflow, with failures and missing evidence reported.

Start with a product reveal, an interactive material study, or a camera journey through a brand world. Adapt 28 examples, 11 visual systems and nine components to your own subject, then use the included checks to inspect the result.

Explore the live collection · See the visual evidence · Download the illustrated guide

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/web-design-studio

Inspect the ClawHub package or choose Claude Code, Cursor, Hermes, Kimi Code, Gemini CLI or another agent.

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.

Choose the experience: editorial motion, an interactive 3D object, or an immersive camera journey. The agent matches the implementation to your brief and builds the responsive and fallback states alongside it.

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.

Validation and development results

On 12 September 2026, source v2.7.6 passed 6 reference fixtures and 9 verifier failure-path tests; FIELD returned clean reports in 5 browser profiles. Test scope and reproduction commands.

The skill is hardened in public through prompt comparisons that retain their builds, costs, screenshots and failure evidence: first comparison · second run · latest sealed forward protocol. Findings feed directly into copy fidelity, fallback, interaction and efficiency safeguards. Claims stay scoped to what these reproducible runs actually demonstrate.

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

Make every project a head start.

Web Design Studio Pro adds the Motif Engine: retrieve patterns by intent, build on accumulated project knowledge, and develop variants from your own visual language. Bring what you learned into the next brief.

Compare editions · See how the stack fits

_{The free edition remains available for unlimited personal and commercial projects.}

Install

All paths install the same normal edition.

Skills registry

npx skills add MustBeSimo/web-design-studio

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/web-design-studio
/plugin install cinematic-scroll@mustbesimo

Git clone

git clone https://github.com/MustBeSimo/web-design-studio ~/.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.