Skip to content

feat: port MaskedHeading animation from react-bits - #27

Open
adetyaz wants to merge 1 commit into
DavidHDev:mainfrom
adetyaz:feat/masked-heading
Open

adetyaz wants to merge 1 commit into
DavidHDev:mainfrom
adetyaz:feat/masked-heading

Conversation

@adetyaz

@adetyaz adetyaz commented Sep 12, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Ports MaskedHeading from react-bits (ts-tailwind variant) — a heading whose letters act as an SVG clip-path mask, revealing an image or video underneath, with idle drift, pointer parallax, and a staggered entrance animation (rise/wipe/fade, triggered on mount/view/hover).
  • Preserves all props, defaults, and behavior 1:1 with upstream: word-by-word glyph positioning synced to real DOM layout on every resize/font-load, the same time-correct exponential smoothing for drift/parallax, and the same three-mode reveal animation via GSAP.
  • Adds a full docs/demo page (selects for media/reveal/trigger/align, sliders for every numeric prop, prop table, code tab) plus the exact demo video asset used by react-bits' own preview.

Test plan

  • svelte-check — no errors/warnings in the new files
  • eslint — clean
  • registry:build — jsrepo registry sync passes
  • build — production build succeeds
  • Verified in-browser via Playwright: glyph positions now match react-bits' rendering exactly (word wrap, x/y per glyph) after fixing a nbsp-escaping bug that was inflating word widths and breaking the wrap

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.

1 participant