mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-13 15:49:53 +00:00
docs: refine music-to-video planning catalogs
This commit is contained in:
Miao Yang
@@ -1,95 +1,75 @@
|
||||
# Motion-primitive catalog — the free-compose menu
|
||||
|
||||
The atomic layer: one anchor → one micro-move. Templates ([`template-catalog.md`](template-catalog.md))
|
||||
are built from these; when no template fits a group, the planner **free-composes** by naming
|
||||
primitives from here, and the frame-worker realizes them. Two readers, one file:
|
||||
|
||||
- **Planner (Step 3)** — scan **what it does** + **anchor** to pick the primitives a free group rides. Selection only.
|
||||
- **Frame-worker (Step 4)** — open the cited recipe and lift its tweens. Build only.
|
||||
|
||||
The **recipe** column says what to lift:
|
||||
|
||||
- **✓** — a runnable, lint-clean composition at `motion-primitives/<id>/index.html`. Open it and lift the tweens.
|
||||
- **≈ `<id>`** — no separate file; use that recipe, it's the same idea.
|
||||
- **—** — no file; implement inline from the description (a one-liner, e.g. a 0ms `tl.set`, or a move a template realizes internally).
|
||||
The atomic layer: one anchor → one micro-move. When no template fits a group, free-compose by
|
||||
naming primitives from here. Scan **anchor** + **best span** + **what it does**, then pick the
|
||||
smallest set that carries the group.
|
||||
|
||||
## Timing & latency (applies to every primitive)
|
||||
|
||||
Quantified from frame-accurate reverse engineering of beat-synced reels:
|
||||
|
||||
- **Hard hits are 0ms.** Cuts, palette flips, content swaps, freezes are `tl.set(...)` with no duration — the percussion _is_ the motion. Easing a hit kills it.
|
||||
- **Lead the anchor.** A move that must _land_ on a beat (a wipe covering the frame, a count-up locking, two blocks colliding) starts **~40–190ms early** so it completes ON the anchor. Reactive entrances (something appearing _because_ of the hit) fire 0–45ms after.
|
||||
- **Eased entrances: 300–500ms** (scale punch, slides, camera pushes). **Macro builds: 800–2000ms** spanning a whole roll / silence.
|
||||
- **Magnitudes:** scale-punch 0→1; weight pulse 1→1.06; hero fill up to 1→5; chromatic split ~20px, resolve clean in ≤150ms.
|
||||
- **Per-bar caps:** one accumulating element per hit (not a burst); a camera move at most once per phrase, never per beat; a dense flip/strobe system runs ≤2–3s.
|
||||
- **Tension-builds lock.** A count-up / sequential build / morph must _resolve on_ a downbeat or hard_stop, never trail off mid-bar.
|
||||
- **Best span means active motion.** The catalog's span guidance is not a license to stretch one primitive over a whole frame. If a free-composed group runs longer than the listed span, add a hold / bed / next primitive, or split the frame into another group at the next musical anchor.
|
||||
|
||||
## Catalog
|
||||
|
||||
Each runnable recipe is self-contained and lint-clean: showcase chrome stripped, system-font
|
||||
fallback, shared `../assets/gsap.min.js`, one paused timeline on `window.__timelines["main"]`.
|
||||
|
||||
| id | anchor | what it does | recipe |
|
||||
| --------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- |
|
||||
| `hypercut-whip` | beat / hard_stop | fast whip-pan hard cut between frames | ✓ |
|
||||
| `kinetic-letter-in` | downbeat / phrase | per-letter kinetic entrance | ✓ |
|
||||
| `braam-punch` | drop / surge | big "braam" impact — scale + weight slam | ✓ |
|
||||
| `chromatic-split` | snare / glitch / surge | RGB channel split / glitch on a word | ✓ |
|
||||
| `mask-reveal` | section_start / downbeat | clip-path mask wipe reveal | ✓ |
|
||||
| `screen-shake` | drop / crash / kick | camera / screen shake jitter | ✓ |
|
||||
| `binary-decrypt` | roll / build | scramble→decode text (binary → word) | ✓ |
|
||||
| `dolly-zoom` | phrase / build | vertigo dolly-zoom (scale vs perspective) | ✓ |
|
||||
| `iris-open` | section_start / reveal | circular iris-open reveal | ✓ |
|
||||
| `electric-arc` | accent / glitch | electric arc / lightning accent | ✓ |
|
||||
| `neon-flicker` | hold / texture | neon-sign flicker | ✓ |
|
||||
| `chrome-sweep` | downbeat / reveal | metallic specular sweep across text | ✓ |
|
||||
| `slot-machine-reveal` | roll → downbeat | slot-machine spin-to-land character reveal | ✓ |
|
||||
| `liquid-morph` | phrase / transition | liquid / blob morph | ✓ |
|
||||
| `gooey-metaball` | build / drop | gooey metaball merge field | ✓ |
|
||||
| `3d-card-flip` | downbeat / swap | 3D card flip (rotateY) | ✓ |
|
||||
| `crash-zoom-in` | drop / surge | violent crash zoom-in | ✓ |
|
||||
| `spotlight-sweep` | reveal / hold | spotlight / gradient sweep over text | ✓ |
|
||||
| `outline-to-fill` | downbeat / reveal | stroke outline → solid fill | ✓ |
|
||||
| `counting-punch` | roll → downbeat | number count-up that punches & locks | ✓ |
|
||||
| `particle-burst` | drop / crash | particle explosion burst | ✓ |
|
||||
| `radial-burst-lines` | drop / surge | radial speed-lines burst | ✓ |
|
||||
| `pixel-dissolve` | transition / hard_stop | pixelated dissolve | ✓ |
|
||||
| `datamosh-smear` | glitch / transition | datamosh / motion smear | ✓ |
|
||||
| `text-wave-distort` | hold / texture | wavy text distortion | ✓ |
|
||||
| `bg-flow-field` | energy / whole span (bed) | generative WebGL curl-noise flow-field **background bed** — palette-driven, breathes on the energy envelope; compose any foreground move over it | ✓ |
|
||||
| `blur-resolve` | stop / final hold | blur-in to crisp focus, then blur-out on the cut | ✓ |
|
||||
| `chromatic-pressure` | snare / glitch | RGB split / digital tension on a transient | ≈ `chromatic-split` |
|
||||
| `color-grid-shuffle` | onset | grid of cells recoloured by a deterministic index per onset | — |
|
||||
| `content-swap` | beat | 0ms swap of stacked nodes — the workhorse percussive move | ≈ `slot-machine-reveal` |
|
||||
| `directional-fill` | beat / reveal | directional wipe-fill (scaleX) sweeping across bars | ✓ |
|
||||
| `flash-cut` | drop / crash | full-frame flash masking a word / colour state change | ✓ |
|
||||
| `freeze-hold` | hard_stop | freeze the moving system and hold it (desaturate + vignette) | — |
|
||||
| `hard-cut` | beat / hard_stop | sample-accurate 0ms colour-block + word cut | ✓ |
|
||||
| `mosaic-pack` | beat / build | scattered tiles fly in and pack into a grid | ✓ |
|
||||
| `negative-space-hold` | silence / hard_stop / final hold | kill busy layers, hold one readable mark in empty space | — |
|
||||
| `overlay-pop` | accent | badge / lower-third overlay pops in over a base | — |
|
||||
| `palette-flip` | section change | same layout re-skins via 0ms palette-variable flips | ✓ |
|
||||
| `staggered-exit` | phrase / transition | ordered cascade-out clearing the frame | ✓ |
|
||||
| `staggered-reveal` | build | ordered cascade-in of a stack / list | — |
|
||||
| `system-replace` | drop / regime change | hard-cut the entire visual system, then boot the new one | — |
|
||||
| `text-spectral-rays` | phrase / sweep (hero text) | volumetric spectral light-rays cast by a wordmark toward a sweeping light cursor — grain + RGB-split; **WebGL hero-text system** | ✓ |
|
||||
| `tile-mosaic` | build / reveal | grid of tiles revealed in a diagonal sweep, assembling a poster | ✓ |
|
||||
| `typewriter-reveal` | roll / build | char / word type-on, explicit per-span set (no `stagger`) + caret | ✓ |
|
||||
| `value-counter` | roll → downbeat | count-up that locks on a downbeat / hard_stop | ≈ `counting-punch` |
|
||||
| `word-grid-burst` | onsets → downbeat | grid of words revealed per onset, refocus one on a downbeat | ✓ |
|
||||
|
||||
> **Template-private verbs.** Some templates declare moves realized only inside their own
|
||||
> impl — `held_lockup`, `anchor_pop_in`, `word_slot_cycle`, `per_line_color`,
|
||||
> `scene_palette_flip`, `beat_jitter_shake`, `box_zoom_wipe` (`split-anchor-word-slot`),
|
||||
> `motion-blur` (`logo-split-lockup-pulse`). Those live in the template's `index.html`, not here.
|
||||
| id | anchor | best span | what it does |
|
||||
| --------------------- | -------------------------------- | ----------------- | ------------------------------------------------------------------------- |
|
||||
| `hypercut-whip` | beat / hard_stop | 0.18-0.45s | fast whip-pan hard cut between frames |
|
||||
| `kinetic-letter-in` | downbeat / phrase | 0.4-1.2s | per-letter kinetic entrance |
|
||||
| `braam-punch` | drop / surge | 0.2-0.9s active | big impact: scale + weight slam |
|
||||
| `chromatic-split` | snare / glitch / surge | 0.1-0.6s | RGB channel split / glitch on a word |
|
||||
| `mask-reveal` | section_start / downbeat | 0.5-1.2s | clip-path mask wipe reveal |
|
||||
| `screen-shake` | drop / crash / kick | 0.1-0.5s | camera / screen shake jitter |
|
||||
| `binary-decrypt` | roll / build | 0.8-2.5s | scramble→decode text (binary → word) |
|
||||
| `dolly-zoom` | phrase / build | 1.2-2.5s | vertigo dolly-zoom (scale vs perspective) |
|
||||
| `iris-open` | section_start / reveal | 0.6-1.2s | circular iris-open reveal |
|
||||
| `electric-arc` | accent / glitch | 0.1-0.6s | electric arc / lightning accent |
|
||||
| `neon-flicker` | hold / texture | 0.5-2.5s | neon-sign flicker |
|
||||
| `chrome-sweep` | downbeat / reveal | 0.6-1.4s | metallic specular sweep across text |
|
||||
| `slot-machine-reveal` | roll → downbeat | 0.8-2.0s | slot-machine spin-to-land character reveal |
|
||||
| `liquid-morph` | phrase / transition | 1.0-2.5s | liquid / blob morph |
|
||||
| `gooey-metaball` | build / drop | 1.5-3.0s | gooey metaball merge field |
|
||||
| `3d-card-flip` | downbeat / swap | 0.8-1.6s | 3D card flip (rotateY) |
|
||||
| `crash-zoom-in` | drop / surge | 0.2-0.8s | violent crash zoom-in |
|
||||
| `spotlight-sweep` | reveal / hold | 0.8-2.0s | spotlight / gradient sweep over text |
|
||||
| `outline-to-fill` | downbeat / reveal | 0.8-1.8s | stroke outline → solid fill |
|
||||
| `counting-punch` | roll → downbeat | 1.0-2.5s | number count-up that punches & locks |
|
||||
| `particle-burst` | drop / crash | 0.2-1.2s | particle explosion burst |
|
||||
| `radial-burst-lines` | drop / surge | 0.2-0.8s | radial speed-lines burst |
|
||||
| `pixel-dissolve` | transition / hard_stop | 0.5-1.5s | pixelated dissolve |
|
||||
| `datamosh-smear` | glitch / transition | 0.4-1.2s | datamosh / motion smear |
|
||||
| `text-wave-distort` | hold / texture | 1.0-2.5s | wavy text distortion |
|
||||
| `bg-flow-field` | energy / whole span (bed) | 4-12s bed | generative curl-noise background bed; compose any foreground move over it |
|
||||
| `blur-resolve` | stop / final hold | 0.7-2.0s | blur-in to crisp focus, then blur-out on the cut |
|
||||
| `chromatic-pressure` | snare / glitch | 0.1-0.5s | RGB split / digital tension on a transient |
|
||||
| `color-grid-shuffle` | onset | 0ms hits; ≤2s run | grid of cells recolored by a deterministic index per onset |
|
||||
| `content-swap` | beat | 0ms hits; ≤3s run | 0ms swap of stacked nodes: the workhorse percussive move |
|
||||
| `directional-fill` | beat / reveal | 0.3-1.0s each | directional wipe-fill (scaleX) sweeping across bars |
|
||||
| `flash-cut` | drop / crash | 0-0.6s | full-frame flash masking a word / color state change |
|
||||
| `freeze-hold` | hard_stop | 0ms in; 0.5-2s | freeze the moving system and hold it |
|
||||
| `hard-cut` | beat / hard_stop | 0ms in; 0.3-2s | sample-accurate color-block + word cut |
|
||||
| `mosaic-pack` | beat / build | 1.5-3.5s | scattered tiles fly in and pack into a grid |
|
||||
| `negative-space-hold` | silence / hard_stop / final hold | 1-6s hold | kill busy layers, hold one readable mark in empty space |
|
||||
| `overlay-pop` | accent | 0.2-0.6s in | badge / lower-third overlay pops in over a base |
|
||||
| `palette-flip` | section change | 0ms flip; 0.5-4s | same layout re-skins via 0ms palette-variable flips |
|
||||
| `staggered-exit` | phrase / transition | 0.4-1.2s | ordered cascade-out clearing the frame |
|
||||
| `staggered-reveal` | build | 0.8-2.5s | ordered cascade-in of a stack / list |
|
||||
| `system-replace` | drop / regime change | 0ms cut | hard-cut the entire visual system, then boot the new one |
|
||||
| `text-spectral-rays` | phrase / sweep (hero text) | 2.5-5s | volumetric light-rays cast by a wordmark toward a sweeping light cursor |
|
||||
| `tile-mosaic` | build / reveal | 1.5-3.5s | grid of tiles revealed in a diagonal sweep, assembling a poster |
|
||||
| `typewriter-reveal` | roll / build | 1.0-3.0s | character / word type-on with caret |
|
||||
| `value-counter` | roll → downbeat | 1.0-2.5s | count-up that locks on a downbeat / hard_stop |
|
||||
| `word-grid-burst` | onsets → downbeat | 1.8-3.2s | grid of words revealed per onset, refocus one on a downbeat |
|
||||
|
||||
## How to combine
|
||||
|
||||
- One dominant system per group; layer at most one texture recipe over one structural recipe.
|
||||
- One dominant system per group; layer at most one texture primitive over one structural primitive.
|
||||
- Structure on strong beats (cuts, camera, `system-replace` → downbeat / phrase / section_start); texture on weak / syncopated hits (`content-swap`, typewriter letters, chromatic accents).
|
||||
- A roll is an accumulation container — build during it, hard-cut to a clean layout on the downbeat that ends it.
|
||||
- `drop` ≠ `downbeat`: a downbeat is a cut within the regime; a drop is a regime change (`system-replace`, total clear, element-count jump).
|
||||
- Let silence remove density (`negative-space-hold`).
|
||||
- **Background beds are a layer, not a move.** A bed (`bg-flow-field`) runs the whole span on the **energy / phrase** channel, leaving the **beat anchors** free for the foreground — so it composes cleanly _under_ any discrete primitive. One bed at a time; merge the bed's uniform tweens onto the group's master timeline (don't run a second timeline), bundle a local `three`/WebGL (no CDN), repaint via the timeline's `onUpdate` (no rAF).
|
||||
- **WebGL "system" primitives come in two roles:** a **bed** (`bg-flow-field`, behind everything) and a **hero-text treatment** (`text-spectral-rays`, which rasterizes the wordmark and _is_ the hero). Use at most one of each; feed text/raster locally (no CDN fonts), repaint via `onUpdate`.
|
||||
- **`text-spectral-rays` renders its OWN wordmark — never give the word a second source.** It draws the solid letters AND the rays from one glyph mask (perfectly registered). Do NOT use it as a "rays-only" layer behind a separate DOM logo (or stack `content-swap` / `chromatic-pressure` on the same word): the two fonts/positions won't match and you get a doubled / ghosted wordmark — deleting the shader's letter terms does not fix it (the ray mask is still the second, misaligned copy). Let the shader be the wordmark; hide any DOM logo (keep it only as an invisible layout spacer). If you move the word off frame-center, move the light cursor's `y` by the same amount. Full recipe: [`motion-primitives/text-spectral-rays/USAGE.md`](motion-primitives/text-spectral-rays/USAGE.md).
|
||||
- Background beds are a layer, not a move: one bed at a time, under foreground primitives.
|
||||
- `text-spectral-rays` is the hero wordmark treatment; do not stack another visible copy of the same word on top.
|
||||
|
||||
@@ -6,9 +6,10 @@ template realizes **one group** of a frame (a frame may stack several groups; th
|
||||
unifies them).
|
||||
|
||||
**How to pick.** For each group, read its frame's `pacing` + `mood` + the one-line music
|
||||
situation from the skeleton, then scan **Reach for it when** below and take the closest fit.
|
||||
If nothing fits, **free-compose** from [`motion-primitive-catalog.md`](motion-primitive-catalog.md)
|
||||
— that is a first-class choice, not a failure.
|
||||
situation from the skeleton, then scan **Reach for it when** + **Best span** below and take the
|
||||
closest fit. If nothing fits, **free-compose** from
|
||||
[`motion-primitive-catalog.md`](motion-primitive-catalog.md) — that is a first-class choice, not a
|
||||
failure.
|
||||
|
||||
**Brand comes from `frame.md`, not the template.** Templates ship their own demo palette
|
||||
(`theme` / `palette` / color params). Fill those params from the project's `frame.md` (the
|
||||
@@ -22,58 +23,84 @@ reads those at build time; you only name the values.
|
||||
Pacing tag: every template below is **beat_cut** except `held-message-living-field`
|
||||
(**phrase_flow**). Never put a beat_cut template on a phrase_flow frame.
|
||||
|
||||
## Group duration discipline
|
||||
|
||||
Template choice is per **group**, not per frame. A frame longer than a template's **Best span**
|
||||
should usually split into multiple groups at real audiomap anchors (`SURGE`, `DROP`, roll edge,
|
||||
hard_stop, phrase edge) instead of stretching one template across the whole frame.
|
||||
|
||||
- **Best span** below is the active treatment span: the part where the template's system is doing
|
||||
meaningful motion. A short readable hold at the end is fine; a long empty tail means pick another
|
||||
group.
|
||||
- **Frames over ~6s** usually need 2+ groups. Beat-cut exceptions are rich programs with real
|
||||
sub-phases (`poster-tile-mosaic`, sometimes `card-flyby`); phrase-flow exceptions use
|
||||
`held-message-living-field`.
|
||||
- **Roll templates are one-roll tools.** If a frame has two rolls or a drop between rolls, split it
|
||||
into two groups.
|
||||
- Do not extend by slowing every tween. Preserve the template's motion feel, then fill extra time
|
||||
with a hold / palette change / new group.
|
||||
|
||||
---
|
||||
|
||||
### card-flyby
|
||||
|
||||
- **What** — a depth column of cards rolls forward through perspective; each landing beat tumbles the next card into the front slot with a solid colored wipe, the old front falls toward camera, dwells shrink card-to-card so the deck accelerates into a held final card.
|
||||
- **Reach for it when** — a stream of discrete onsets that **accelerate** (gaps shrinking / a build into a downbeat) and you want to flash a **sequence of items** — titles, projects, posters, tiles — one per hit, climaxing on a held card.
|
||||
- **Best span** — **4-6.5s** for 4-7 landings plus a short final hold; split at the next downbeat if it wants to run **>7s**.
|
||||
- **Params** — `theme`, `bgColor`, `cards`, `landings`, `yaw`
|
||||
|
||||
### held-message-living-field · phrase_flow
|
||||
|
||||
- **What** — a readable mark (logo / word / title) held dead still over a soft, color-shifting blurred field; only the field breathes.
|
||||
- **Reach for it when** — a **calm / sparse** stretch with an onset desert — energy present but few or no onsets (a held pad or riser); you have one word or mark to hold and let breathe.
|
||||
- **Best span** — **6-16s**; this is the long-group exception. Under 4s feels underdeveloped; over ~20s needs a state change or another group.
|
||||
- **Params** — `markText`, `titleText`, `tagText`, `palette`, `flowSpeed`, `duration`
|
||||
|
||||
### held-text-strobe-burst
|
||||
|
||||
- **What** — a dead-still word whose letters flip through texture-filled frames (texture-clipped fill + per-frame tint + bg color) every ~3 frames, in short bursts pinned to a roll.
|
||||
- **Reach for it when** — a **dense, hard-hitting roll / fill** and a single word you want to strobe through textures for a few bars. (Ships texture-mask PNGs under `assets/`.)
|
||||
- **Best span** — **1.2-3.5s**; strobe fatigue starts fast, so cap at ~4s and cut to a cleaner system.
|
||||
- **Params** — `markText`, `fontStyle`, `markScale`, `idleColor`, `idleInk`, `frames`, `strobePlan`, `decor`, `duration`
|
||||
|
||||
### intro-kinetic-cascade
|
||||
|
||||
- **What** — a line laid out as a sequence of big editorial **phrases** (each a stacked poster with one enlarged hero word), revealed word-by-word on its anchors, hard cut between phrases, climaxing on a phrase that slides in with a swappable ringing **icon** (bell / cursor / sparkle / emoji / SVG).
|
||||
- **Reach for it when** — an **intro / opening statement**: a short line to land word-by-word as big type, climaxing on one keyword + an icon. Medium-or-more energy, steady grid.
|
||||
- **Best span** — **3.5-7s** for 2-4 phrase beats; if the statement needs more time, make the next clause a new group.
|
||||
- **Params** — `theme`, `icon`, `phrases`, `climax`
|
||||
|
||||
### logo-split-lockup-pulse
|
||||
|
||||
- **What** — a two-part mark joined at center splits left↔right to open a gap, grows a center word-lockup one word per onset (key word lands on the downbeat surge), snap-closes on a hit, then pulses with the beat.
|
||||
- **Reach for it when** — a short **logo / brand sting** (not a typed sentence): fast dense onsets + a sustained roll bed to pulse on, with a left/right bracketing mark.
|
||||
- **Best span** — **2-4s**; at **>4.5s** it reads like a sting stretched too long. Follow with a separate held-lockup / next idea group.
|
||||
- **Params** — `bgColor`, `markColor`, `textColor`, `leftMark`, `rightMark`, `word1`, `word2`, `word3`, `word4`
|
||||
|
||||
### poster-tile-mosaic
|
||||
|
||||
- **What** — a packed **mosaic** of different-sized colored tiles that tessellate to fill the frame (no overlap), driven by interchangeable beat-synced operations: staggered enter/exit, locked global recolor, snake-fill + overlay.
|
||||
- **Reach for it when** — many discrete, individually-placeable onsets (a hit for every tile move) with distinct sub-phases you want articulated differently (accumulate → recolor-on-roll → fill-then-drop). A dense section best held as **one** rich tile program rather than split.
|
||||
- **Best span** — **4-7s**, up to **8s** only when the program has clear sub-phases. If the music changes regime, split even if the tile system could continue.
|
||||
- **Params** — `bgColor`, `tiles`, `bands`, `gap`, `showText`, `labels`, `program`
|
||||
|
||||
### roll-flipbook-word-cycle
|
||||
|
||||
- **What** — a hi-hat roll drives a centred word that flips every 16th-note through a word list; optionally the flicker resolves and locks into a final phrase.
|
||||
- **Reach for it when** — a **fast sustained-fill roll** (hundreds of hits/min, ~16th-note) with no single readable message — fill the roll with a rapidly-cycling word flipbook.
|
||||
- **Best span** — **1.2-3.8s**, one roll into one resolve. Two rolls, or a drop between rolls, means two groups.
|
||||
- **Params** — `bgColor`, `textColor`, `accentColor`, `flipWords`, `resolveText`, `periodChar`
|
||||
|
||||
### split-anchor-word-slot
|
||||
|
||||
- **What** — a held left anchor column of fixed-word rows beside a torn-paper word-slot box on the right, driven by beat-synced operators: anchor lock-in, slot word-group cycle (in/out + per-line color), full-scene background flip, per-beat jitter, box-zoom exit wipe. Row count + number of flips are data.
|
||||
- **Reach for it when** — a short section with a **held idea** (a brand / name to anchor on the left) **and** a stream of onsets popping separate words on the right, plus a dense run to ride a shake on and a strong downbeat to wipe out into.
|
||||
- **Best span** — **3-6s**; above ~6.5s the fixed anchor goes stale unless the right slot enters a new group/program.
|
||||
- **Params** — `bgColor`, `anchors`, `theme`, `showText`, `program`
|
||||
|
||||
### typewriter-phrase-keyword-shuffle
|
||||
|
||||
- **What** — words type in one-per-onset to spell a phrase, then one keyword cycles typefaces on the beat while everything else holds dead still.
|
||||
- **Reach for it when** — a steady grid with a **continuous onset stream** (no desert): a phrase to type out, then a keyword to shuffle. The inverse of `held-message-living-field` (which wants an onset desert).
|
||||
- **Best span** — **2.5-5s**; if the phrase cannot type and shuffle inside ~5s, reduce words or split the sentence across groups.
|
||||
- **Params** — `bgColor`, `textColor`, `accentColor`, `lead1`, `lead2`, `lead3`, `keyword`, `periodChar`
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -13,7 +13,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Card Flyby · accelerating 3D deck cascade — reference impl</title>
|
||||
<script src="./assets/gsap.min.js"></script>
|
||||
<script src="../../motion-primitives/assets/gsap.min.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script src="../../motion-primitives/assets/gsap.min.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
|
||||
-11
File diff suppressed because one or more lines are too long
@@ -16,7 +16,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Held Text / Strobe Burst (Texture Flip) — Template</title>
|
||||
<script src="assets/gsap.min.js"></script>
|
||||
<script src="../../motion-primitives/assets/gsap.min.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
|
||||
-11
File diff suppressed because one or more lines are too long
@@ -12,7 +12,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Intro Kinetic Cascade · beat-synced kinetic typography — reference impl</title>
|
||||
<script src="./assets/gsap.min.js"></script>
|
||||
<script src="../../motion-primitives/assets/gsap.min.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
|
||||
-11
File diff suppressed because one or more lines are too long
@@ -17,7 +17,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Logo Split / Lockup Pulse — group_7 reference impl</title>
|
||||
<script src="./assets/gsap.min.js"></script>
|
||||
<script src="../../motion-primitives/assets/gsap.min.js"></script>
|
||||
<!-- Velocity-driven directional motion blur (registry: motion-blur). Samples each
|
||||
target's GSAP x/y per seek and applies a one-sided ghost trail + top blur
|
||||
proportional to speed; clears at rest. This is what makes the fast mark moves
|
||||
|
||||
-11
File diff suppressed because one or more lines are too long
@@ -15,7 +15,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Poster-Tile Wall · 3 beat-synced operations — group_5 reference impl</title>
|
||||
<script src="./assets/gsap.min.js"></script>
|
||||
<script src="../../motion-primitives/assets/gsap.min.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Roll-Driven Flipbook (Word Cycle → Optional Lock) — gruop_3 reference impl</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script src="../../motion-primitives/assets/gsap.min.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
|
||||
-11
File diff suppressed because one or more lines are too long
@@ -13,7 +13,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Split-Anchor Word-Slot · beat-synced kinetic typography — group_6 reference impl</title>
|
||||
<script src="./assets/gsap.min.js"></script>
|
||||
<script src="../../motion-primitives/assets/gsap.min.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
|
||||
+1
-1
@@ -16,7 +16,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Typewriter Phrase / Keyword Font-Shuffle — group_2 reference impl</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script src="../../motion-primitives/assets/gsap.min.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
|
||||
Reference in New Issue
Block a user