Communitygithub.com

Drama2557/4RealDigital-Video-Studio

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

4RealDigital-Video-Studio란 무엇인가요?

4RealDigital-Video-Studio is a Claude Code agent skill that the technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity].

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Drama2557/4RealDigital-Video-Studio/tree/HEAD/.agents/skills/cut-the-curve

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Cut the Curve — the technique catalog

Five SEAM techniques, one principle: cut at peak velocity, match direction and speed on both sides of the cut — plus the two in-scene techniques (§6 arrivals, §7 slides). The seam LAW — vector law, the current, the ledger, the Seam Gate — lives in motion-doctrine; read it first. This skill is the parameters and mechanics. All GSAP code templates (worker + registry): examples/gsap-implementation.md.

Catalog

#TechniqueScopeAxisUse for
1Zoom-Through (forward)Within-scene text swapZ, toward viewerprogressing deeper into the same thought
2Inverse Zoom-ThroughArrival / payoff beatZ, away from viewersomething bigger lands
3Cut the CurveBetween scenesX / Ythe default boundary, the film's current
4Waterfall CutText-to-text seamX, per-wordword-level handoff between big-text beats
5Rack-Focus Blur-CutSame-surface state swapX / Y / Zthe one cut you want SEEN — a DSLR focus-pull flourish
6Waterfall EntryIn-scene ARRIVAL (no seam)Y, from belowtitle cards, segment openers, list intros
7Nudge CurveIn-scene group slide (no seam)X / Yrepositioning a composed group to make room

Z direction is a sign

"Same axis" is not enough on Z — the sign of d(scale)/dt must match across the cut:

Z vectorExit scaleEntry scaleVariant
Push (forward)growing 1 → 1.2growing 0.75 → 1zoom-through
Pull (back)shrinking 1 → 0.8shrinking 1.25 → 1inverse zoom-through

Banned mirrors: a receding exit answered by a grow-from-small entry (pull flips to push — the common one, since grow-from-small is the default element entrance), and a push exit answered by an oversized retraction. This binds the incoming scene's OWN entrances during the seam window (cut + ~0.5s), not just the wrapper tween: hold the incoming frame composed, or author its entrance to match the sign. Verify per Seam Gate rule 7.

Blur logic (all Z variants)

SubjectPeak blurWhy
Text-scale (headline, word group)10px20px smears letterforms — the cut reads as a glitch, not speed
Full-frame surface (window, card, screenshot)18–20pxlighter blur on a big surface reads as a rendering hiccup

Same peak blur on both sides at the swap frame. Blur the WRAPPER, never children.


1. Zoom-Through (forward)

Z-axis velocity-matched cut; never both texts visible. Everything GROWS: the outgoing text accelerates toward camera, a hard swap hides at peak blur, the incoming text keeps growing into the focal plane. Headlines and short phrases only. Total ≈ 0.4s.

PhaseScaleBlurOpacityEaseDuration
Exit1 → 1.20 → 10px1 → 0.15power3.in (opacity: separate none tween)0.2s
Cut (tl.set)in: 0.7510pxout: 0 / in: 0.15——
Entry0.75 → 110 → 0px0.15 → 1expo.out0.5s

Exit opacity MUST be its own linear tween — power3.in holds opacity near 1 too long. On entry all properties share expo.out.

2. Inverse Zoom-Through (backward)

The pull-back mirror: the outgoing element RECEDES; the incoming arrives OVERSIZED (as if just behind camera) and retracts into the focal plane. Everything SHRINKS. Spend on ARRIVAL/payoff beats — a payoff line, a giant reply, a held end-state — never ordinary boundaries. Total ≈ 0.7s (30% exit / 70% entry).

PhaseScaleBlurOpacityEaseDuration
Exit1 → 0.80 → 10px1 → 0.15power3.in (opacity: separate none tween)~0.2s
Cut (tl.set)in: 1.2510pxout: 0 / in: 0.15——
Entry1.25 → 110 → 0px0.15 → 1expo.out~0.5s

Blur is 10px text-scale; 18–20px only when both sides are full-bleed surfaces.

Sign discipline: the incoming scene arrives as a composed frame inside the retracting wrapper — no grow-from-small intro in the seam window. Staged entrances happen after the retraction settles, or start ≥1 and retract.

3. Cut the Curve (default scene boundary)

X/Y velocity-matched cut — the default for ALL scene-to-scene boundaries, in the film's current, not an accent. The outgoing hero accelerates in one direction, the cut lands mid-motion, the incoming hero continues the SAME direction and decelerates. Total ≈ 0.6s; directions LEFT / RIGHT / UP / DOWN (default LEFT).

Partial travel: ~12% of frame (≈230px at 1920) — never full off-screen moves.

DirectionExitEntry start → end
Leftwardx: 0 → −230x: +230 → 0
Rightwardx: 0 → +230x: −230 → 0
Upwardy: 0 → −230y: +230 → 0
Downwardy: 0 → +230y: −230 → 0

Mechanics:

  • Mirrored eases: exit power4.in + entry power4.out, same distance and duration — the two halves of one power4.inOut, so velocity matches exactly at the cut.
  • The fade trick: exit opacity completes at ~25–30% of its travel (fade ≈ 0.18–0.3s vs motion 0.3–0.34s); entry ignites at ~0.35 opacity mid-path. Time the last fading element to die right at the cut — a gap where nothing moves reads as dead air.
  • Exit 0.2–0.4s; entry ≥ exit. Optional blur 8–10px.
  • Stage ground: #root must be opaque (background: var(--canvas-deep, var(--canvas, #000))) — the mid-window cut opens a summed-opacity < 1 window that flashes white otherwise (see seam-craft).

push-slide exists but violates partial-travel and mid-motion phase; prefer cut-the-curve.

4. Waterfall Cut (word-by-word cut-the-curve)

Cut-the-curve at WORD granularity — the strongest leftward cut for text-to-text seams. Outgoing words ramp out on their own curves; incoming words cascade in mid-flight — a wave the eye rides across the seam.

Scope: worker-authored inside one multi-beat comp (stacked full-frame .beat layers), NOT a registry/injector type — it tweens word spans, not clip wrappers. The boundary into and out of the text-beat block still gets a normal registry transition. Does not count against the 2–3 transition budget.

ParameterValueWhy
Travel±230px (~12% frame)partial travel + velocity > full-frame push
Exit0.34s power4.inthe acceleration IS the cut
Exit fade0.18s, starts with xword gone by ~25–30% of travel — no smear
Exit stagger+0.022s reading orderthe line peels, not a block slide
Entry0.3s power4.outback half of the composite — velocity match
Entry start opacity0.35mid-path ignition; binary 0→1 pops
Entry gaps0.05s × 0.84 decayaccelerating cascade, resolves composed

Rules:

  • One direction per chain, riding the current. Inverse zoom is the chain's ARRIVAL beat only.
  • Pre-set all words to x: +230, opacity: 0 at build time — immediateRender: false alone leaves un-started words visible at rest.
  • A short first beat may exit whole-line: its fade ends ~0.02s before the cut so it is still streaking when the next words ignite — no dead gap.
  • Transform/opacity only (seek-safe); opaque stage ground applies.

5. Rack-Focus Blur-Cut (the visible cut)

The one variant where the cut is SEEN: a defocus blur SPIKE hides a single-frame hard swap — a handheld-DSLR focus-pull. Use as an occasional flourish for a state swap of the SAME surface within one visual theme; never the default boundary.

Differences from the others: outgoing stays FULLY OPAQUE until the cut (the blur hides the swap — no early fade); eases power2.in / power2.out (soft optics, not momentum).

Rules:

  • Fire only at a narrative beat, ≤ once per ~8s; never mid-caption or during a hold.
  • Cut at PEAK blur (≥6px; peak 8–12px, ≤16–18px max) — swapping on the way up shows the cut.
  • A subtle scale (~1.06 lens-breathing) sells it as optics.
  • Same direction on both sides — the vector law still holds. Entry ≥ exit duration.
  • Blur the wrapper; never blur + opacity in one tween on one element (headless compositing bug); never blur a <video> directly (wrap it).

6. Waterfall Entry (in-scene arrival — not a seam)

Staggered ARRIVAL cascade: words/elements whip in from below (one consistent direction), each starting before the previous settles — an accelerating wave that resolves into a composed layout. Title cards, segment openers, list/feature intros. The seam sibling is §4; do not mix their rules:

§6 Entry (arrival)§4 Waterfall Cut (seam)
OpacityBINARY 0→1 via tl.set at entry — never fadeignites at 0.35 mid-path — the fade IS the velocity trick
Axis defaultY, from belowX, riding the current
Outgoing sidenonewords ramp out on mirrored power4.in

Choreography:

  • Overlap, don't queue — next element starts within ±2 frames of the previous settling; gaps SHRINK across the cascade; the last element snaps.
  • Velocity varies by weight — heavy/anchor elements travel further and longer; light words/punctuation snap in tight:
ParameterAnchor/heavyNormal wordLight/punctuation
Y offset60–80px40–50px30–48px
Duration0.16–0.20s0.13–0.16s0.10–0.13s
Overlap0–2f gap1f overlap1–2f overlap
  • Ease power4.out (expo.out for extra snap); never .inOut on an entry.
  • One direction per cascade.
  • Split the FINAL word into fragments to extend the climax; fragments travel further.
  • Post-settle, the group usually slides to make room for the next beat — that's §7.

7. Nudge Curve (in-scene group slide — not a seam)

Slow-fast-slow repositioning of a composed group (word rows, card stacks, lists) to reveal content or make room. No single built-in ease produces it — power4.inOut smacks to a stop. Chain three tweens on one property:

PhaseEaseDistanceTimeFeel
1 ramp-inpower3.in~10%~20%barely moves — motion registers, no jolt
2 burstnone (linear)~65%~18%~2× average px/frame — purposeful
3 tailpower4.out~25%~62%decaying creep to rest — kills the smack

Rules:

  • The tail is ≥3× the ramp-in in TIME. If it still smacks: extend the tail's time (not distance) or use power5.out.
  • Phase 2 stays linear — easing it loses the burst contrast.
  • Reveal new content DURING phase 2 — the burst masks its appearance.
  • Same ratios vertical; scale distances proportionally, keep the time ratios.

Choosing a Variant

Zoom-ThroughInverse ZoomCut the CurveWaterfall Cut
ScopeWithin-scene text swapArrival/payoff beatBetween scenesText-to-text seam
Z sign / axisgrowing (push)shrinking (pull)X / YX, per-word
Travel/scale1→1.2, then 0.75→11→0.8, then 1.25→1±230px±230px
Peak blur10px text / 18–20 full-frame10px text / 18–20 full-frame8–10px optionalnone
Easespower3.in / expo.outpower3.in / expo.outpower4.in / power4.outpower4.in / power4.out
Feelprogressing througharriving atcarried sidewaysa wave across the seam

Anti-Patterns

Don'tInstead
Two texts visible during a zoom-throughHard cut at blur peak, one text at a time
20px blur on text-scale subjects10px text; 18–20px only full-frame
Inverse-zoom exit → grow-from-small entry (or push → oversized retraction)Match the scale-velocity SIGN; verify at cut±0.1s
Incoming comp's own scale-up intro under a Z-seam wrapper tweenArrive composed; stage entrances after the seam settles or match the sign
Mismatched blur/opacity at the swapIdentical values at the cut frame
Gentle entry easing (power2.out)Mirror the exit: power4.out / expo.out
Full off-screen exits/entriesPartial travel (~12%) + early fade
.inOut eases on either side of a cutMirrored power4.in / power4.out
Lone element fading long before its cutFade ends ~0.02s before the cut, or word-cascade
Equal gaps across a waterfall cascadeShrink gaps ×0.84 per word
Zoom-through on body textHeadlines and short phrases only
Scene cuts without cut-the-curveIt is the default boundary
Consecutive boundaries in opposing directionsOne current; reserved vectors spent on meaning
Unpainted #root behind a mid-window cutOpaque stage ground
Queued entries (each waits for the previous to settle)Overlap ±1–2 frames — the cascade is a wave, not a queue
Same offset/duration for every cascade elementVary by weight: anchors travel further, punctuation snaps
Gradual opacity fade on a §6 arrivalBinary 0→1 via tl.set — fading fights the snap (seam cuts fade; arrivals don't)
Single ease for a group slide (power4.inOut, slow())The §7 three-phase chain
Nudge tail shorter than 3× the ramp-inExtend the tail's TIME, not its distance

Code

All GSAP templates — worker-authored versions, registry gsap_templates, the combined cut-the-curve + zoom, waterfall DOM/CSS/JS, rack-focus — live in examples/gsap-implementation.md.

Individual skills in this repo

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

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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`.

Drama2557/4RealDigital-Video-Studio

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

Drama2557/4RealDigital-Video-Studio

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

Drama2557/4RealDigital-Video-Studio

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]

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

Drama2557/4RealDigital-Video-Studio

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.

Drama2557/4RealDigital-Video-Studio

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

Drama2557/4RealDigital-Video-Studio

Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on "graphic overlays", "on-screen graphics", "package / dress up my video". Not plain subtitles (/embedded-captions). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Agent skill / project related to launch or product demo video: Drama2557/4RealDigital-Video-Studio

관련 스킬