mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 00:56:23 +00:00
Carlos Alcaraz
0c74f4ed89
Pure-CSS radial darkening overlay that fills its positioned parent and pulls focus toward the center. Shape, size, and color are exposed as CSS custom properties (--vignette-shape, --vignette-size, --vignette-edge, --vignette-color), so a GSAP timeline can animate any of them — the snippet's header comment shows the pattern for fading the vignette in. The Components section currently has four entries; this fills the cinematic-cinematography gap a video editor expects out of the box without bundling any asset (the effect is a single radial-gradient). Default z-index 90 sits below grain-overlay (100) so grain reads on top of the darkened corners. Catalog page, registry index, and nav are regenerated via scripts/generate-catalog-pages.ts.
16 lines
502 B
JSON
16 lines
502 B
JSON
{
|
|
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
|
"name": "vignette",
|
|
"type": "hyperframes:component",
|
|
"title": "Vignette",
|
|
"description": "Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center",
|
|
"tags": ["vignette", "overlay", "cinematic", "effect"],
|
|
"files": [
|
|
{
|
|
"path": "vignette.html",
|
|
"target": "compositions/components/vignette.html",
|
|
"type": "hyperframes:snippet"
|
|
}
|
|
]
|
|
}
|