# One-shot Data Story Prompt

## Project

- Project name: `crest-alpha-origin`
- Route: `/data-story/`
- Intended public URL: `https://crest-alpha-origin.pages.dev/data-story/`
- Route skill: `oneshot-data-story`

## User brief

Build a scrollytelling data explainer with charts, scenes, and narrative pacing. Apply editorial calm plus expressive showcase only where it clarifies sequence. Use realistic benchmark data, restrained chart colour, scroll-triggered reveals, a responsive reading measure, and a reduced-motion fallback. Keep the route distinct and polished. Do not use external images. Do not deploy.

## Story direction

Create a single-file scrollytelling explainer titled **One current, many consequences**. The piece should follow an illustrative but realistic shipping-resilience story modelled on 2019-2025 freight disruption patterns. Treat the numbers as benchmark data for the demo rather than as live cited reporting. The story should feel like a magazine-quality explainer: calm, analytical, and sequential, with a sticky visual stage that changes as the narrative advances.

## Section outline

1. **Opening scene**: frame the system problem with a corridor map and three orientation metrics.
2. **Shock profile**: show how freight cost and schedule reliability moved out of sync.
3. **Port drag**: show where congestion accumulated once ships reached port.
4. **Reroute trade-off**: explain the exchange between resilience, lead times, and operating cost.
5. **Sector exposure**: compare which categories absorb disruption fastest and which can wait it out.
6. **Resilience playbook**: close with a practical synthesis of what a sturdier network looks like.

## Chart plan

- Chokepoint network diagram for the opening scene
- Dual-line chart for freight rate index versus on-time arrivals
- Dumbbell or lollipop chart for regional port turnaround days
- Combined bar and line view for rerouted volume and inventory cover
- Compact heatmap matrix for sector exposure and pass-through lag
- Closing capability comparison bars for the resilience playbook

## Interaction model

- Sticky visual stage on desktop, stacked stage on small screens
- Scroll-driven scene activation with chapter map buttons
- Persist the last active chapter in `localStorage`
- Persist annotation/detail density in `localStorage`
- Keyboard navigation with arrow keys, `Home`, and `End`
- Reduced-motion mode that removes animated transitions and smooth scrolling

## Visual direction

- Editorial warm-neutral page with restrained teal, rust, slate, and sand accents
- Strong typographic hierarchy, but no decorative excess that competes with the evidence
- Light scene transitions, soft depth, and clear annotation cards
- Responsive measure optimised for reading first, spectacle second
- No external images; build all visuals with HTML, CSS, SVG, and inline JavaScript