Free MIT skill. v2.7.6 · Release notes ↗
Give your coding agent the craft to build distinctive websites, interactive 3D and stories in motion.
A journey through a liquid chrome vault.
01 / Spatial experiences
Seven live scenes to step inside, explore and adapt. 7 projectsMade to
move. ↗
A descent through a liquid vault of reflective chrome.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Stage a camera descent through reflective volumes, with a clear focal path and pauses that let the material read. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
Walk from an intimate art hall through an arch into a tall, sunlit atrium.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Build a gallery route with three distinct spatial stops and an arch transition. Face the artworks toward the visitor and provide an exposure control. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
Leaf, vine and filtered sunlight reclaim a concrete colonnade.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Lead the camera along a planted colonnade into a canopy. Use instancing for repeated foliage and let a sunlight control change the scene. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
An object, a hall, a particle field and a figure form one spatial story.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Connect object, architecture, particle field and figure as four related movements. Hold each subject clearly before moving into the next. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
A faceted glass monolith changes from polished to frosted under light.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Frame one faceted object against a readable environment. Let visitors compare polished and frosted material states without hiding the object behind copy. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
Descend through cloud banks and change the density to open the horizon.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Create an atmospheric descent with a visible horizon. Connect a density control to cloud volume and shadow, and provide a designed still fallback. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
A spatial studio moves between a galaxy, a wave and a pointer-driven field.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Build a spatial studio story around a particle field and a displaced wave. Give the visitor a signal control that visibly changes both. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
02 / Stories & identities
Product stories, portfolios and visual systems. 21 projectsYour brief.
Your world. ↗
Classical imagery and editorial chapters introduce a studio built around taste.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Use classical imagery and editorial hierarchy to tell a studio story. Give each chapter a distinct argument and let layered imagery reveal its context. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
A creative director’s portfolio pairs oversized type with an expressive work reel.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Build a creative portfolio with assertive typography and a clear selected-work sequence. Let the work provide the colour and preserve a direct contact action. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
A fictional science-fiction release follows a signal into the unknown.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Build suspense from signal to descent to witness. Use restrained light and staged reveals, keeping the release details and access action readable. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
Provenance, object and atelier unfold in warm ivory and cognac.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Lead from provenance to object to making. Use close material details and quiet transitions; give the object a stable viewing moment before the enquiry. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
A playful productivity app tells its story through focus, flow and community.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Build a playful app launch around focus, flow and community. Tie colourful motion to a product benefit and make the download action immediately available. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
A design atelier presents horology, restoration and entertainment projects.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Build an editorial portfolio around three contrasting projects. Use one consistent navigation system and let each project have its own image-led reveal. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
A financial product story presented as an editorial landing page.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Explain a financial product through supplied facts and a clear sequence of benefits. Animate comparisons only when the data is provided; keep disclosures readable. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
A mechanical instrument is examined through assembly and calibration.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Reveal a mechanism in stages: assembly, friction and signal. Use a diagnostic comparison to explain one real detail, with a static equivalent for every state. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
An architectural study of symmetry, stone and permanence.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Compose an architectural story around a central axis. Use measured reveals to move from overall mass to material detail while retaining visual balance. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
Cold light isolates precision instruments against a dark field.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Present one instrument with controlled light and generous silhouette clearance. Move from signal to method, using motion to isolate a functional detail. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
Primary shapes and playful composition introduce a curious design studio.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Build a playful studio story from bold geometric shapes. Let shapes assemble into meaningful compositions while headings stay readable and selectable. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
Horology meets architectural scale in shadow and warm gold.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Connect a timepiece to architectural scale through layered depth and warm light. Give the reveal a readable hold rather than constant camera travel. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
A distant subject emerges through haze, light and open space.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Establish scale with a distant subject and atmospheric layers. Reveal the subject gradually, keeping the essential message available before the reveal finishes. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
Sun-faded photographs and tactile paper form a personal archive.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Build a personal archive from supplied photographs and captions. Use hand-placed compositions and modest depth without sacrificing reading order on mobile. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
An outdoor story paced around morning light and quiet observation.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Tell an outdoor story through light, leaves and small observed details. Use subtle parallax and calm transitions, with no unnecessary pinned reading sections. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
Exposed structure and hazard orange frame an industrial goods story.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Build an industrial product story with exposed structure and decisive transitions. Use motion to reveal assembly or impact, keeping specifications easy to scan. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
A dark product study built around reflective surfaces and cyan light.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Use reflective imagery and continuous visual transitions for a product story. Choose authored media or real-time materials according to whether interaction needs them. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
Botanical plates, warm paper and green ink shape a publishing story.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Build a publishing story with botanical imagery and a comfortable reading measure. Let page-like reveals pace the work while copy stays in normal document flow. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
An observability story turns readouts into a mission-control presentation.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Build a data story from supplied measurements. Reveal charts in reading order, keep axes and units visible, and provide the full values without animation. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
A field apothecary follows its ingredients from soil to harvest to the still room.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Trace an ingredient from soil through harvest to preparation. Use supplied provenance and product facts, with gentle image reveals and a clear enquiry or shop action. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
A fictional device launch moves from power-on to the core and Hypernet.
Adapt this example
Use cinematic-scroll to build a website for [YOUR SUBJECT]. Build a retro device launch with a power-on opening and a clear hardware story. Keep boot effects brief and make product details and ordering available immediately. Use my supplied content and brand. Deliver responsive and reduced-motion versions, keyboard access and working links; verify the result in a browser.
No projects match your search. Try a different name or style.
Why give your agent a skill
Reuse the craft behind the page: art direction, motion patterns and checks your agent can apply to the next project. Your brand sets the look.
Start with the subject, brand and content. Use the examples as references for decisions, not a template for the same look.
Give each reveal an entry, a transformation, a readable hold and an exit. Reuse interaction patterns with complete mobile and static versions.
Inspect desktop, mobile, reduced-motion and no-JS states. The verifier reports failures and missing checks so you can see what still needs work.
Checked 12 September 2026 on source v2.7.6. These results cover the named examples and checks; they are not an LLM win rate. A strong custom prompt can specify the same requirements. The skill packages them for reuse.
We also tested that claim: one brief, same model, three builds — ordinary prompt, expert prompt, this skill. All three passed the same browser checks; the expert prompt kept the copy most faithfully and cost half as much; the skill avoided the ordinary prompt's empty scroll frames. Three builds prove nothing in general, so we publish the protocol, pages and raw results instead of a verdict.
Two editions · one craft standard
The normal skill is the complete, useful edition—not a trial. Pro is for people who want the system to learn from repeated projects and compound their own visual language.
Everything needed to direct, implement, and verify a distinctive website.
Pro adds a proprietary Motif Engine that turns past decisions into useful memory.
Start here · Bring your favourite agent
Claude Code, Cursor, Hermes, Kimi Code and more. Bring the same design craft into the tools you already use.
Choose your agent, copy the command, then describe the website you want to make.
All integrations & setup guidance ↗Choose your agent
The installer lets you choose from its supported coding agents.
npx skills add MustBeSimo/web-design-studioRun in your terminal. Then start a new agent session.
npx clawhub install @mustbesimo/cinematic-scroll