Skip to content

fix(catalog): make component previews answer their variables panel #3323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
miguel-heygen merged 2 commits into from
Aug 18, 2026
Merged

fix(catalog): make component previews answer their variables panel #3323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
915f674
fix(catalog): make component previews answer their variables panel
miguel-heygen Aug 18, 2026
c8853ed
refactor(catalog): give the preview pipeline one lookup and one entry…
miguel-heygen Aug 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/public/catalog/components/ascii-trail-reveal.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/public/catalog/components/aurora-drift.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/public/catalog/components/avatar-cloud.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/public/catalog/components/avatar-group-hover.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>Avatar Group Hover - 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: 760px;\n min-height: 480px;\n padding: 56px;\n /* ponytail: scale-only fix — GSAP animates the spans inside, not this wrapper */\n transform: scale(3.5);\n }\n .hf-transition-avatar-group-hover {\n display: inline-flex;\n align-items: center;\n padding-left: 18px;\n font-family: Inter, system-ui, sans-serif;\n }\n .hf-transition-avatar-group-hover span {\n display: grid;\n place-items: center;\n width: 54px;\n height: 54px;\n margin-left: -18px;\n border: 3px solid #fff;\n border-radius: 999px;\n background: linear-gradient(135deg, #111827, #0ea5e9);\n color: #fff;\n font-size: 18px;\n font-weight: 700;\n letter-spacing: 0.01em;\n box-shadow: 0 12px 30px rgba(24, 24, 27, 0.18);\n transform: translateY(var(--hf-avatar-y, 0px));\n }\n </style>\n </head>\n <body>\n <div\n id=\"demo\"\n data-composition-id=\"avatar-group-hover-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-transition-avatar-group-hover\">\n <span>A</span><span>B</span><span>C</span><span>D</span>\n </div>\n </div>\n <script>\n const tl = gsap.timeline({ paused: true });\n const startTime = 0.5;\n tl.to(\n \".hf-transition-avatar-group-hover span\",\n {\n \"--hf-avatar-y\": \"-18px\",\n duration: 0.28,\n stagger: { each: 0.035, from: \"center\" },\n ease: \"back.out(1.8)\",\n },\n startTime,\n );\n tl.to(\n \".hf-transition-avatar-group-hover span\",\n {\n \"--hf-avatar-y\": \"0px\",\n duration: 0.42,\n stagger: { each: 0.035, from: \"center\" },\n ease: \"bounce.out\",\n },\n startTime + 0.36,\n );\n tl.set({}, {}, 5);\n window.__timelines = window.__timelines || {};\n window.__timelines[\"avatar-group-hover-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>Avatar Group Hover - 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: 760px;\n min-height: 480px;\n padding: 56px;\n /* ponytail: scale-only fix — GSAP animates the spans inside, not this wrapper */\n transform: scale(3.5);\n }\n .hf-transition-avatar-group-hover {\n display: inline-flex;\n align-items: center;\n padding-left: 18px;\n font-family: Inter, system-ui, sans-serif;\n }\n .hf-transition-avatar-group-hover span {\n display: grid;\n place-items: center;\n width: 54px;\n height: 54px;\n margin-left: -18px;\n border: 3px solid #fff;\n border-radius: 999px;\n background: linear-gradient(135deg, #111827, #0ea5e9);\n color: #fff;\n font-size: 18px;\n font-weight: 700;\n letter-spacing: 0.01em;\n box-shadow: 0 12px 30px rgba(24, 24, 27, 0.18);\n transform: translateY(var(--hf-avatar-y, 0px));\n }\n </style>\n </head>\n <body>\n <div\n id=\"demo\"\n data-composition-id=\"avatar-group-hover-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-transition-avatar-group-hover\" data-composition-variables='[\n { \"id\": \"size\", \"type\": \"enum\", \"role\": \"style\", \"label\": \"Size\", \"description\": \"Avatar diameter, with the initials scaling alongside it.\", \"default\": \"standard\", \"options\": [{ \"value\": \"small\", \"label\": \"Small\" }, { \"value\": \"standard\", \"label\": \"Standard\" }, { \"value\": \"large\", \"label\": \"Large\" }] },\n { \"id\": \"overlap\", \"type\": \"enum\", \"role\": \"style\", \"label\": \"Overlap\", \"description\": \"How far each avatar tucks under the one before it, as a share of its own diameter.\", \"default\": \"standard\", \"options\": [{ \"value\": \"tight\", \"label\": \"Tight\" }, { \"value\": \"standard\", \"label\": \"Standard\" }, { \"value\": \"loose\", \"label\": \"Loose\" }] },\n { \"id\": \"accent\", \"type\": \"enum\", \"role\": \"style\", \"label\": \"Accent\", \"description\": \"Colour the avatar gradient resolves into.\", \"default\": \"blue\", \"options\": [{ \"value\": \"blue\", \"label\": \"Blue\" }, { \"value\": \"violet\", \"label\": \"Violet\" }, { \"value\": \"green\", \"label\": \"Green\" }] }\n ]'>\n <span>A</span><span>B</span><span>C</span><span>D</span>\n </div>\n </div>\n <script>\n (function () {\n \"use strict\";\n\n var vars =\n window.__hyperframes && window.__hyperframes.getVariables\n ? window.__hyperframes.getVariables()\n : {};\n\n // Unrecognised overrides return to their declared defaults.\n var sizes = { small: 42, standard: 54, large: 70 };\n var fonts = { small: \"0.8em\", standard: \"1em\", large: \"1.3em\" };\n // Overlap is a share of the diameter, so the two knobs stay independent.\n var overlaps = { tight: 0.5, standard: 1 / 3, loose: 0.12 };\n var accents = { blue: \"#0ea5e9\", violet: \"#a78bfa\", green: \"#34d399\" };\n\n function pick(table, value, fallback) {\n return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;\n }\n\n var sizeName = pick(sizes, vars.size, \"standard\");\n var overlapName = pick(overlaps, vars.overlap, \"standard\");\n var accent = accents[pick(accents, vars.accent, \"blue\")];\n var diameter = sizes[sizeName];\n var overlap = Math.round(diameter * overlaps[overlapName]);\n\n var roots = document.querySelectorAll(\".hf-transition-avatar-group-hover\");\n for (var i = 0; i < roots.length; i += 1) {\n var style = roots[i].style;\n style.setProperty(\"--hf-avatar-size\", diameter + \"px\");\n style.setProperty(\"--hf-avatar-font\", fonts[sizeName]);\n style.setProperty(\"--hf-avatar-overlap\", overlap + \"px\");\n style.setProperty(\"--hf-avatar-accent\", accent);\n }\n })();\n</script>\n<script>\n const tl = gsap.timeline({ paused: true });\n const startTime = 0.5;\n tl.to(\n \".hf-transition-avatar-group-hover span\",\n {\n \"--hf-avatar-y\": \"-18px\",\n duration: 0.28,\n stagger: { each: 0.035, from: \"center\" },\n ease: \"back.out(1.8)\",\n },\n startTime,\n );\n tl.to(\n \".hf-transition-avatar-group-hover span\",\n {\n \"--hf-avatar-y\": \"0px\",\n duration: 0.42,\n stagger: { each: 0.035, from: \"center\" },\n ease: \"bounce.out\",\n },\n startTime + 0.36,\n );\n tl.set({}, {}, 5);\n window.__timelines = window.__timelines || {};\n window.__timelines[\"avatar-group-hover-demo\"] = tl;\n </script>\n </div>\n <style>\n .hf-transition-avatar-group-hover {\n display: inline-flex;\n align-items: center;\n padding-left: var(--hf-avatar-overlap, 18px);\n font-family: Inter, system-ui, sans-serif;\n }\n .hf-transition-avatar-group-hover span {\n display: grid;\n place-items: center;\n width: var(--hf-avatar-size, 54px);\n height: var(--hf-avatar-size, 54px);\n margin-left: calc(-1 * var(--hf-avatar-overlap, 18px));\n border: 3px solid #fff;\n border-radius: 999px;\n background: linear-gradient(135deg, #111827, var(--hf-avatar-accent, #0ea5e9));\n color: #fff;\n font-size: var(--hf-avatar-font, 1em);\n font-weight: 900;\n box-shadow: 0 12px 30px rgba(24, 24, 27, 0.18);\n transform: translateY(var(--hf-avatar-y, 0px));\n }\n</style>\n</body>\n</html>\n"}
Loading
Loading