Communitygithub.com

AlessandroFare/fluxychat

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

Was ist fluxychat?

fluxychat is a Cursor agent skill that gATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar].

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/AlessandroFare/fluxychat/tree/HEAD/.agents/skills/motion-doctrine

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Motion Doctrine (Gateway)

Read this before composing any animation. It decides WHAT happens at every seam and how every scene performs; the technique skills implement it. These rules supersede generic / upstream motion guidance. The failure this prevents: scenes authored in isolation — the eye's momentum dies at every cut, and scenes wobble in place between entry and exit.

Route map

Decision (this skill)Implementation skill
Seam transition choice + parameters + codecut-the-curve §1–5 (the catalog)
Text / element entry cascadescut-the-curve §6 (waterfall entry)
In-scene group repositioning (no cut)cut-the-curve §7 (nudge curve)
Cursor-led action / scene kickoff / morph ignitionoversized-cursor
Seam render mechanics / white-flash guardseam-craft
Product-launch / explainer / caption workoverlays text-beat-economics, brand-faithful, captions-overlay on top of the upstream skill

Authoring order: vector ledger (ledger.json) → STAMP the master seams from it (scripts/seam-stamp.mjs --ledger ledger.json --write index.html) → sustained-motion route per phase → carriers and causes → build comps → VERIFY (scripts/seam-gate.mjs). Hand-author only Tier-A morphs/match-cuts; stamped seams pass the gate by construction.


Part 1 — The Seam Law

The Vector Law

How Scene A exits determines how Scene B enters: same axis, same direction, matched speed, cut mid-motion on both sides.

  1. Axis — x stays x, y stays y, Z stays Z. Never trade axes across a cut.
  2. Direction — never mirror. On Z, direction = the SIGN of scale change: growing = push (camera forward), shrinking = pull (camera back). A receding exit answered by a grow-from-small entry is a mirrored vector — the most common violation, because grow-from-small is the default element entrance.
  3. Speed — entry initial velocity ≈ exit final velocity, via mirrored eases (exit power4.in + entry power4.out, same distance and duration; the incoming side picks up ≥50% through the notional path). Mechanics in cut-the-curve.
  4. Phase — the cut lands mid-motion on BOTH sides. Settling to rest before the cut, or starting from rest after it, is a dead beat.

The Current

Every film picks ONE dominant direction (house default: LEFT). Every ordinary seam uses it. Other vectors are RESERVED — spending one means something:

VectorMeaning
The current (LEFT)"next beat" — neutral forward progress
Upwardelevation — a conclusion or reveal rises above what came before
Z forward (zoom-through)pushing deeper into the same thought
Z backward (inverse zoom)ARRIVAL — something bigger lands
Scale-burst (explode out)leaving a world — a surface blasts past camera
  • Never run consecutive seams in opposing directions — ping-pong reads as an error.
  • A direction change needs a visible cause (click / bounce / impact) or a chapter boundary.

The Vector Ledger

Write it before authoring any master timeline — as ledger.json at the project root (schema: references/seam-gate.md). One row per seam: cut time, exit and entry vectors (axis + signed direction; Z rows carry the scale sign), selectors, technique. Exit and entry must match; if a row mismatches, fix the plan, not the easing. The verifier checks row consistency statically before any runtime sampling.

Carriers

The eye follows objects, not abstractions. The strongest seams hand a concrete carrier across the cut at matched position AND velocity: a cursor mid-path, a container that shrinks/docks into the next layout, a mark that flies into its exact slot, the word group of a waterfall cut. With no natural carrier, the scene heroes carry it (partial travel + early fade, entry mid-flight). Never a crossfade — it has no carrier at all.

Causal Motion

Chain motion so each move is visibly launched by the last: click → squash → release spring → flight → impact → recoil → reveal.

  • Effects start ON the causing frame — same timeline position, never "shortly after."
  • Reactions scale with implied mass: big elements rebound slower, small ones snap.
  • A force is a license to change direction; an uncaused flip is a ping-pong.

The Seam Gate (build gate — run the verifier, exit 0 or the seam is not done)

node <SKILL_DIR>/scripts/seam-stamp.mjs --ledger ledger.json --write index.html  # generate
node <SKILL_DIR>/scripts/seam-gate.mjs  verify --ledger ledger.json --project .  # verify

The script (usage + ledger schema: references/seam-gate.md) numerically enforces, per seam: ledger-row consistency, exit still moving at the cut, entry mid-flight (never from rest), measured direction = ledger direction, entry/exit speed match (WARN), zero overlap (one side visible per frame — the cut is not a dissolve), the Z sign rule (d(scale)/dt same sign both sides; the incoming scene's own entrances are scanned for sign-fighting), and carrier rect continuity with ancestor scale included. Use seam-gate.mjs probe --t <cut> to find each seam's true carrier selectors when authoring the ledger.

Rules the script cannot check — still yours:

  1. Edits re-open the seam. Any change to a scene's first/last ~1s (including re-timing to new VO) invalidates that boundary's audit — re-run the verifier.
  2. Audio is the clock. Re-time scenes to the VO's real word timestamps; never rush a read to fit a slot. A VO regen re-opens its seams.
  3. Clip-gating gotcha (the usual cause of a zero-overlap FAIL): a clip whose data-start precedes its entry tween is un-hidden at its initial opacity — set initial autoAlpha: 0 AND data-start = the cut time, never earlier.

Part 2 — Performance (the scene keeps performing)

No idle wobble

Idle sine loops (breathe, float, drift, glow pulse) are BANNED as sustained motion — they read as "the video is waiting." A scene that finishes entering with seconds left is a planning bug: add story, not wobble. Every phase between entry and exit is owned by one of these routes (name the route in the plan):

RouteWhat it is
Staged revealsHold content back; pay it off on narration beats — the frame keeps gaining information (default for ≥2 content groups)
Camera with intentA mapped scale+pan path: establish wide → travel → arrive on the subject
Sequenced UI lifeThe product behaves over time: progress advances, highlights step, counts tick
Animated sequencesElements act out a beat: a card files into a stack, an item gets dragged, a result assembles
Cursor-led actionAn oversized cursor walks the eye to a trigger; its CLICK ignites the next beat (oversized-cursor)

Test: pause at any second — something meaningful must be mid-flight (a reveal landing, the camera traveling, the UI doing what the narration says).

Stillness before climax

Schedule a 0.3–0.75s pause between the major action and its result — the dramatic comma. A scene that jumps straight from action to result loses it.

Timing intents

  • Single entry ≤ ~800ms; longer buildup = multi-element stagger, not one slow element.
  • Exit ≈ 75% of entry. Exception: cut-the-curve inverts this (entry ~127% of exit).
  • Total stagger ≤ 500ms; with 8+ elements, tighten per-item delay or stagger the first few.
  • Forbidden eases: bounce.out / elastic.out. Entry overshoot back.out(1.4–1.7) is fine.
  • Similar elements share one ease+duration intent — never a unique pair per element.

Transition vocabulary

Use only 2–3 inter-scene transitions per film and repeat them; the default boundary is cut-the-curve in the current's direction. Hand-written shared-element morphs (intent: morph) don't count against the budget.


Anti-Patterns

Don'tInstead
Author each scene's entrance in isolationWrite the vector ledger first
Crossfade between scenesCut-the-curve in the current's direction
Exit completes, THEN the scene changesCut mid-motion on both sides
Entry starts from rest after a cutEnter ≥50% through the notional path
Inverse-zoom exit → grow-from-small entry (or push → oversized retraction)Match the scale-velocity sign (Seam Gate 7)
Incoming scene's own pop-in intro under a Z-seam handoffHold its opening frame composed, or match the sign
Idle wobble / breathe / float to fill timeAssign a sustained-motion route; or add story
Direction flip without a causeSpend a force, or keep the current
Reserved vectors used as varietyDefault to the current; spend them on meaning
Reaction a few frames after its causeSame-frame ignition
Action jumps straight to resultSchedule stillness-before-climax (0.3–0.75s)

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

AlessandroFare/fluxychat

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.\n

AlessandroFare/fluxychat

Use when audio already placed in a HyperFrames composition needs to be mixed: a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.\n

AlessandroFare/fluxychat

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.\n

AlessandroFare/fluxychat

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

AlessandroFare/fluxychat

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.\n

AlessandroFare/fluxychat

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint #13 (captions overlay, keep-out band retired) from the product-launch-video scene agent. Applies ON TOP of embedded-captions.

AlessandroFare/fluxychat

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

AlessandroFare/fluxychat

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

AlessandroFare/fluxychat

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

AlessandroFare/fluxychat

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

AlessandroFare/fluxychat

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

AlessandroFare/fluxychat

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

AlessandroFare/fluxychat

Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

AlessandroFare/fluxychat

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

AlessandroFare/fluxychat

Design and improve user interfaces using the concrete rules from Refactoring UI (Wathan & Schoger) — constrained spacing/type/color/shadow scales, visual hierarchy through weight and color rather than size, and depth through emulated light. Use when building or styling any UI (web, app, dashboard, landing page, component), when picking font sizes, spacing, colors, shadows or border radius, when designing a color palette or design tokens, and whenever someone says a UI "looks off", "looks amateur", "feels cluttered/plain/unfinished", or asks to "make this look better".

AlessandroFare/fluxychat

Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

AlessandroFare/fluxychat

Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

Verwandte Skills