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
39 lines
1.0 KiB
Plaintext
39 lines
1.0 KiB
Plaintext
---
|
|
title: "Grain Overlay"
|
|
description: "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition"
|
|
---
|
|
|
|
# Grain Overlay
|
|
|
|
Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition
|
|
|
|
`texture` `grain` `overlay` `film`
|
|
|
|
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/components/grain-overlay.mp4" poster="/images/catalog/components/grain-overlay.png" autoPlay muted loop playsInline />
|
|
|
|
## Install
|
|
|
|
<CodeGroup>
|
|
|
|
```bash Terminal
|
|
npx hyperframes add grain-overlay
|
|
```
|
|
|
|
</CodeGroup>
|
|
|
|
## Details
|
|
|
|
| Property | Value |
|
|
| --- | --- |
|
|
| Type | Component |
|
|
|
|
## Files
|
|
|
|
| File | Target | Type |
|
|
| --- | --- | --- |
|
|
| `grain-overlay.html` | `compositions/components/grain-overlay.html` | hyperframes:snippet |
|
|
|
|
## Usage
|
|
|
|
Open `compositions/components/grain-overlay.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
|