Conductor Motion
Generate the mid-layer animation patterns that make product marketing sites feel alive — typewriter simulations, progress bar choreography, staggered content reveals, Lottie sequencing, and scroll-driven animation compositions. These patterns simulate live software through animation alone.
Deconstructed from ConductorAI.com (Webflow, GSAP 3.15, Lottie, vanilla JS).
Quick Start
# Typewriter hero with word cycling
python3 scripts/conductor_motion_generator.py --mode typewriter \
--base-text "Accelerating" \
--words "complex approvals,investigations,e-discovery,FOIA review" \
--output typewriter.html
# Progress bar simulation
python3 scripts/conductor_motion_generator.py --mode progress \
--title "search initialization" --doc-count 1324 \
--rows "QUERY_RECEIVED,INPUT,ELECTRONIC SIGNATURE,JURISDICTION" \
--output progress.html
# File review state machine
python3 scripts/conductor_motion_generator.py --mode file-review \
--files "Report_Q4.xlsx,Contract_Draft.pdf,Audit_Log.csv" \
--output file-review.html
# Full landing page with all patterns
python3 scripts/conductor_motion_generator.py --mode full-page \
--output landing.html
# Effects catalog (all modes demonstrated)
python3 scripts/conductor_motion_generator.py --mode catalog --output catalog.html
Or let Claude generate directly from the templates and references.
Motion Interview
When invoked without --mode, the skill runs a brief motion interview:
- Content type — What are you animating? (hero section, product demo, status dashboard, landing page)
- Pacing — What tempo? (slow/deliberate, medium/professional, fast/urgent)
- Patterns — Which effects? (typewriter, progress, file-review, stagger, terminal, lottie, or all)
- Color scheme — Dark or light background?
- Design tokens — Use existing
DESIGN.md/.design-context.md, or defaults?
Output: .motion-context.md consumed by generation phase.
If .design-context.md exists with MOTION_INTENSITY dial set, skip the pacing question and derive from that value:
- MOTION_INTENSITY 1-3 → slow
- MOTION_INTENSITY 4-6 → medium
- MOTION_INTENSITY 7-10 → fast
Modes
| Mode | Template | Patterns Composed |
|---|---|---|
typewriter | assets/templates/typewriter.html | Hero rotator + type-on + blinking cursor |
progress | assets/templates/progress.html | Progress bar + counter + dot-leaders + processing dots + staggered rows |
file-review | assets/templates/file-review.html | File list + state machine (unreviewed→processing→reviewed) + status indicators |
stagger-reveal | assets/templates/stagger-reveal.html | Hero cascade + section reveals + IntersectionObserver scroll triggers |
terminal | assets/templates/terminal.html | Timestamps + status typing + search result counters + progress sync |
lottie-compose | assets/templates/lottie-compose.html | Lottie player + responsive variants + scroll-synced playback |
full-page | assets/templates/full-page.html | All patterns composed into a coherent landing section |
catalog | assets/templates/catalog.html | Visual reference with live demos of each pattern |
Color System
All effects read from --cm-* CSS custom properties. Override at :root to re-theme. Default: dark scheme with #4F7BF7 brand accent. Light scheme swaps bg/text polarity.
Full token reference (dark, light, easing, timing): references/design-tokens.md
Composition Parameters
| Parameter | Range | Default | Effect |
|---|---|---|---|
--pacing | slow | medium | fast | medium | Speed multiplier: slow=1.5x duration, fast=0.6x |
--stagger | 100–400 | 200 | Milliseconds between sequential reveals |
--typing-speed | 20–80 | 45 | Base ms per character typed |
--typing-variance | 0–40 | 18 | Random variance added to typing speed |
--easing | cubic | quart | linear | cubic | Primary easing: easeOutCubic, easeOutQuart, or linear |
--progress-duration | 2000–10000 | 6000 | Total progress animation ms |
--hold-duration | 500–3000 | 1100 | Ms to hold typed word before deleting |
--color-scheme | dark | light | dark | Background/foreground polarity |
--font | font name | Geist | Primary font (loaded via Google Fonts CDN) |
--accent | hex color | #4F7BF7 | Override --cm-brand |
--lottie-cdn | boolean | false | Include Lottie player CDN (lottie-compose mode only) |
Content Parameters (per mode)
typewriter: --base-text, --words (comma-separated), --cursor (char, default |), --loop (boolean)
progress: --title, --doc-count, --rows (comma-separated labels), --start-percent (default 5)
file-review: --files (comma-separated filenames with extensions), --review-speed (ms per file)
stagger-reveal: --items (comma-separated selectors or text blocks), --direction (up|down|left|right)
terminal: --status-items (comma-separated), --result-count, --result-label, --timestamps (boolean)
lottie-compose: --lottie-src (URL to .json), --lottie-loop, --lottie-autoplay, --responsive (boolean)
Architecture
┌──────────────────────┐
│ .design-context.md │ ← from /shape (optional)
│ DESIGN.md tokens │ ← from /design-md (optional)
└──────────┬───────────┘
│
┌──────────▼───────────┐
│ Motion Interview │ ← asks pacing, patterns, content
│ (skip if --mode set) │
└──────────┬───────────┘
│
┌──────────▼───────────┐
│ .motion-context.md │ ← pacing, patterns, content data
└──────────┬───────────┘
│
┌─────────────────┼─────────────────┐
▼ ▼ ▼
┌────────────┐ ┌────────────┐ ┌────────────────┐
│ Template │ │ Token │ │ Content │
│ Selection │ │ Application│ │ Injection │
│ (mode→html) │ │ (--cm-*) │ │ (user data) │
└──────┬─────┘ └─────┬──────┘ └───────┬────────┘
│ │ │
└────────────────┼────────────────────┘
▼
┌──────────────────────┐
│ Single-file HTML │
│ (inline CSS + JS) │
│ CDN: fonts only │
│ (+ Lottie if needed)│
└──────────────────────┘
Animation Engine Internals
Easing functions, timing constants per mode, and pacing multiplier tables: references/design-tokens.md
Key: easeOutCubic (t => 1 - Math.pow(1-t, 3)) is the default. Pacing multiplier scales all durations — slow=1.5×, medium=1.0×, fast=0.6×. Stagger delays scale at 0.8× the multiplier.
Gotchas (What Claude Gets Wrong Without This Skill)
- Reaches for GSAP or Framer Motion. These patterns are vanilla JS — no framework needed. GSAP adds 30KB for effects achievable with
requestAnimationFrameand CSS transitions. - Uses
transition: allfor reveals. Triggers layout on every property. Explicitly listopacityandtransformonly. - Forgets
prefers-reduced-motion. Every single effect must show its final state immediately under reduced motion. Claude skips this ~60% of the time. - Uses
Date.now()in animation loops. Not monotonic, drifts on clock sync. Must useperformance.now(). - Hardcodes colors instead of CSS custom properties. Makes re-theming impossible. All colors must go through
--cm-*tokens. - Leaves
will-changeon permanently. Reserves GPU memory for the life of the element. Add before an