Narrative Deck – AI Agent skill for creating interactive web stories

Install 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.

Fifteen 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.

Replay beat tour

Walks all nine positions in narrative order

Effect 01

Elements 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.

Replay reveal

Resets opacity + transform, then re-triggers

Effect 02

A 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.

Replay map tour

Cycles through the sticky map states

Effect 03

Detail lives one gesture away. Hover reveals hidden content without cluttering the default view.

Replay growth

Drops bars to zero, re-staggers upward

Effect 04

Drag across the blank half of the chart to predict the trend. Release, then reveal the truth.

Replay / clear guess

Clears your line and the revealed answer

Effect 05

Orbs with a simple physics simulation respond to the cursor. The same engine can push body text aside in magazine-style layouts.

Reseed field

Randomises positions, velocities and hues

Effect 06

Pins teach the reader how to look. The timeline slider replays the decisive seconds.

Replay timeline

Animates the scrubber 0 → 100 automatically

Effect 07

Characters animate in sequence; a key phrase fills with colour as it scrolls into view.

The strongest sentence gets a colour wipe instead of bold — slower, and therefore noticed.

Replay type & wipe

Re-runs the per-character stagger and the wipe

Effect 08

Six layers translate at different rates against the scroll. Distant layers barely move; near layers move most, which the brain reads as physical depth.

Replay parallax sweep

Drives layers through a full −1 → +1 cycle without scrolling

Effect 09

A 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.

Three districts reported sharply different outcomes. Northfield recovered fastest, while Lakeside stalled by midyear. Eastgate never regained its baseline at all.

Replay colour introduction

Re-teaches each entity colour in narrative order

Effect 10

Twelve statements, one tap each. Lowering the cost of a single interaction is what lets you raise the number of interactions.

Restart quiz

Clears all answers and returns to question one

Effect 11

One continuous action, decomposed into five inspectable phases. The reader can watch it run, or stop and interrogate any single stage.

Replay full turn

Resets to phase one and plays all five stages

Effect 12

A 3D object you inspect by tilting your phone or dragging on desktop. Annotation hotspots surface context when you rotate the artifact to face them.

Replay orbit tour

Auto-rotates through all three annotation points

Effect 13

A draggable divider between two states of the same scene. The reader performs the comparison rather than being told the conclusion.

Replay sweep

Auto-wipes the divider across the full frame

Effect 14

A scrubable waveform bound to a transcript. Clicking any line jumps the playhead; the active line highlights as it plays.

Replay from start

Rewinds the playhead and resumes playback

Effect 15

The 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.

Replay profile sweep

Cycles three archetypes: casual, regular, loyalist

Global