mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 06:30:03 +00:00
James Russo
b0f754a7f7
## What Three reusable effect components for the registry, each with a snippet HTML and companion `demo.html`: | Component | Description | |-----------|-------------| | `grain-overlay` | Animated film grain texture overlay (CSS keyframes, extracted from warm-grain example) | | `shimmer-sweep` | CSS gradient light sweep across text/elements, driven by GSAP custom property animation | | `grid-pixelate-wipe` | Grid-based dissolve transition — screen breaks into 16×9 squares that scale in/out with stagger | Establishes the `demo.html` convention in `CONTRIBUTING.md`. ## Why Phase B of the catalog plan — seed the first components in the registry. Components are effect snippets that get merged into existing compositions (vs. blocks which are standalone sub-compositions). ## How - **grain-overlay**: Extracted the grain texture pattern from the warm-grain example. Uses a 200% oversized tiled texture with `steps(1)` keyframe animation for the random-noise effect. - **shimmer-sweep**: Original implementation using CSS custom properties (`--shimmer-pos`) animated by GSAP. The gradient mask uses `mix-blend-mode: overlay` for a natural light sweep. Auto-injects `.shimmer-mask` elements into `.shimmer-sweep-target` wrappers. - **grid-pixelate-wipe**: Creates a 16×9 CSS Grid of cells, animated with GSAP stagger. Users drive `.grid-cell` `scale` directly in their timeline. Simplify review addressed: scoped `.grain-texture` under `#grain-overlay`, scoped `.grid-cell` under `#grid-pixelate-overlay`, removed `window.gridPixelateIn/Out` globals in favor of direct GSAP patterns. Each component ships a `demo.html` — a standalone composition that previews the effect and doubles as a fixture for the CI preview pipeline (PR 8). ## Test plan - [x] `hyperframes add grain-overlay` installs to `compositions/components/grain-overlay.html` - [x] `hyperframes add shimmer-sweep` installs to `compositions/components/shimmer-sweep.html` - [x] `hyperframes add grid-pixelate-wipe` installs to `compositions/components/grid-pixelate-wipe.html` - [x] All three return correct `--json` output with snippet and type info - [x] `registry-item.json` files validate against the JSON Schema - [x] `demo.html` files are self-contained with correct `data-composition-id` and `window.__timelines` registration - [x] `oxfmt --check` and `oxlint` pass on all files - [x] `CONTRIBUTING.md` documents the `demo.html` convention and registry item checklist
76 lines
1.5 KiB
HTML
76 lines
1.5 KiB
HTML
<!--
|
|
Grain Overlay — animated film grain texture.
|
|
|
|
Usage: paste this snippet into your composition's HTML.
|
|
The overlay covers the full viewport with pointer-events: none
|
|
so it sits on top of all content without blocking interaction.
|
|
|
|
Customize:
|
|
- opacity: adjust .grain-texture opacity (default 0.15)
|
|
- speed: change animation duration (default 0.5s)
|
|
- texture: swap the background URL for a different pattern
|
|
- z-index: adjust #grain-overlay z-index to layer correctly
|
|
-->
|
|
|
|
<div
|
|
id="grain-overlay"
|
|
style="
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
"
|
|
>
|
|
<div class="grain-texture"></div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes grain-noise {
|
|
0%,
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
10% {
|
|
transform: translate(-5%, -5%);
|
|
}
|
|
20% {
|
|
transform: translate(-10%, 5%);
|
|
}
|
|
30% {
|
|
transform: translate(5%, -10%);
|
|
}
|
|
40% {
|
|
transform: translate(-5%, 15%);
|
|
}
|
|
50% {
|
|
transform: translate(-10%, 5%);
|
|
}
|
|
60% {
|
|
transform: translate(15%, 0);
|
|
}
|
|
70% {
|
|
transform: translate(0, 10%);
|
|
}
|
|
80% {
|
|
transform: translate(-15%, 0);
|
|
}
|
|
90% {
|
|
transform: translate(10%, 5%);
|
|
}
|
|
}
|
|
|
|
#grain-overlay .grain-texture {
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: url("https://www.transparenttextures.com/patterns/natural-paper.png");
|
|
opacity: 0.15;
|
|
animation: grain-noise 0.5s steps(1) infinite;
|
|
}
|
|
</style>
|