ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-04 16:42:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(catalog): keep the text stagger preview inside the frame (#3255)

Browse Source
This commit is contained in:
Akshar Patel
2026-08-12 23:55:25 -04:00
committed by GitHub
parent 158f15e8f0
commit a2109a8633
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/public/catalog/components/text-stagger.json
+1 -1
View File
@@ -1 +1 @@
{"html":"<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n <title>Text Stagger - Demo</title>\n <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n <style>\n * {\n box-sizing: border-box;\n }\n html,\n body {\n margin: 0;\n width: 1920px;\n height: 1080px;\n overflow: hidden;\n }\n #demo {\n width: 1920px;\n height: 1080px;\n display: grid;\n place-items: center;\n background: #fafafa;\n font-family: Inter, system-ui, sans-serif;\n }\n .demo-frame {\n display: grid;\n place-items: center;\n gap: 28px;\n /* ponytail: scale on non-GSAP wrapper; text was ~7% frame height, now fills ~55% */\n transform: scale(2.6);\n transform-origin: center center;\n }\n .demo-label {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: #a1a1aa;\n }\n .hf-transition-text-stagger {\n display: flex;\n flex-wrap: wrap;\n gap: 0.24em;\n color: #18181b;\n font:\n 900 74px/0.95 Inter,\n system-ui,\n sans-serif;\n letter-spacing: -0.045em;\n }\n .hf-transition-text-stagger span {\n display: inline-block;\n background: linear-gradient(90deg, #18181b, #18181b, #71717a, #18181b);\n background-size: 240% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n will-change: transform, opacity, filter, background-position;\n }\n </style>\n </head>\n <body>\n <div\n id=\"demo\"\n data-composition-id=\"text-stagger-demo\"\n data-start=\"0\"\n data-width=\"1920\"\n data-height=\"1080\"\n data-duration=\"5\"\n >\n <div class=\"demo-frame\">\n <div class=\"demo-label\">text-stagger</div>\n <div class=\"hf-transition-text-stagger\">\n <span>Build</span>\n <span>motion</span>\n <span>systems</span>\n <span>fast</span>\n </div>\n </div>\n <script>\n const tl = gsap.timeline({ paused: true });\n tl.fromTo(\n \".hf-transition-text-stagger span\",\n { opacity: 0, y: 48, filter: \"blur(14px)\" },\n {\n opacity: 1,\n y: 0,\n filter: \"blur(0px)\",\n duration: 0.54,\n stagger: 0.09,\n ease: \"power3.out\",\n },\n 0.35,\n );\n tl.to(\n \".hf-transition-text-stagger span\",\n { backgroundPosition: \"100% 0%\", duration: 0.72, stagger: 0.04, ease: \"power2.inOut\" },\n 1.05,\n );\n tl.set({}, {}, 5);\n window.__timelines = window.__timelines || {};\n window.__timelines[\"text-stagger-demo\"] = tl;\n </script>\n </div>\n </body>\n</html>\n"} {"html":"<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n <title>Text Stagger - Demo</title>\n <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n <style>\n * {\n box-sizing: border-box;\n }\n html,\n body {\n margin: 0;\n width: 1920px;\n height: 1080px;\n overflow: hidden;\n }\n #demo {\n width: 1920px;\n height: 1080px;\n display: grid;\n place-items: center;\n background: #fafafa;\n font-family: Inter, system-ui, sans-serif;\n }\n .demo-frame {\n display: grid;\n place-items: center;\n gap: 28px;\n /* Scale the non-GSAP wrapper while keeping the full phrase inside the frame. */\n transform: scale(1.9);\n transform-origin: center center;\n }\n .demo-label {\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: #737379;\n }\n .hf-transition-text-stagger {\n display: flex;\n flex-wrap: wrap;\n gap: 0.24em;\n color: #18181b;\n font:\n 900 74px/0.95 Inter,\n system-ui,\n sans-serif;\n letter-spacing: -0.045em;\n }\n .hf-transition-text-stagger span {\n display: inline-block;\n background: linear-gradient(90deg, #18181b, #18181b, #71717a, #18181b);\n background-size: 240% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n will-change: transform, opacity, filter, background-position;\n }\n </style>\n </head>\n <body>\n <div\n id=\"demo\"\n data-composition-id=\"text-stagger-demo\"\n data-start=\"0\"\n data-width=\"1920\"\n data-height=\"1080\"\n data-duration=\"5\"\n >\n <div class=\"demo-frame\">\n <div class=\"demo-label\">text-stagger</div>\n <div class=\"hf-transition-text-stagger\">\n <span>Build</span>\n <span>motion</span>\n <span>systems</span>\n <span>fast</span>\n </div>\n </div>\n <script>\n const tl = gsap.timeline({ paused: true });\n tl.fromTo(\n \".hf-transition-text-stagger span\",\n { opacity: 0, y: 48, filter: \"blur(14px)\" },\n {\n opacity: 1,\n y: 0,\n filter: \"blur(0px)\",\n duration: 0.54,\n stagger: 0.09,\n ease: \"power3.out\",\n },\n 0.35,\n );\n tl.to(\n \".hf-transition-text-stagger span\",\n { backgroundPosition: \"100% 0%\", duration: 0.72, stagger: 0.04, ease: \"power2.inOut\" },\n 1.05,\n );\n tl.set({}, {}, 5);\n window.__timelines = window.__timelines || {};\n window.__timelines[\"text-stagger-demo\"] = tl;\n </script>\n </div>\n </body>\n</html>\n"}
registry/components/text-stagger/demo.html
Vendored
+3 -3
View File
@@ -28,8 +28,8 @@
display: grid; display: grid;
place-items: center; place-items: center;
gap: 28px; gap: 28px;
/* ponytail: scale on non-GSAP wrapper; text was ~7% frame height, now fills ~55% */ /* Scale the non-GSAP wrapper while keeping the full phrase inside the frame. */
transform: scale(2.6); transform: scale(1.9);
transform-origin: center center; transform-origin: center center;
} }
.demo-label { .demo-label {
@@ -37,7 +37,7 @@
font-weight: 500; font-weight: 500;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
color: #a1a1aa; color: #737379;
} }
.hf-transition-text-stagger { .hf-transition-text-stagger {
display: flex; display: flex;