mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
James Russo
9943091247
## 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-leak` ### CSS 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-shader` ## Why Phase D content accumulation. Transitions are the most-requested category for the catalog. ## How - Shader transitions extracted from `shader-showcase.zip`, each a standalone HTML with WebGL shaders - CSS transitions extracted from `showcase-bundle.zip`, each a standalone showcase page - All tagged with `transition` + `shader` or `showcase` for catalog grouping - Preview thumbnails generated for all 28 blocks - Catalog pages + index regenerated ## Test plan - [x] All 28 blocks produce preview thumbnails - [x] `registry-item.json` validates for all blocks - [x] Catalog pages generated (45 total items in catalog-index.json) - [x] `oxfmt --check` passes
81 lines
1.9 KiB
HTML
Vendored
81 lines
1.9 KiB
HTML
Vendored
<!--
|
||
Grid Pixelate Wipe — transition effect.
|
||
|
||
Usage: place this overlay in your composition. To transition between
|
||
scenes, animate .grid-cell scale from 0→1 (cover) then 1→0 (reveal)
|
||
using GSAP stagger with a "from" pattern.
|
||
|
||
Customize:
|
||
- COLS / ROWS: grid density (default 16×9), edit in the script below
|
||
- --grid-color: cell fill color (default black)
|
||
- Stagger "from": "center" for radial, "edges" for inward, "random" for scatter
|
||
-->
|
||
|
||
<div
|
||
id="grid-pixelate-overlay"
|
||
style="
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: 999;
|
||
display: grid;
|
||
"
|
||
></div>
|
||
|
||
<style>
|
||
#grid-pixelate-overlay {
|
||
--grid-color: black;
|
||
}
|
||
|
||
#grid-pixelate-overlay .grid-cell {
|
||
background: var(--grid-color);
|
||
transform: scale(0);
|
||
transform-origin: center center;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
(function () {
|
||
const COLS = 16;
|
||
const ROWS = 9;
|
||
const overlay = document.getElementById("grid-pixelate-overlay");
|
||
if (!overlay) return;
|
||
|
||
overlay.style.gridTemplateColumns = `repeat(${COLS}, 1fr)`;
|
||
overlay.style.gridTemplateRows = `repeat(${ROWS}, 1fr)`;
|
||
|
||
for (let i = 0; i < COLS * ROWS; i++) {
|
||
const cell = document.createElement("div");
|
||
cell.className = "grid-cell";
|
||
overlay.appendChild(cell);
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
<!--
|
||
Timeline integration example:
|
||
|
||
// Cover screen with grid (transition out of scene A)
|
||
tl.to("#grid-pixelate-overlay .grid-cell", {
|
||
scale: 1,
|
||
duration: 0.6,
|
||
stagger: { amount: 0.6, from: "center" },
|
||
ease: "power2.inOut",
|
||
}, 3.0);
|
||
|
||
// Swap scene content at midpoint
|
||
tl.set("#scene-a", { opacity: 0 }, 3.6);
|
||
tl.set("#scene-b", { opacity: 1 }, 3.6);
|
||
|
||
// Reveal scene B by removing grid
|
||
tl.to("#grid-pixelate-overlay .grid-cell", {
|
||
scale: 0,
|
||
duration: 0.6,
|
||
stagger: { amount: 0.6, from: "edges" },
|
||
ease: "power2.inOut",
|
||
}, 3.6);
|
||
-->
|