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

fix(catalog): keep the typewriter preview inside the frame (#3249)

Browse Source
This commit is contained in:
Akshar Patel
2026-08-12 23:49:13 -04:00
committed by GitHub
parent 3670e9a921
commit dc01a12d71
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/public/catalog/components/typewriter.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>Typewriter - 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: #f7f7f8;\n font-family: Inter, system-ui, sans-serif;\n }\n .demo-frame {\n display: grid;\n place-items: center;\n min-width: 900px;\n min-height: 500px;\n padding: 64px;\n /* ponytail: scale-up only; GSAP targets .hf-remocn-typewriter with CSS vars, not transforms */\n transform: scale(2.8);\n }\n .hf-remocn-typewriter {\n color: #18181b;\n font-family: Inter, system-ui, sans-serif;\n font-weight: 900;\n letter-spacing: -0.04em;\n }\n .hf-remocn-typewriter {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font:\n 800 52px/1 ui-monospace,\n SFMono-Regular,\n Menlo,\n monospace;\n }\n .hf-remocn-typewriter span {\n display: inline-block;\n max-width: calc(var(--hf-type-progress, 1) * 100%);\n overflow: hidden;\n white-space: nowrap;\n }\n .hf-remocn-typewriter i {\n width: 3px;\n height: 52px;\n border-radius: 999px;\n background: #18181b;\n opacity: var(--hf-caret-opacity, 1);\n }\n </style>\n </head>\n <body>\n <div\n id=\"demo\"\n data-composition-id=\"typewriter-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=\"hf-remocn-typewriter\"><span>hyperframes add typewriter</span><i></i></div>\n </div>\n <script>\n const tl = gsap.timeline({ paused: true });\n const startTime = 0.5;\n tl.fromTo(\n \".hf-remocn-typewriter\",\n { \"--hf-type-progress\": 0 },\n { \"--hf-type-progress\": 1, duration: 1.2, ease: \"steps(28)\" },\n startTime,\n );\n tl.to(\n \".hf-remocn-typewriter i\",\n { \"--hf-caret-opacity\": 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: \"none\" },\n startTime + 0.2,\n );\n tl.set({}, {}, 5);\n window.__timelines = window.__timelines || {};\n window.__timelines[\"typewriter-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>Typewriter - 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: #f7f7f8;\n font-family: Inter, system-ui, sans-serif;\n }\n .demo-frame {\n display: grid;\n place-items: center;\n min-width: 900px;\n min-height: 500px;\n padding: 64px;\n /* ponytail: scale-up only; GSAP targets .hf-remocn-typewriter with CSS vars, not transforms */\n transform: scale(2);\n }\n .hf-remocn-typewriter {\n color: #18181b;\n font-family: Inter, system-ui, sans-serif;\n font-weight: 900;\n letter-spacing: -0.04em;\n }\n .hf-remocn-typewriter {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font:\n 800 52px/1.2 ui-monospace,\n SFMono-Regular,\n Menlo,\n monospace;\n }\n .hf-remocn-typewriter span {\n display: inline-block;\n max-width: calc(var(--hf-type-progress, 1) * 100%);\n overflow: hidden;\n white-space: nowrap;\n }\n .hf-remocn-typewriter i {\n width: 3px;\n height: 52px;\n border-radius: 999px;\n background: #18181b;\n opacity: var(--hf-caret-opacity, 1);\n }\n </style>\n </head>\n <body>\n <div\n id=\"demo\"\n data-composition-id=\"typewriter-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=\"hf-remocn-typewriter\"><span>hyperframes add typewriter</span><i></i></div>\n </div>\n <script>\n const tl = gsap.timeline({ paused: true });\n const startTime = 0.5;\n tl.fromTo(\n \".hf-remocn-typewriter\",\n { \"--hf-type-progress\": 0 },\n { \"--hf-type-progress\": 1, duration: 1.2, ease: \"steps(28)\" },\n startTime,\n );\n tl.to(\n \".hf-remocn-typewriter i\",\n { \"--hf-caret-opacity\": 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: \"none\" },\n startTime + 0.2,\n );\n tl.set({}, {}, 5);\n window.__timelines = window.__timelines || {};\n window.__timelines[\"typewriter-demo\"] = tl;\n </script>\n </div>\n </body>\n</html>\n"}
registry/components/typewriter/demo.html
Vendored
+2 -2
View File
@@ -31,7 +31,7 @@
min-height: 500px;
padding: 64px;
/* ponytail: scale-up only; GSAP targets .hf-remocn-typewriter with CSS vars, not transforms */
transform: scale(2.8);
transform: scale(2);
}
.hf-remocn-typewriter {
color: #18181b;
@@ -44,7 +44,7 @@
align-items: center;
gap: 6px;
font:
800 52px/1 ui-monospace,
800 52px/1.2 ui-monospace,
SFMono-Regular,
Menlo,
monospace;