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.