{"slug": "narrative-deck-ai-agent-skill-for-creating-interactive-web-stories", "title": "Narrative Deck – AI Agent skill for creating interactive web stories", "summary": "Developer aakatheeri released Narrative Deck, an AI agent skill installable via `npx skills add aakatheeri/narrative-deck`, that guides an assistant to build dependency-free interactive web stories using a nine-beat structural sequence and 15 scroll-driven effects. The skill instructs agents to pick story beats, place effects sparingly, and keep pages free of dependencies, with a fallback of copying the repo's `skill/` folder into an assistant's skills or project-context location for tools that don't support the installer.", "body_md": "For AI-assisted makers\n\n## Use this as a skill, not just a demo\n\nInstall the Narrative Deck skill in your AI assistant, then ask it to use `narrative-deck` before building. The skill helps your agent choose the right story beats, place effects with restraint, and keep the page dependency-free.\n\n**Start here:** Use\n\n`npx skills add aakatheeri/narrative-deck` for supported agents. If your assistant does not support the installer, copy this repo’s `skill/` folder into the skills, rules, or project-context location your tool uses. See the [GitHub README](https://github.com/aakatheeri/narrative-deck)for install notes. Then prompt: “Use the narrative-deck skill to turn this material into a nine-beat interactive article.”\n\nBefore the effects\n\n## The Structural Frame\n\nFifteen techniques are useless without a skeleton to hang them on. This is the beat sequence underneath a premium article — nine positions, each with a job. Click any beat to see what belongs there and which effects serve it.\n\n**Why this comes first:** A hook's authority ends the moment it opens the loop. Everything after that is structure. Most web writing fails not at the opener but at beat four, where the reader's initial curiosity has been spent and nothing has replaced it.\n\n### —\n\n—\n\n**Principle:**—\n\nEffect 01\n\n## Scroll-Triggered Reveal\n\nElements stay invisible until they enter the viewport, then fade and rise into place. An `IntersectionObserver` watches each block and adds a class — no scroll listener, no jank.\n\n**Why it hooks:** Movement at the edge of vision triggers an orienting response. The reader's scroll\n\n*caused*the reveal, creating a reward loop that pulls the thumb down again.\n\n**Panel one** arrives first.\n\n**Panel two** follows at 180 ms.\n\n**Panel three** closes the sequence.\n\nEffect 02\n\n## Sticky Scrollytelling\n\nA city map pins to the viewport while text panels scroll past it. Each panel pans, zooms, or labels the same map — the scroll becomes a guided investigation.\n\n**Why it hooks:** The reader keeps one visual model in memory while each step adds meaning: first location, then focus, then evidence.\n\n**Step 01 — Whole city** Start wide so the reader understands the shape of the place.\n\n**Step 02 — Neighborhood** The map moves toward the station where the story begins.\n\n**Step 03 — Impact zone** A red zone appears around the streets with repeated delays.\n\n**Step 04 — Evidence** The final label connects the hotspot to reported disruption.\n\nEffect 03\n\n## Hover Disclosure\n\nDetail lives one gesture away. Hover reveals hidden content without cluttering the default view.\n\n**Why it hooks:** Curiosity is rewarded on demand. Density rises only for readers who want it.\n\nEffect 04\n\n## “You Draw It” Canvas\n\nDrag across the blank half of the chart to predict the trend. Release, then reveal the truth.\n\n**Why it hooks:** Commitment bias plus the generation effect. Once you've drawn a guess you have stakes, and the reveal lands emotionally.\n\nEffect 05\n\n## Physics Field (Canvas)\n\nOrbs with a simple physics simulation respond to the cursor. The same engine can push body text aside in magazine-style layouts.\n\n**Why it hooks:** Responsiveness implies aliveness. A surface that reacts feels authored for you specifically.\n\nEffect 06\n\n## Forensic Annotation & Scrubber\n\nPins teach the reader *how to look*. The timeline slider replays the decisive seconds.\n\n**Why it hooks:** Detective structure. The reader becomes co-investigator; the conclusion is withheld until evidence is assembled.\n\nEffect 07\n\n## Kinetic Type & Highlight Wipe\n\nCharacters animate in sequence; a key phrase fills with colour as it scrolls into view.\n\n**Why it hooks:** Typography stops being a container and becomes an actor. The eye follows motion before it reads meaning.\n\nAttention is earned per scroll.\n\nThe strongest sentence gets a colour wipe instead of bold — slower, and therefore noticed.\n\nEffect 08\n\n## Parallax Depth\n\nSix layers translate at different rates against the scroll. Distant layers barely move; near layers move most, which the brain reads as physical depth.\n\n**Why it hooks:** Implied depth signals production value within the first second, justifying the reader's time investment before a word is read.\n\n**Six layers, six speeds**\n\n*Depth 0.05 → 0.95*\n\n`0px` · scroll progress `0%`\nEffect 09\n\n## Color-Threaded Entities\n\nA colour introduced in prose reappears in every chart, map and timeline that follows. The reader builds a private visual vocabulary and never needs a legend.\n\n**Why it hooks:** Each recurrence produces a small recognition reward. The technique operates continuously rather than as discrete moments of spectacle, which is what makes a page\n\n*feel*authored.\n\nThree districts reported sharply different outcomes. Northfield recovered fastest, while Lakeside stalled by midyear. Eastgate never regained its baseline at all.\n\nEffect 10\n\n## Binary Quiz Accumulator\n\nTwelve statements, one tap each. Lowering the cost of a single interaction is what lets you raise the *number* of interactions.\n\n**Why it hooks:** Sunk-cost accumulation. By the fifth answer the reader has invested enough to want the result, and the progress bar makes that investment visible.\n\n—\n\nEffect 11\n\n## Turn-by-Turn Procedural Graphic\n\nOne continuous action, decomposed into five inspectable phases. The reader can watch it run, or stop and interrogate any single stage.\n\n**Why it hooks:** Expertise is invisible at full speed. Slowing a motion down and labelling its parts converts a spectator into someone who can\n\n*see*what the athlete is doing — a genuine transfer of knowledge, not just spectacle.\n\nEffect 12\n\n## AR Placeholder — Spatial Artifact Viewer\n\nA 3D object you inspect by tilting your phone or dragging on desktop. Annotation hotspots surface context when you rotate the artifact to face them.\n\n**Why it hooks:** Embodiment. Scale and form become\n\n*felt*rather than described — the reader's own movement does the explaining, which is the mechanism real AR exploits.\n\nEffect 13\n\n## Before / After Comparison\n\nA draggable divider between two states of the same scene. The reader performs the comparison rather than being told the conclusion.\n\n**Why it hooks:** Change is hard to perceive from two images side by side, but trivial when they occupy the same pixels. The reader's hand does the analysis.\n\n**—**\n\nEffect 14\n\n## Audio Waveform & Transcript Sync\n\nA scrubable waveform bound to a transcript. Clicking any line jumps the playhead; the active line highlights as it plays.\n\n**Why it hooks:** It makes audio skimmable. Readers who would never sit through eight minutes will happily jump to the sentence that interests them — and often stay.\n\nEffect 15\n\n## Dynamic Paywall Simulator\n\nThe most consequential storytelling effect is invisible: a model deciding *where* in your reading journey the narrative gets interrupted. Adjust the reader profile and watch the meter move.\n\n**Why it hooks:** Making a hidden system inspectable is itself a story. The reader discovers the cut point is a tuned variable, not a fixed rule.\n\n**8**\n\n**—**\n\n**—**\n\n—\n\nGlobal", "url": "https://wpnews.pro/news/narrative-deck-ai-agent-skill-for-creating-interactive-web-stories", "canonical_source": "https://aakatheeri.github.io/narrative-deck/", "published_at": "2026-10-23 22:18:39+00:00", "updated_at": "2026-10-23 22:42:49.264396+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools"], "entities": ["Narrative Deck", "aakatheeri", "GitHub"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/narrative-deck-ai-agent-skill-for-creating-interactive-web-stories", "markdown": "https://wpnews.pro/news/narrative-deck-ai-agent-skill-for-creating-interactive-web-stories.md", "text": "https://wpnews.pro/news/narrative-deck-ai-agent-skill-for-creating-interactive-web-stories.txt", "jsonld": "https://wpnews.pro/news/narrative-deck-ai-agent-skill-for-creating-interactive-web-stories.jsonld"}}