mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 01:56:04 +00:00
Miguel Ángel
9734578e60
Restores the 208 catalog items reverted after their previews 404'd in production, this time on the payload mechanism rather than the .html files that caused the outage. The generator no longer writes a preview document to docs/public. That writer, and the machinery under it, existed only to produce files the docs host discards, so it is gone rather than bypassed. Items now embed the composition itself via a payload, which is what the previous change already does for the items that were already in the catalog. The variables explorer is parked, not restored: it drove its preview through the same unpublished .html path, so it would have shown an empty frame. Items that declare variables get the live player plus the static variables table, and reconnecting the explorer to payloads is a follow-up.
39 lines
3.3 KiB
Markdown
39 lines
3.3 KiB
Markdown
# particle-text-dissolve
|
|
|
|
Text assembles FROM a seeded particle cloud, or dissolves TO it: per-particle target positions are sampled ONCE at mount from the rendered text bitmap (the token-styled line is rastered to an offscreen canvas and read back with getImageData), then the field runs table-driven with zero per-particle tweens and one `onUpdate` painter. Direct donor: particle-image-reveal.
|
|
|
|
4s authored, elastic HOLD, exit `none` by default. Wave M experiment (watch page only, not on the hero shelf).
|
|
|
|
## Variables
|
|
|
|
| id | type | default | notes |
|
|
| ----------- | ------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
| `text` | string | `Dissolve` | The line that assembles or dissolves. Sized to fit at mount (up to 86% of the stage width). |
|
|
| `direction` | enum | `in` | `in` assembles the line from the cloud and holds it crisp; `out` erases the line left to right into the cloud and holds empty. |
|
|
| `density` | enum | `med` | Particle count cap: `low` (900), `med` (1700), `high` (2800). |
|
|
| `accent` | enum | `green` | Text and particle color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`. |
|
|
| `exit` | enum | `none` | `none` holds until the cut; `fade` departs opacity-only; `up` rises out. |
|
|
|
|
## Mount
|
|
|
|
```html
|
|
<div
|
|
class="clip"
|
|
data-composition-id="particle-text-dissolve"
|
|
data-composition-src="./particle-text-dissolve.html"
|
|
data-variable-values='{"text":"Particles","direction":"in","density":"high","accent":"violet"}'
|
|
data-start="0"
|
|
data-duration="4"
|
|
data-track-index="0"
|
|
></div>
|
|
```
|
|
|
|
Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `particle-text-dissolve` key.
|
|
|
|
## Notes
|
|
|
|
- Bitmap sampling happens exactly once, synchronously at mount: the line is drawn to an offscreen canvas with the DOM line's computed font stack and a fitted pixel size, lit cells on a deterministic grid become targets, and the set is thinned to the density cap with fixed LCG seed `0x9d1550f7` (one draw per cell, grid order). The crisp DOM line locks to the same family and device-pixel size, so targets sit on the glyphs it draws.
|
|
- Every painted frame is a pure function of (table, timeline time): the anchor tween's `onUpdate` clears and repaints the whole field. No Math.random, no wall clock, no incremental state, so eventful seeks (`suppressEvents=false`, the engine's render path) land byte-identical frames in any order and either direction.
|
|
- The reveal (or erase) front sweeps left to right for both directions; the DOM line's clip-path wipe rides the same front. By the end of IN every particle's alpha is exactly zero: the HOLD canvas is one clear rect, holding either the crisp themable DOM line (`in`) or an empty stage (`out`).
|
|
- The canvas raster is sized once at mount from the host box and devicePixelRatio (capped at 2); the same host always yields the same raster and the same particle table.
|