feat(registry): seed blocks batch — social overlays, data viz, showcases#269
Conversation
miguel-heygen
left a comment
miguel-heygen
left a comment
There was a problem hiding this comment.
Review: Registry Seed Blocks Batch
Good batch of content. The 11 blocks are well-structured, consistently formatted, and the PR description is thorough. A few issues to address before merging.
Critical (must fix)
1. ascii-dashboard has a broken local dependency on Three.js
ascii-dashboard.html line 8 (inside the <body> style/script section):
<script src="../three.min.js"></script>This is a relative path to a three.min.js that doesn't exist in the registry block directory or anywhere in the block's files array. The registry-item.json only lists ascii-dashboard.html as a file — no Three.js bundled. After hyperframes add ascii-dashboard, the user gets a composition that immediately fails because THREE is undefined.
Options:
- A) Use a CDN like the GSAP scripts:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>(or whatever version was used) - B) Add
three.min.jsas ahyperframes:assetin thefilesarray and include the file in the block directory
Option A is simpler and consistent with how GSAP is handled. This block will not render without it.
Important (should fix)
2. Composition ID mismatches between data-composition-id and __timelines key
Several blocks use a data-composition-id that doesn't match the block's name in registry-item.json. When these blocks are composed into a host composition via data-composition-src, the HyperFrames engine resolves timelines by the data-composition-id value. This isn't a bug if the engine uses whatever ID is in the HTML, but it's inconsistent naming that will confuse users:
| Block name | data-composition-id |
__timelines key |
|---|---|---|
instagram-follow |
instagram-follow-overlay |
instagram-follow-overlay |
tiktok-follow |
tiktok-follow-overlay |
tiktok-follow-overlay |
x-post |
x-post-overlay |
x-post-overlay |
reddit-post |
reddit-post-overlay |
reddit-post-overlay |
spotify-card |
spotify-now-playing |
spotify-now-playing |
app-showcase |
scene-3-phones |
scene-3-phones |
The convention from existing blocks (e.g., data-chart, flowchart, logo-outro) is that data-composition-id matches the block name. The social overlays append -overlay, spotify uses a completely different name (spotify-now-playing), and app-showcase uses scene-3-phones.
The catalog MDX usage snippets reference the block name (e.g., data-composition-id="app-showcase" in the install docs), but the actual HTML uses a different ID. This means the install instructions are wrong — they show data-composition-id="app-showcase" but the HTML file uses scene-3-phones.
Recommendation: Either rename the IDs to match the block names, or make the catalog generator aware of the actual IDs used in the HTML. The former is cleaner.
3. CSS scoping inconsistency
The blocks use two different scoping strategies:
- Scoped (good):
app-showcase,ascii-dashboard,ascii-lightning,ui-3d-reveal— all CSS selectors are prefixed with[data-composition-id="..."] - Unscoped (problematic):
instagram-follow,tiktok-follow,yt-lower-third,x-post,reddit-post,spotify-card,macos-notification— all CSS uses bare class names (.lower-third,.avatar,.card,.x-card, etc.)
The unscoped blocks will have CSS collisions when composed into a host document that has its own .avatar, .card, or other common class names. The social overlays are overlays meant to be layered on top of other content, so collision is virtually guaranteed.
Since these are single-file standalone compositions loaded via iframe/sub-composition, the scoping may not matter at runtime (each gets its own document). But it's inconsistent with the showcase blocks that do scope everything. Worth normalizing for the sake of setting the right pattern for future blocks.
Suggestions (nice to have)
4. ascii-lightning canvas selector uses a bare ID
#al-canvas {
position: absolute;
...
}While ascii-dashboard scopes with [data-composition-id="ascii-dashboard"], ascii-lightning uses #al-canvas directly. Minor since IDs are unique per document, but inconsistent with the sibling block.
5. Reddit uses a DM Sans font but the real Reddit UI uses IBM Plex Sans / Noto Sans
The Reddit post card uses font-family: "DM Sans". Real Reddit uses a different font stack. Not a blocker since these are stylized overlays, but if authenticity is a goal, worth noting.
6. Font loading: display=block vs display=swap
All blocks use display=block for Google Fonts, which is correct for video rendering (avoids FOUT). Good pattern.
What's done well
- All 11
registry-item.jsonfiles follow the established schema exactly — correct$schema,type,dimensions,duration,filesarray,tags. Consistent with existingdata-chartpattern. registry.jsonadditions are correct — 11 newhyperframes:blockentries appended after existing items.docs.jsonpage entries are alphabetically sorted within the Blocks group.catalog-index.jsonentries are alphabetically sorted with correcthrefandpreviewpaths.- All 11 MDX catalog pages follow identical structure with install command, details table, files table, and usage snippet.
- Every block has both PNG and MP4 preview assets.
- GSAP CDN version is consistently
3.14.2across all blocks. - All HTML files start with
<!doctype html>and include<html lang="en">,<meta charset="UTF-8" />. - The social overlays have nice micro-interactions (button press-in with elastic bounce, color transitions on follow/like/subscribe).
ui-3d-revealis an impressive 2905-line composition with full Figma logo stroke-draw animation, perspective UI card reveal, and outro — properly scoped with[data-composition-id="ui-3d-reveal"]throughout.
Summary: Fix the Three.js dependency in ascii-dashboard (critical — block won't render). The composition ID mismatches and CSS scoping inconsistency are worth fixing now to set the right convention for the registry, but aren't strictly blocking if there's urgency to land.
PR #259: Scope all GSAP JS selectors in flowchart.html under [data-composition-id="flowchart"] prefix. Remove unnecessary setTimeout retry in data-chart.html. PR #261: Replace 'iframe' text with 'sub-composition' / 'data-composition-src' in SKILL.md description + body, CLAUDE.md skills table + rules. Add data-composition-id to missing-attributes note in snippet guidance. PR #262: Fix CI workflow — replace grep -P lookbehind with sed (PCRE variable-length alternation fails on Ubuntu), use fetch-depth: 0 + base SHA for diff, remove continue-on-error: true, add per-item timeout, reduce artifact retention to 7 days. Fix doc comment to remove stale 'examples' reference. PR #263: Add try/catch around JSON.parse in codegen discovery (prevents partial wipe on malformed manifest). Guard docs.json tabs array existence. PR #269: Fix Three.js CDN in ascii-dashboard (was broken relative path). Fix composition ID mismatches in 6 blocks (instagram-follow, tiktok-follow, x-post, reddit-post, spotify-card, app-showcase) — IDs now match block names.
miguel-heygen
left a comment
miguel-heygen
left a comment
There was a problem hiding this comment.
Good batch. Broken ascii blocks removed in #270. Social overlay CSS scoping can be tightened in a follow-up.
59df316 to
912e058
Compare
PR #259: Scope all GSAP JS selectors in flowchart.html under [data-composition-id="flowchart"] prefix. Remove unnecessary setTimeout retry in data-chart.html. PR #261: Replace 'iframe' text with 'sub-composition' / 'data-composition-src' in SKILL.md description + body, CLAUDE.md skills table + rules. Add data-composition-id to missing-attributes note in snippet guidance. PR #262: Fix CI workflow — replace grep -P lookbehind with sed (PCRE variable-length alternation fails on Ubuntu), use fetch-depth: 0 + base SHA for diff, remove continue-on-error: true, add per-item timeout, reduce artifact retention to 7 days. Fix doc comment to remove stale 'examples' reference. PR #263: Add try/catch around JSON.parse in codegen discovery (prevents partial wipe on malformed manifest). Guard docs.json tabs array existence. PR #269: Fix Three.js CDN in ascii-dashboard (was broken relative path). Fix composition ID mismatches in 6 blocks (instagram-follow, tiktok-follow, x-post, reddit-post, spotify-card, app-showcase) — IDs now match block names.
f711805 to
630b5ab
Compare
Merge activity
|
Add 11 blocks from the Hyperframe Template Structure catalog: Social overlays: - instagram-follow, tiktok-follow, yt-lower-third - x-post, reddit-post, spotify-card, macos-notification Data and visualizations: - ascii-dashboard, ascii-lightning Showcases: - app-showcase, ui-3d-reveal Each block includes registry-item.json, standalone HTML, rendered preview (PNG + MP4), and generated catalog MDX page. Registry now has 25 items.
912e058 to
e111980
Compare
PR #259: Scope all GSAP JS selectors in flowchart.html under [data-composition-id="flowchart"] prefix. Remove unnecessary setTimeout retry in data-chart.html. PR #261: Replace 'iframe' text with 'sub-composition' / 'data-composition-src' in SKILL.md description + body, CLAUDE.md skills table + rules. Add data-composition-id to missing-attributes note in snippet guidance. PR #262: Fix CI workflow — replace grep -P lookbehind with sed (PCRE variable-length alternation fails on Ubuntu), use fetch-depth: 0 + base SHA for diff, remove continue-on-error: true, add per-item timeout, reduce artifact retention to 7 days. Fix doc comment to remove stale 'examples' reference. PR #263: Add try/catch around JSON.parse in codegen discovery (prevents partial wipe on malformed manifest). Guard docs.json tabs array existence. PR #269: Fix Three.js CDN in ascii-dashboard (was broken relative path). Fix composition ID mismatches in 6 blocks (instagram-follow, tiktok-follow, x-post, reddit-post, spotify-card, app-showcase) — IDs now match block names.
PR heygen-com#259: Scope all GSAP JS selectors in flowchart.html under [data-composition-id="flowchart"] prefix. Remove unnecessary setTimeout retry in data-chart.html. PR heygen-com#261: Replace 'iframe' text with 'sub-composition' / 'data-composition-src' in SKILL.md description + body, CLAUDE.md skills table + rules. Add data-composition-id to missing-attributes note in snippet guidance. PR heygen-com#262: Fix CI workflow — replace grep -P lookbehind with sed (PCRE variable-length alternation fails on Ubuntu), use fetch-depth: 0 + base SHA for diff, remove continue-on-error: true, add per-item timeout, reduce artifact retention to 7 days. Fix doc comment to remove stale 'examples' reference. PR heygen-com#263: Add try/catch around JSON.parse in codegen discovery (prevents partial wipe on malformed manifest). Guard docs.json tabs array existence. PR heygen-com#269: Fix Three.js CDN in ascii-dashboard (was broken relative path). Fix composition ID mismatches in 6 blocks (instagram-follow, tiktok-follow, x-post, reddit-post, spotify-card, app-showcase) — IDs now match block names.
2 participants
What
Add 11 blocks from the Hyperframe Template Structure catalog, bringing the registry to 25 total items.
Social overlays
instagram-followtiktok-followyt-lower-thirdx-postreddit-postspotify-cardmacos-notificationData & visualization
ascii-dashboardascii-lightningShowcases
app-showcaseui-3d-revealWhy
Phase D content accumulation. The registry pipeline (PRs 6-10) is in place — this PR exercises it at scale.
How
<template>sub-compositions to standalone HTML with proper<!doctype>wrappersgenerate-catalog-previews.tsgenerate-catalog-pages.tsdocs.jsonupdated with new catalog entriesTest plan
registry-item.jsonfiles have correct dimensions, duration, tagsoxfmt --checkpasses on all files