conductor-motion

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

| 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)

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