mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-12 15:20:13 +00:00
Miao YangandClaude Opus 4.8
a34d3dba4d
Replace bgm-to-video, bgm-to-video-new, bgm-to-video-refactor, and the standalone beat-sync/montage skills with a single music-to-video skill. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
43 lines
2.3 KiB
Markdown
43 lines
2.3 KiB
Markdown
# Using `text-spectral-rays` — it OWNS its wordmark
|
|
|
|
`text-spectral-rays` is a **self-contained WebGL hero-text renderer**. From ONE rasterized
|
|
glyph mask it draws **both** the solid wordmark **and** the spectral rays that emanate from
|
|
it. Letters and rays share the same mask, so they are always perfectly registered.
|
|
|
|
## The one trap: never give the word a second source
|
|
|
|
The ghost / doubled-wordmark artifact comes from splitting the word across two sources:
|
|
|
|
- ❌ **Wrong** — use the shader as a "rays-only background" and draw the visible letters
|
|
with a **separate DOM element** (or stack a second text move like `content_swap` /
|
|
`chromatic_pressure` on the same word). The DOM font (e.g. Inter) and the shader's raster
|
|
font (Arial Black / Impact fallback) differ in width, shape, and position, so the ray
|
|
edges never line up with the DOM letters → a misregistered ghost. **Deleting the shader's
|
|
letter terms does NOT fix it** — the ray mask itself is still the second, misaligned copy
|
|
of the word.
|
|
|
|
- ✅ **Right** — let the shader render the wordmark. There is exactly ONE source, so a
|
|
ghost is structurally impossible.
|
|
|
|
## Integrate in one pass
|
|
|
|
1. **It IS the wordmark.** Hide any DOM logo for that word (keep it only as an invisible
|
|
layout spacer if a tagline/CTA below depends on its box). Never stack a discrete text
|
|
move on the same word.
|
|
2. **One timeline.** Merge its `progress` / `effectMix` state tweens onto the group's master
|
|
timeline and repaint via `tl.eventCallback("onUpdate", render)` — no second timeline, no
|
|
`requestAnimationFrame`.
|
|
3. **Align the cursor to the word.** `mouse.y` must equal the mask's vertical center. If you
|
|
move the rasterized word off frame-center (e.g. up, to leave room for a tagline), shift
|
|
the cursor's `y` by the same amount — otherwise the rays cast at the wrong angle.
|
|
4. **Local raster only.** Rasterize the word with a bundled / system font (no CDN font);
|
|
upload the mask + colour canvases as textures.
|
|
5. **Entrance.** Slam the whole canvas (autoAlpha + a scale punch, `transform-origin` on the
|
|
word's optical center) on the hit; let `effectMix` bloom the rays just after. The solid
|
|
letters are present the instant the canvas reveals.
|
|
|
|
## Pairs with
|
|
|
|
A background bed (`bg-flow-field`) or **separate** supporting elements (tagline, CTA, rule)
|
|
— never a second treatment of its own word.
|