Skip to content

feat(registry): add caret swap text effect - #3898

Open
AksharP5 wants to merge 2 commits into
heygen-com:mainfrom
AksharP5:feat/registry-caret-swap
Open

feat(registry): add caret swap text effect#3898
AksharP5 wants to merge 2 commits into
heygen-com:mainfrom
AksharP5:feat/registry-caret-swap

Conversation

@AksharP5

@AksharP5 AksharP5 commented Sep 12, 2026

Copy link
Copy Markdown
Contributor

What

Adds Caret Swap, a text transition that covers one phrase with a gradient caret, then types its replacement. Install with npx hyperframes add caret-swap.

Fixes #3897.

Caret Swap demo

1280×720, 30 fps render:

caret-swap.mp4

Why

Phrase replacements can emphasize a correction, reveal a punchline, or show a before-and-after statement. A reusable component lets authors customize the text and styling without rebuilding the animation.

How

Ported the pinned Remocn motion to a paused GSAP timeline, with measured text centering and grapheme-aware typing. Both phrases, font size and weight, text color, and gradient endpoints are Catalog variables. Text shrinks to fit; short mounts compress the phases and longer mounts extend the final hold. Line breaks become spaces for this single-line effect.

Geist is bundled with its OFL license and supports every advertised weight. The component retains Remocn's full MIT notice and pinned source attribution. Visual reference.

Includes the generated Catalog page, interactive payload and registry/navigation entries. The payload generator now preserves an authored demo when it mounts the live snippet, keeping Caret Swap's light background and duration. The existing HTML parser identifies actual mounts, ignoring comments and script examples. Regression coverage includes those cases and the copied-demo fallback.

Test plan

  • Unit tests added/updated
  • Manual testing performed
  • Documentation updated

Validated with the full workspace build, 98 focused Catalog/registry tests, registry lint, formatting, scripts typecheck and commit hooks. The mounted component passes hyperframes check --samples 25 --at-transitions with no runtime, layout or contrast findings.

Browser review covered 13 cases: all four weights, long and empty phrases, Unicode graphemes and shaping, newlines, a 240×72 mount, 0.3s/0.5s completion, 6s hold, and backward/forward seeking. The standalone Catalog payload loads its font and responds correctly. The attached 100-frame render was regenerated from the final source and is byte-identical to the preview above.

hyperframes add caret-swap also passed against the pushed branch. All three installed files match the source bytes.

After the parser fix, 58 focused tests pass and Fallow reports no findings. Four unchanged functions have individual exclusions for inherited complexity, verified against main; the preview-selection logic remains checked. The regenerated Caret Swap payload is unchanged.

Per CONTRIBUTING.md, a maintainer still needs to regenerate the opt-in search index before merge:

bun scripts/catalog/build-local-vectors.ts
bun scripts/catalog/check-artifact-coverage.ts

The pinned 33 MB model is not installed here. The MP4 attachment supplies the preview for review without the internal image-upload credentials.

Comment thread scripts/generate-catalog-payloads.ts Fixed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Caret Swap to the Catalog

2 participants