feat(registry): add caret swap text effect - #3898
Open
AksharP5 wants to merge 2 commits into
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.
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
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-transitionswith 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-swapalso 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:
The pinned 33 MB model is not installed here. The MP4 attachment supplies the preview for review without the internal image-upload credentials.