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:

1. Content type — What are you animating? (hero section, product demo, status dashboard, landing page)
2. Pacing — What tempo? (slow/deliberate, medium/professional, fast/urgent)
3. Patterns — Which effects? (typewriter, progress, file-review, stagger, terminal, lottie, or all)
4. Color scheme — Dark or light background?
5. 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

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

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)

1. Reaches for GSAP or Framer Motion. These patterns are vanilla JS — no framework needed. GSAP adds 30KB for effects achievable with requestAnimationFrame and CSS transitions.
2. Uses transition: all for reveals. Triggers layout on every property. Explicitly list opacity and transform only.
3. Forgets prefers-reduced-motion. Every single effect must show its final state immediately under reduced motion. Claude skips this ~60% of the time.
4. Uses Date.now() in animation loops. Not monotonic, drifts on clock sync. Must use performance.now().
5. Hardcodes colors instead of CSS custom properties. Makes re-theming impossible. All colors must go through --cm-* tokens.
6. Leaves will-change on permanently. Reserves GPU memory for the life of the element. Add before an