feat(registry): add vignette CSS component

[calcarazgre646]

Summary

Adds vignette — a pure-CSS radial darkening overlay — to the components catalog. It absolutely fills its positioned parent with pointer-events: none, so it sits over any composition without intercepting interaction, and uses a single radial-gradient to pull focus toward the center.

The intent matches the bar set in #779 and the team discussion on #712: a small, generic, model-free primitive in the spirit of a shadcn-style component. No bundled assets, no Three.js, no hardcoded theme.

Why this fills a real gap

Components currently has four entries (grain-overlay, shimmer-sweep, grid-pixelate-wipe, texture-mask-text). None covers the cinematic edge-darken that virtually every cinematographic edit reaches for. With this component a user can do:

<!-- inside the composition stage -->
<div id="hf-vignette" style="--vignette-color: rgba(10,5,20,0.85); --vignette-size: 35%"></div>

…and get a configurable cinematic vignette in two lines.

API

Customizable via CSS custom properties on #hf-vignette (or any ancestor):

Custom property	Default	Purpose
--vignette-color	rgba(0, 0, 0, 0.7)	Color (and alpha) of the darkened edges
--vignette-size	45%	Where the transparent center ends — smaller eats more frame
--vignette-edge	100%	Where the color reaches its final stop — pull inward for a sharper falloff
--vignette-shape	ellipse	ellipse | circle

All four properties can be tweened from a GSAP timeline; the snippet's header comment shows the standard "fade-in over 1s" pattern. Default z-index: 90 sits below grain-overlay (100) so grain reads on top of the darkened corners — inline-overridable if a different layer order is needed.

Files

• registry/components/vignette/registry-item.json — manifest
• registry/components/vignette/vignette.html — the snippet (~50 lines incl. the documentation comment)
• registry/components/vignette/demo.html — standalone composition that fades the vignette in, then breathes the --vignette-size once
• registry/registry.json — index entry
• docs/catalog/components/vignette.mdx, docs/docs.json, docs/public/catalog-index.json — regenerated via scripts/generate-catalog-pages.ts

Test plan

• npx tsx scripts/generate-catalog-previews.ts --only vignette --skip-video → renders cleanly (564 ms), 1920×1080 PNG matches the intent.
• npx tsx scripts/generate-catalog-pages.ts → produces the MDX page, updates docs.json and catalog-index.json with no other diffs.
• npx hyperframes lint against a temp project that includes the snippet → 0 errors, 0 snippet-side warnings.
• npx hyperframes validate against the same project → "No console errors · 5 text elements pass WCAG AA".
• cd docs && npx mint validate → build validation passed.
• cd docs && npx mint broken-links → no broken links.
• npx tsx scripts/sync-schemas.ts --check → registry + registry-item schemas in sync.
• Conventional commit + lefthook commitlint pass.

Happy to adjust the API surface (rename properties, drop a knob, reframe the default z-index) or the demo timing if the team wants something different.

[jrusso1020]

Thanks @calcarazgre646 — really nice addition. Our catalog additions need to land via a team member, and the CI failure here is actually a pre-existing regression in our preview script (it still passes fps: 30 to createCaptureSession after #commit-5dcc89c9 made fps a rational {num, den}, which produces NaN for beginFrameTimeTicks and breaks the CDP beginFrame call). Other catalog items don't trip it because the workflow only re-renders changed items.

I've taken over in #843 — your component commit is preserved with full authorship credit, and I added a one-commit fix for the rational-fps regression on top. Will close this once #843 lands. 🙏