Kinetic Type Story
Build an expressive, scroll-driven website from your own brief: oversized typography, a kinetic disc, and a clear rhythm between chapters. Original source, ready to make your own.
A little less setup
Make this part of your toolkit.
Give your agent this prompt. You’ll approve access in your browser before it installs a Skill.
Read https://skilly.uk/install/skills/kinetic-type-story.md and follow the instructions to install this Skill for my agent.REAL SAMPLE / RELEASED PACKAGE
RELEASED v1.0.2A closer look at the actual output.
An original kinetic story generated from a structured brief. Open the live sample to explore the scrolling chapters and motion controls.
THE COMPLETE TEMPLATE
Try it. Make yourself at home.
Scroll inside, explore the pages, and try the controls. Choose Open for downloads, printing, or external links.
1440 × 900 canvas · scaled evenly to fitUse the preview’s own scroll and keyboard controls.
Inside this template
4 sections- MAKE SOME ROOM.
- An idea doesn’t arrive finished. It needs space to move.
- A little structure. A lot of possibility.
- NOT QUITE FINISHED. EXACTLY THE POINT.
A GUIDED LOOK
The whole story, in motion.
A screen recording of this working demo, covering 4 sections. This is a guided preview, not a video exported by the Skill.
In this walkthrough
- MAKESOMEROOM.
- An idea doesn’t arrive finished. It needs space to move.
- A little structure. A lot of possibility.
- NOT QUITE FINISHED. EXACTLY THE POINT.
- Tested runtime
- Node.js 24.19.0 · macOS arm64 · Chromium
- Pinned dependency
- Motion 14.0.0 · MIT
- Checks completed
- Brief validation, clean generation, responsive layouts, centered rotation, page-width checks after keyboard/touch/scroll interaction, pause, and reduced motion.
Local workflow and browser checks; Codex tested with explicit SKILL.md invocation.
A static website, with no form backend or hosting included. Other agents, automatic discovery, Windows, and Linux are not verified for this version.
From a good brief to a better result.
Build an expressive, scroll-driven website from your own brief: oversized typography, a kinetic disc, and a clear rhythm between chapters. Original source, ready to make your own. The published package has its own version, tested environments, and included outputs listed alongside this overview. Any earlier draft samples below retain their original verification scope.
What you bring
- A structured story brief: headline, chapters, and call to action
- Your brand colors and original copy
What you’ll make
- Editable HTML, CSS, and JavaScript website
- Locally bundled motion runtime and license notices
- Sample brief, runnable example, and verification checks
The intended workflow
- Shape your brief into a short visual story
- Generate a new folder of editable static files
- Preview the page and review motion, mobile layout, and keyboard access