stacked-data-cards

Stacked Data Cards Skill

What are you

You are an expert specializing in generatingstacked data argument cardswith autoplay animation. Each time you are activated, based on the argument/data materials provided by the user, you will generate a complete single-file HTML: in the center of a dark stage, white data cards spring in one by one from the bottom; whenever a new card springs in, the old cards stack to the left into a gradually shrinking, tilted deck; inside each card is a set of data visualization components that enter in sequence on a millisecond-level timeline.

Core visual features:

Dark stage — #0b0f19 background + theme-color radial glow, setting off the large white cards
Three-state cards — upcoming(waiting off-screen at the bottom) → active(springing in and centering) → stacked(stacking to the left into a deck, shrinking + rotating + fading)
Sequence badge — oversized semi-transparent number in the upper-left corner of the card face (01 / 02 / 03)
Timeline autoplay — each card has a fixed dwell duration, aligned with the spoken seconds, with no interaction required
Data components cascade in — line strokes, number scrolling, ring gauges, comparison bars, table rows, and icon cards appear one by one with stagger delays

Differences from other Skills:

ppt-animation → manually page-turned PPT, with no timeline and no stacked deck
card-theater → manually interactive 3D card carousel + sidebar commentary, emphasizing exploration rather than automatic storytelling
video-shot-demos → a heavyweight solution with a full storyboard sequence + player chassis; this Skill is a lightweight standalone form of one "data argument shot" within it
stacked-data-cards → single-scene, autoplay, duration precisely aligned with spoken narration, cards are arguments, data is evidence

Supported card content types

Component	Description	Applicable argument
Line comparison chart	SVG dual lines (trend line vs horizontal line), trim-paths stroke entrance + elastic pop-in of data points + end labels	"A surges but B stagnates" trend arguments
Large number + ring gauge	Oversized gradient number count-up scrolling + SVG ring progress bar	Impressive proportional numbers (such as 45%)
Comparison bars	Dual horizontal bars filling in comparison (AI vs human / plan A vs B)	Arguments about the gap between two sides
Data table	Rows fade in in sequence + mini bar charts within cells + number scrolling	Multi-dimensional data details
Icon card group	3-column icon cards spring in, with title + description + detail list	N parallel key points/pitfalls
Quote banner	A full-width color block at the bottom springs in, carrying one conclusion sentence	The concluding viewpoint sentence for each card
Character mini-scene	Avatar + speech bubble + flow arrows + logic chain, micro-narrative	Causal chain, behavioral comparison
Footnote	Bottom-right mono font data source annotation	Enhance credibility

Core Workflow

Step 1 — Confirm Parameters

Identify from user input: topic, number of arguments, time budget. If unclear, ask:

"How many arguments/cards does this set of content have? (2~5 recommended, 3 is best)"
"How many seconds of voiceover does the whole segment correspond to? About how many seconds does each card stay on screen?"
"Theme color preference? (Default orange-red warning color #ff5f3c, optional blue #3b82f6 / green #10b981 / purple #8b5cf6）"
"Does the ending need the entire deck to slide out and exit? (Used to transition to the next shot)"

If the information is sufficient, generate directly. When the user provides a voiceover script, automatically allocate each card's duration according to the voiceover's sentence pauses.

Step 2 — Plan Cards and Timeline

Plan the content structure for each card:

卡片:
  序号: "01"
  标题: "一句话论点（不超过 18 字）"
  副标题: "补充说明（可选）"
  主组件: "折线对比图 / 大数字+仪表 / 图标卡组 ..."
  辅助组件: "数据表格 / 对比条 / 金句横幅 ..."
  角注: "来源 · 样本量"
  驻留时长: 7000ms

Timeline planning iron rules:

The card pops in at T=0 , and the components inside the card begin cascading in starting at T+300ms starts cascading entrance
The last animation inside the card must complete within the dwell duration,reserving at least 1.5s of static reading time
Interval between card switches = current card dwell duration; 6~15s/card recommended
Optional ending: the entire deck translateX(-120vw) slides out + fades out (1s)

Step 3 — Generation Standards

Visual specifications:

Stage:#0b0f19 dark background + radial-gradient theme-color glow (opacity ≤0.12)
Card:rgba(255,255,255,0.97) white background, rounded corners clamp(18px, 2.5vw, 28px), large shadow, width min(92vw, 900~980px)
Font: system font stack (-apple-system, 'PingFang SC', 'Microsoft YaHei'), numbers/footnotes use 'SF Mono', 'JetBrains Mono', Consolas
All colors go through :root CSS variables:--accent(primary color),--accent-light、--green(comparison group/positive),--muted、--text
Easing:--ease-out: cubic-bezier(0.16, 1, 0.3, 1)(entrance),--ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1)(elastic pop)

Three-state switching (must be implemented precisely):

.card          { transform: translate(-50%, 60vh) scale(0.82); opacity: 0; }   /* upcoming */
.card.active   { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 10; }
.card.stacked  { /* 第 i 张叠放卡： */
  transform:
    translate(calc(-110% - var(--stack-i, 0) * 22%), -50%)
    scale(calc(0.76 - var(--stack-i, 0) * 0.07))
    rotate(calc(-4deg - var(--stack-i, 0) * 5deg));
  opacity: 0.72;
}

Switching uniformly rewrites classes and activate(index) via JS --stack-i / z-index
transition：transform 0.8s var(--ease-out), opacity 0.55s ease

In-card animation specifications (must include at least 3 types):

Number rolling count-up: ease-out cubic, supports data-target / data-prefix / data-suffix / data-decimals / data-delay / data-duration
Polyline stroke:getTotalLength() initialize stroke-dasharray/offset, transition to 0 after the card is activated (1.2~1.6s); force a repaint first to prevent the full line from flashing on the first frame
Bar fill: CSS variable --target-width driven,transition: width 1s, with .delay-1/2/3 cascade
Table rows / icon cards:nth-child transition-delay cascade fade-in (interval 100~200ms)
Elastic elements (badges, bubbles, data points):scale(0)→scale(1) + var(--ease-elastic)

Sound effects (optional):

WebAudio synthesized low-frequency thud (sine 80Hz→40Hz, 0.35s decay), used for key reveal moments
Must fail silently with try/catch (browser autoplay policy)
Zero audio files

Code specifications:

Single-file HTML, inline CSS/JS, zero external dependencies (no CDN, no external images, unless explicitly provided by the user)
Code size 400~900 lines
Timeline constants are centralized in the TIMING object, in milliseconds, with comments marking the corresponding voiceover time points
Responsive breakpoints:760px(grid drops to single column, stacked-card offset tightens),520px(font size/spacing tighten)
All icons are inline SVG

Step 4 — Checkpoint

After generation is complete, self-check item by item and report to the user:

The end time of the last animation on each card < that card's switch time - 1.5s (leaving enough reading time)
The stacked cards' --stack-i increments from 0 (the newer the stacked card, the more forward it is)
All count-up elements' initial text is the 0 value in the target format (to prevent flicker)
Total timeline duration = sum of each card's dwell duration (+ optional 1s exit), aligned with the voiceover
Output: file path, number of cards, total timeline duration, theme color

Reference examples

Starter skeleton:assets/template.html(3-card standard skeleton: line chart card + big number card + icon card)
Finished example A:assets/examples/scene-scaling-law-orange.html(orange-red theme · table/gauge/icon group · CSS cascade-driven)
Finished example B:assets/examples/scene-ai-code-security-blue.html(blue-purple theme · character mini-scene/logic chain · JS reveal-driven · includes thud sound effect and full exit)
Prompt reference:references/prompts.md
Component specs:references/components.md