Chat

    Motion and Interaction Design with AI

    A long-running Codex design and implementation task that exposed both the promise and the failure modes of delegating complex GSAP motion to frontier AI models: early code-complete concepts repeatedly missed basic spatial intent, while source-image tracing, real-browser frame capture, and 101-frame contact sheets created a much more reliable visual feedback loop.

    Highlights

    • The first motion passes were technically valid but visually weak: added elements were not requested, line and text behaved as separate layers, and several concepts passed focused tests while still being rejected in the browser.
    • The Motion Design Director plugin helped articulate intent, restraint, continuity, reduced-motion behavior, and rendered-QA requirements, but its presence did not make the model reliably good at basic GSAP choreography without iterative visual correction.
    • Progress accelerated after the work was narrowed to executable mechanics, the page copy and structure were locked, and motion concepts were treated as reviewable hypotheses rather than finished design.
    • A settled headless contact sheet proved misleading because its viewport, programmatic scroll jumps, and settle delay did not match the live in-app browser; the task explicitly replaced that evidence with actual-browser captures using real incremental wheel input.
    • Frame-by-frame contact sheets became the strongest review artifact: they exposed detached curve fragments, wrong draw order, discontinuities, first-paint flashes, browser rasterization differences, and the exact frames where line-to-word choreography failed.
    • The final workflow combined a traced source image, deterministic connected-path disclosure, browser- and DPR-aware capture, cross-engine comparison, and repeated 101-frame audits before the selected motion was promoted to the homepage.

    Source conversation

    Chat Transcript
    Private

    This transcript is not public. You can request access below; requests are reviewed before anything is shared.

    Actions and follow-ups

    Actions Taken

    • Duplicated and repeatedly rebuilt the Period Line experience in an isolated route and branch.
    • Consulted Motion Design Director and official GSAP guidance for intent, timing, ScrollTrigger, React cleanup, performance, and reduced-motion behavior.
    • Locked copy and page structure after early concepts drifted from the request.
    • Generated motion concepts, evaluated them in the browser, preserved checkpoints, and restarted when the choreography was not credible.
    • Replaced misleading settled headless evidence with real-browser frame sequences and cross-browser/DPR comparisons.
    • Traced the approved loop from source imagery, corrected path continuity and draw order, tested first-paint readiness, and promoted the approved result only after rendered verification.

    Actions Outstanding

    • Turn the successful review pattern into a reusable motion-QA protocol: capture actual browser state, record viewport/DPR/input/settle conditions, generate a full sequence sheet, and require explicit visual signoff for timing-sensitive work.
    • Continue treating Motion Design Director as useful scaffolding rather than evidence that an AI-generated animation is good by default.
    • Re-evaluate future motion work against live user-observed frames whenever automated screenshots and the real browser disagree.

    Source extracts

    “
    First-pass failure
    it just isnt right... i dont understand why you are so bad at this.
    “
    Motion must be reviewable
    the concepts should show the motion not be static.
    “
    Preferred review artifact
    show me a contact sheet
    “
    Contact-sheet truth
    ok the contact sheet does not represent the real truth of the page. and also, the line is not the way it should look.

    Decisions

    • Treat Motion Design Director as a taste and critique layer and the bundled GSAP skills as an API-correctness layer; neither replaces rendered visual judgment.
    • When a motion direction repeatedly fails, preserve the last recoverable checkpoint, lock the content and structure, and restart from concepts the implementation can actually execute.
    • Do not accept passing tests, a successful build, or a clean console as proof that motion works; inspect the real rendered sequence at desktop, mobile, reduced motion, and relevant browser engines.
    • Use frame-by-frame contact sheets as first-class motion evidence, with the exact browser, viewport, DPR, input method, scroll checkpoints, and settle behavior recorded.
    • If headless evidence conflicts with the user's live browser, treat the discrepancy as a test-harness problem until the actual browser state is reproduced and explained.
    • For complex line choreography, derive geometry from the approved visual source and reveal a connected path prefix instead of asking the model to approximate the shape from prose.