Animation Foundry

Entrance Animations

One-shot animations that play when the element scrolls into view. Re-trigger by scrolling away and back.

`data-appear="N"`

Stagger fade-up

Best for: Progressive reveals, step-by-step content, labels, text blocks

data-appear="1" through "6" — staggered fade-in from below

Usage snippet

<g data-appear="1">...</g>
<g data-appear="2">...</g>
<g data-appear="3">...</g>

`data-scale-in="N"`

Bouncy scale-up

Best for: Cards, icons, stat counters, impact visualizations

Bouncy scale-up with overshoot cubic-bezier

Usage snippet

<g data-scale-in="1">
  <circle cx="50" cy="50" r="35" />
</g>

`data-slide-left="N"`

Slide from right

Best for: Timeline entries, pipeline stages, list reveals

Step 1 → Load data into memory

Step 2 → Compute attention scores

Step 3 → Write results back

✓ Done — output ready

Elements slide in from the right staggered

`data-slide-right="N"`

Slide from left

Best for: Comparison items, before/after, opposing direction to slide-left

Before → Slow & wasteful

After → Fast & efficient

Elements slide in from the left staggered

`data-morph`

Elastic morph

Best for: Hero elements, key insights, attention-grabbing reveals

Elastic morph entrance — overshoots then settles

`data-shake`

Attention shake

Best for: Warnings, errors, "wrong answer" feedback, emphasis

Fades in then shakes — grabs attention

Continuous Animations

Loop infinitely while in the viewport. Stop when scrolled away.

`data-pulse`

Pulsing glow

Best for: Active elements, "currently processing" indicators, key metrics

Gentle pulsing glow with drop-shadow

`data-highlight-loop`

Cycling highlight

Best for: Active grid cells, focus areas, "currently selected" indicators

Cycling highlight with box-shadow glow

`data-float`

Gentle float

Best for: Cloud elements, floating labels, decorative accents

Gentle vertical floating motion

`data-spin`

Slow rotation

Best for: Gears, loading indicators, processing states

Continuous slow rotation (4s per revolution)

`data-flow`

Flowing dashes

Best for: Data movement, connections between nodes, pipelines

Animated dashed lines showing data flow

`data-packet="N"`

Moving packets

Best for: Data transfer, streaming, packet visualization

Animated data packets moving down a pipe

SVG Path Animations

Animate SVG path and line elements using stroke-dashoffset.

`data-draw`

Path draw-in

Best for: Architectural diagrams, connecting lines, graph edges

SVG path draws itself in over 1.5s

`data-trace`

Glowing trace

Best for: Emphasis paths, circuit traces, neural pathways

Path traces with a glowing drop-shadow effect

`data-typewriter`

Typing effect

Best for: Code reveals, terminal output, AI-generated text feel

$ flash_attention --seq-len 8192 --tiling ✓

Text types in character by character with blinking caret

FlowDiagram Component

Higher-level declarative component — pass boxes[] and arrows[] and get a full animated data-flow diagram.

`<FlowDiagram />`

Declarative flows

Best for: Data flow, architecture, before/after comparisons, GPU memory diagrams

Declarative: just define boxes and arrows

Usage snippet

<FlowDiagram
  id="my-flow"
  boxes={[
    { id: "a", x: 20, y: 20, w: 120, h: 50, label: "Box A", style: "accent" },
    { id: "b", x: 200, y: 20, w: 120, h: 50, label: "Box B", style: "success" },
  ]}
  arrows={[
    { from: "a", to: "b", label: "flow", animated: true },
  ]}
/>

ScrollScene Component

Scroll-triggered animated section wrapper. Reveals content with configurable animation as the user scrolls into view.

`<ScrollScene />`

Scroll trigger

Best for: Article sections, progressive content reveals, scroll-driven storytelling

fade-up + stagger

This content fades up as you scroll into view. Child elements stagger 100ms apart.

Step 1 Step 2 Step 3

scale-in variant

Scales from 0.9 → 1 with opacity

Usage snippet

<ScrollScene animation="fade-up" stagger={true}>
  <h2>Section Title</h2>
  <p>Content appears as you scroll...</p>
</ScrollScene>

<!-- Variants: fade-up, fade-left, fade-right, scale-in, blur-in -->

QuizCheck Component

Inline knowledge check that gates scroll progress. Converts passive reading into active learning.

`<QuizCheck />`

Interactive quiz

Best for: Knowledge checks, content gating, engagement, active recall

↑ Answer the question above to continue ↑

What animation library does Unfoldex use for scroll-driven reveals?

Usage snippet

<QuizCheck
  question="Your question here?"
  options={["Option A", "Option B", "Option C", "Option D"]}
  correct={1}
  explanation="Shown on correct answer."
  hint="Shown on wrong answer."
  difficulty="checkpoint"
/>

MathStep Component

Progressive equation/derivation reveal. Shows steps one at a time with explanations.

`<MathStep />`

Math derivation

Best for: Algorithm complexity analysis, mathematical derivations, step-by-step proofs

Big-O simplification example

1

T(n) = 3n² + 5n + 100

Start with the full expression

2

T(n) ≈ 3n² (drop lower-order terms)

5n and 100 become negligible as n grows

3

T(n) = O(n²) (drop constant factor)

The constant 3× doesn't affect growth rate classification

Usage snippet

<MathStep
  title="Derivation title"
  steps={[
    { equation: "Step 1 equation", explanation: "Why this step" },
    { equation: "Step 2 equation", explanation: "Next step", highlight: true },
  ]}
/>

Callout Component

Highlighted aside boxes for tips, warnings, insights, analogies, and TL;DRs.

`<Callout />`

5 variants

Best for: Key takeaways, warnings, analogies, tips, summary blocks

Usage snippet

<Callout type="insight" title="Key Insight">
  Your insight content here.
</Callout>

<!-- Types: insight, warning, tip, analogy, tldr -->

InteractivePlot Component

Fully interactive SVG visualization with sliders, tooltips, and live updates.

`<InteractivePlot />`

Interactive viz

Best for: Linear regression visualizations, gradient descent animations, parameter exploration

Adjust slope & intercept to minimize error — interactive linear regression

Usage snippet

<InteractivePlot
  id="my-plot"
  type="linear-regression"
  caption="Interactive linear regression"
/>

<!-- Types: linear-regression, gradient-descent -->

Reusable CSS Classes

Pre-styled SVG nodes, labels, and arrows for consistent diagramming.

Node & Label Classes

CSS utility

Combine .diag-node, .diag-label, and .diag-arrow classes

Available classes

.diag-node              — Base node (card bg, line stroke, rx:8)
.diag-node--accent      — Accent stroke
.diag-node--error       — Error stroke
.diag-node--success     — Success stroke
.diag-label             — Centered bold label
.diag-label--sm         — Small muted label
.diag-label--accent     — Accent color label
.diag-label--error      — Error color label
.diag-arrow             — Basic arrow line
.diag-arrow--accent     — Accent arrow
.diag-arrow--error      — Error arrow

📋 Quick Reference

🎬 Entrance Animations

Attribute	Values	Best For
`data-appear`	"1"–"8"	Sequential reveals
`data-scale-in`	"1"–"6"	Bouncy card reveals
`data-slide-left`	"1"–"6"	Timeline / pipeline
`data-slide-right`	"1"–"6"	Opposing direction
`data-morph`	boolean	Hero / key insight
`data-shake`	boolean	Warnings / errors

🔄 Looping Animations

Attribute	Values	Best For
`data-pulse`	boolean	Active indicators
`data-highlight-loop`	boolean	Focus selection
`data-float`	boolean	Decorative floating
`data-spin`	boolean	Gears / loaders
`data-flow`	boolean	Data flow lines
`data-packet`	"1"–"3"	Moving data packets

✏️ SVG & Text

Attribute	Values	Best For
`data-draw`	boolean	Path reveals
`data-trace`	boolean	Glowing traces
`data-typewriter`	boolean	Terminal output

🛠️ How to Add New Animations

Define the CSS in AnimatedDiagram.astro
Add a hidden-by-default state and an .is-visible animation:

/* Hidden by default */
.animated-diagram :global([data-my-anim]) {
  opacity: 0;
}

/* Animate when scrolled into view */
.animated-diagram.is-visible :global([data-my-anim]) {
  animation: my-anim 0.6s ease forwards;
}

@keyframes my-anim {
  from { opacity: 0; /* start state */ }
  to { opacity: 1; /* end state */ }
}

Add stagger support (optional)
For staggered variants, add ="N" with animation-delay rules.
Add a demo to this showcase page
Create a new .showcase__card block with a live <AnimatedDiagram>.
Document in the JSDoc
Add a line to the interface Props comment block at the top of AnimatedDiagram.astro.