feat(registry): seed transition blocks — 14 shader + 14 CSS showcase#270
Merged
jrusso1020 merged 13 commits intoApr 14, 2026
Merged
Conversation
This was referenced Apr 14, 2026
Collaborator
Author
4 tasks
miguel-heygen
approved these changes
Apr 14, 2026
miguel-heygen
left a comment
miguel-heygen
left a comment
Collaborator
There was a problem hiding this comment.
Review: 28 Transition Blocks (14 Shader + 14 CSS Showcase)
Spot-checked 3 shader blocks (gravitational-lens, glitch, domain-warp-dissolve) and 3 CSS blocks (transitions-3d, transitions-blur, transitions-destruction). Also verified all 28 registry-item.json files and catalog-index.json for consistency.
What looks good
Shader blocks are well-structured and safe:
- All shaders use fixed-iteration loops only (
for(int i=0;i<5;i++),for(int i=0;i<12;i++)) -- no dynamic loop bounds, no GPU hang risk. - Proper WebGL context setup:
preserveDrawingBuffer: trueon all 14 shader blocks,CLAMP_TO_EDGEtexture wrapping,LINEARfiltering, proper viewport/pixelStorei configuration. - Graceful fallback: every shader block checks
if (!gl)and falls back to an empty paused timeline, so headless Chrome without GPU won't crash. - Fragment shaders use
precision mediump float-- good choice for compatibility and performance in headless rendering.
Timeline registration is correct everywhere:
- All 28 blocks register
window.__timelines["main"] = tl(or the fallback empty timeline for WebGL failures). - All use
gsap.timeline({ paused: true })as required for the HyperFrames runtime to seek.
Registry consistency is solid:
- All 28 registry-item.json files follow the same schema with
$schema,name,type: "hyperframes:block", matchingtags,dimensions: 1920x1080, and correct file targets. - All 14 shader blocks have
duration: 4and tags["transition", "shader"]. - All 14 CSS showcase blocks have tags
["transition", "showcase"]with varying durations (11-55s) matching their content. - catalog-index.json entries are alphabetically sorted and use
"type": "block"(matching existing convention vs."hyperframes:block"in registry-item.json). - docs.json page list is alphabetically ordered.
- All 28 HTML files have
<!doctype html>, all usedata-composition-id="main". - Only external dependency is GSAP CDN (
[email protected]) -- consistent across all 28 blocks. Google Fonts used in shader blocks only (consistent with the blueprint panel design).
Shader code quality:
- domain-warp-dissolve: properly implements cascaded FBM with 5-octave noise, rotation matrix for lacunarity, and cosine color palette for edge glow. No issues.
- gravitational-lens: warp strength scales with inverse distance
+0.1denominator prevents division by zero. Chromatic aberration shift is bounded. Event horizon darkening uses smoothstep. Clean. - glitch: scanline + block scramble + chromatic aberration all driven by deterministic
rand()seeded fromu_progress(not time) -- important for deterministic frame-by-frame rendering. Good. - chromatic-radial-split: simple radial RGB channel separation, clean mix.
CSS blocks are clean:
- transitions-blur uses GSAP
filteranimations (blur, skew, scale) -- all hardware-accelerated-friendly properties. - transitions-destruction uses a 2D canvas for the page-burn effect with procedural noise and radial gradient -- creative approach that avoids WebGL while still being visually interesting.
- transitions-3d properly uses
perspective: 1200pxandrotationYfor the card flip.
Minor notes (non-blocking)
-
Inconsistent
<title>tags: 6 of the 14 CSS showcase blocks have<title>elements, the other 8 (and all 14 shader blocks) do not. Not functional but worth noting for consistency if more blocks are added later. -
Inconsistent
<meta name="viewport">tags: All 14 CSS blocks have<meta name="viewport" content="width=1920">but none of the 14 shader blocks do. Again, probably doesn't matter for headless rendering, but could be unified. -
Shader boilerplate duplication: The
captureScene()function, vertex shader,compileShader(),mkProg(),renderShader(),easeInOut(), and the timeline timing logic (1s hold, 2s transition, 1s hold) are identical across all 14 shader blocks. Not a problem for this PR, but if more shader transitions are added, extracting a sharedshader-transition-base.jsutility could reduce the per-block size from ~365 lines to ~50 lines of unique code. -
transitions-shadertagging: This block is tagged["transition", "showcase"]even though it contains WebGL shader code. The tagging is technically correct (it's a showcase of shader transitions), but worth noting the naming overlap with theshadertag used by the standalone shader blocks.
All checks pass (Format, Render catalog previews, Validate docs, Semantic PR title). LGTM.
jrusso1020
force-pushed
the
04-14-feat_registry_seed_transition_blocks_14_shader_14_css_showcase
branch
from
April 14, 2026 19:38
de9178c to
0f830a2
Compare
miguel-heygen
approved these changes
Apr 14, 2026
miguel-heygen
left a comment
miguel-heygen
left a comment
Collaborator
There was a problem hiding this comment.
Nice cleanup — fixes CI workflow, removes broken blocks, updates docs. Good to merge.
jrusso1020
force-pushed
the
04-14-feat_registry_seed_blocks_batch_social_overlays_data_viz_showcases
branch
from
April 14, 2026 23:14
59df316 to
912e058
Compare
jrusso1020
force-pushed
the
04-14-feat_registry_seed_transition_blocks_14_shader_14_css_showcase
branch
from
April 14, 2026 23:14
82ea236 to
71c346d
Compare
Collaborator
Author
Merge activity
|
jrusso1020
changed the base branch from
04-14-feat_registry_seed_blocks_batch_social_overlays_data_viz_showcases
to
graphite-base/270
April 14, 2026 23:28
Add 28 transition blocks from the Hyperframe Template Structure catalog: Shader transitions (WebGL, 4s each): domain-warp-dissolve, ridged-burn, whip-pan, sdf-iris, ripple-waves, gravitational-lens, cinematic-zoom, chromatic-radial-split, glitch, swirl-vortex, thermal-distortion, flash-through-white, cross-warp-morph, light-leak CSS transition showcases: transitions-3d, transitions-blur, transitions-cover, transitions-destruction, transitions-dissolve, transitions-distortion, transitions-grid, transitions-light, transitions-mechanical, transitions-other, transitions-push, transitions-radial, transitions-scale, transitions-shader Registry now has 53 total items (42 blocks + 3 components + 8 examples).
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.
- Namespace @Keyframes grain-noise -> hf-grain-noise (avoids collision with warm-grain example) - Add ordering note to shimmer-sweep snippet (must appear after target elements) - Scope grid-pixelate-wipe timeline example to #grid-pixelate-overlay .grid-cell - Scope CSS in all 7 social overlay blocks under [data-composition-id] prefix
- Social overlay blocks now render directly as index.html (not via sub-composition wrapper) with dark background injected for transparent overlays - Fix Three.js CDN version in ascii-dashboard (0.171.0 removed three.min.js, use 0.160.0 which has the non-module build) - Simplify preview wrapper: standalone blocks with __timelines skip the sub-composition wrapper entirely, rendering exactly as authored
…GBColorSpace API) The ascii-dashboard block renders faintly in headless Chrome due to SwiftShader software WebGL producing dim output for the 3D-to-ASCII pipeline. Works correctly in a real browser with GPU acceleration.
- Catalog tab now appears right after Documentation (before Packages) - Added CardGroup banner on introduction page with 'Browse the Catalog' and 'Quick Start' cards to drive discovery
…t bg) Addresses Vance's review: subtitle had ~1.4:1 contrast ratio on #faf9f6 background, making it effectively invisible. Now uses #666 to match the key-text color.
jrusso1020
force-pushed
the
04-14-feat_registry_seed_transition_blocks_14_shader_14_css_showcase
branch
from
April 14, 2026 23:30
71c346d to
d7216eb
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Add 28 transition blocks from the Hyperframe Template Structure catalog, bringing the registry to 53 total items.
Shader transitions (14 blocks, WebGL, 4s each)
domain-warp-dissolve,ridged-burn,whip-pan,sdf-iris,ripple-waves,gravitational-lens,cinematic-zoom,chromatic-radial-split,glitch,swirl-vortex,thermal-distortion,flash-through-white,cross-warp-morph,light-leakCSS transition showcases (14 blocks, various durations)
transitions-3d,transitions-blur,transitions-cover,transitions-destruction,transitions-dissolve,transitions-distortion,transitions-grid,transitions-light,transitions-mechanical,transitions-other,transitions-push,transitions-radial,transitions-scale,transitions-shaderWhy
Phase D content accumulation. Transitions are the most-requested category for the catalog.
How
shader-showcase.zip, each a standalone HTML with WebGL shadersshowcase-bundle.zip, each a standalone showcase pagetransition+shaderorshowcasefor catalog groupingTest plan
registry-item.jsonvalidates for all blocksoxfmt --checkpasses