From 47c520d02e4d1ed223d90e1a607e84e13533df68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Sun, 17 May 2026 18:42:17 -0400 Subject: [PATCH] fix(registry): polish caption timing and add highlight style MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - clip-wipe: slower reveal (0.3s), longer hold, smoother exit - glitch-rgb: 2.5x larger RGB split, stronger scanlines, more dramatic jitter - gradient-fill: smoother word transitions (0.15s), longer exit - typewriter: extended group hold times so text lingers on screen - weight-shift: per-word font-weight animation (200→900), was broken with only line-level shift that never triggered on single-line groups - Add caption-highlight: red background sweep behind active word (TikTok-style) - Re-rendered and uploaded preview videos for all 6 components --- docs/catalog/components/caption-highlight.mdx | 38 +++ docs/docs.json | 1 + docs/public/catalog-index.json | 15 + .../caption-clip-wipe/caption-clip-wipe.html | 8 +- .../components/caption-clip-wipe/demo.html | 8 +- .../caption-clip-wipe/registry-item.json | 2 +- .../caption-glitch-rgb.html | 12 +- .../components/caption-glitch-rgb/demo.html | 12 +- .../caption-glitch-rgb/registry-item.json | 2 +- .../caption-gradient-fill.html | 6 +- .../caption-gradient-fill/demo.html | 6 +- .../caption-gradient-fill/registry-item.json | 2 +- .../caption-highlight/caption-highlight.html | 260 ++++++++++++++++++ .../components/caption-highlight/demo.html | 260 ++++++++++++++++++ .../caption-highlight/registry-item.json | 16 ++ .../caption-typewriter.html | 20 +- .../components/caption-typewriter/demo.html | 20 +- .../caption-typewriter/registry-item.json | 2 +- .../caption-weight-shift.html | 52 ++-- .../components/caption-weight-shift/demo.html | 52 ++-- .../caption-weight-shift/registry-item.json | 2 +- registry/registry.json | 4 + 22 files changed, 705 insertions(+), 95 deletions(-) create mode 100644 docs/catalog/components/caption-highlight.mdx create mode 100644 registry/components/caption-highlight/caption-highlight.html create mode 100644 registry/components/caption-highlight/demo.html create mode 100644 registry/components/caption-highlight/registry-item.json diff --git a/docs/catalog/components/caption-highlight.mdx b/docs/catalog/components/caption-highlight.mdx new file mode 100644 index 000000000..5937f0962 --- /dev/null +++ b/docs/catalog/components/caption-highlight.mdx @@ -0,0 +1,38 @@ +--- +title: "Highlight" +description: "Red background sweep behind each active word, TikTok-style" +--- + +# Highlight + +Red background sweep behind each active word, TikTok-style + +`captions` `caption-style` `highlight` `social` `tiktok` + +