Add web animation and interactions with the Motion node

Apply GSAP timelines, scroll effects, hover/click behavior, and interaction choreography to an upstream live website draft.

Where: Flowgen → Add → Generate → Website → Motion

Key ideas

Focused motion pass: Motion changes choreography and interaction behavior while inheriting the upstream draft’s markup, CSS, content, and code.
Supported directions: Describe triggers, exact targets, from/to states, timing/easing, stagger, replay/reverse, responsive behavior, and reduced-motion expectations.
Live handoff: The revised draft continues through draft_out so Code or an editor-backed node can refine it without losing the animation contract.
Web Motion Gen card: WebMotionNode uses the authored shared-card path. Add GSAP motion/interactions to a live web draft while preserving its other layers.
Properties sidebar: WebNodePanel.tsx
Opened surfaces: Full-page preview; reasoning

Connect HTML/Section draft_out to Motion draft_in.
Describe the trigger, target/scope, action, timing/easing, replay behavior, and mobile/reduced-motion fallback.
Run and preview each interaction from its real trigger—not only at the final state.
Connect Motion draft_out to Code, Section, or Document Editor and verify the behavior again after downstream changes.

Prompt, Skill, Reference, Assets, Draft, Design System, and Review inputs.
Motion target/metrics, model, media, lost-target/run report, review, and versions in WebNodePanel.
gsap_out is the motion layer; draft_out preserves the complete authoring state.

Open full-page preview and reasoning. There is no direct code editor on this node.

Add path: Flowgen → Add → Website → Web Motion Gen.
Card: WebMotionNode.
Properties: WebNodePanel.tsx.
Controls: Prompt; Skill; Reference; Assets; Draft; Design System; Review; targets/metrics/run report/versions.
Opened surfaces: Full-page preview; reasoning.

Name a class/selector or selected element when scope matters.
Prefer transform/opacity motion and provide reduced-motion behavior for large or scroll-linked effects.

Tighten the target to an explicit class/selector or parent-children relationship and rerun the Motion stage.