feat(registry): add vignette CSS component#843
Merged
Conversation
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.
`scripts/generate-catalog-previews.ts` still called `createCaptureSession` with `fps: 30` and `createRenderJob` with `fps: 24`. Since commit 5dcc89c ("feat(cli): accept ffmpeg-style rational fps") `CaptureOptions.fps` and `RenderConfig.fps` are `Fps = { num, den }` rationals — a plain number yields `options.fps.den === undefined` and: ```ts beginFrameIntervalMs: (1000 * options.fps.den) / Math.max(1, options.fps.num), // = (1000 * undefined) / Math.max(1, undefined) = NaN / NaN = NaN ``` After warmup, `session.beginFrameTimeTicks = (baseTickCount + 10) * NaN = NaN`, and the next `HeadlessExperimental.beginFrame` CDP call fails with: ``` Protocol error (HeadlessExperimental.beginFrame): Invalid parameters Failed to deserialize params.frameTimeTicks - BINDINGS: double value expected ``` This regression didn't surface earlier because the Catalog Previews workflow only re-renders items whose files changed in the PR, so existing components were never exercised against the new fps contract. The vignette addition is the first new item since the refactor. Fix: pass `{ num: 30, den: 1 }` and `{ num: 24, den: 1 }`.
8 tasks
miguel-heygen
approved these changes
May 14, 2026
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
…o legible Two surgical changes, both isolated to the catalog-previews flow: 1. `packages/studio/src/player/hooks/usePlaybackKeyboard.test.ts` PR #842 changed `seek()` to take `(time, { keepPlaying: true })` for the A/E shortcuts. The keyboard-layout tests added by #839 still asserted the single-arg form. Both landed on main without cross-checking, so `main` itself has been failing Test/Windows since. Update the two assertions to match the new signature. Same fix Miguel already authored on `feat/studio-preview-pasteboard-bg`. 2. `registry/components/vignette/demo.html` The original demo captured a frame where the vignette was at its weakest point — the effect was nearly invisible in the static preview used by docs. Reworked the demo so: - The backdrop is a layered "cinematic still" (warm key + teal rim + dark falloff) and includes a centered subject ("moon"), so the vignette has a focal point to frame. - Vignette starts soft (size 70%, alpha 0.35) and ramps to a dramatic cinematic vignette (size 26%, alpha 0.92) over 1.6s. - Peak intensity holds across t≈3.0s, which is exactly where the catalog script samples the thumbnail (`Math.min(3.0, duration*0.6)` with duration=5). - Breathing motion in t=3.4–5.2s gives the video loop visible life without disturbing the still frame.
Contributor
|
Sorry about the broken main. The signature change in #842 needed me to update the assertions added in #839, and I didn't cross-check before pushing the second PR. Lesson learned. The demo rework is great too. Capturing peak intensity at the script's captureTime is the right framing for a static preview, not breathing motion. Thanks for the takeover. |
Collaborator
Author
|
No worries @calcarazgre646 thanks for the contributions! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Takeover of #825 (community PR can't be merged because catalog additions are restricted to team members) plus the fix that was blocking its CI.
Two commits:
feat(registry): add vignette CSS component— original work by @calcarazgre646. Pure-CSS radial darkening overlay, 4 CSS custom properties (--vignette-color,--vignette-size,--vignette-edge,--vignette-shape),pointer-events: none,z-index: 90so it sits undergrain-overlay.fix(scripts): pass rational fps …— the CI fix.CI fix details
scripts/generate-catalog-previews.tsstill calledcreateCaptureSession({ fps: 30, … })andcreateRenderJob({ fps: 24, … }). Commit 5dcc89c (May 9) made both APIs acceptFps = { num, den }rationals — passing a plain number yields:After warmup,
session.beginFrameTimeTicks = (baseTickCount + 10) * NaN = NaN. The nextHeadlessExperimental.beginFrameCDP call fails with:— exactly what CI was showing on #825.
This is a regression in the script — not the vignette component. It didn't surface earlier because
catalog-previews.ymlonly re-renders changed items (path filter onregistry/blocks/**andregistry/components/**), so existing components were never exercised against the new fps contract. Vignette is the first new component since the refactor.Fix is two lines:
fps: { num: 30, den: 1 }andfps: { num: 24, den: 1 }.Test plan
Protocol error … position 23✓npx tsx scripts/generate-catalog-previews.ts --only vignette --skip-video→✓ vignette.png (246ms)✓npx tsx scripts/generate-catalog-previews.ts --only grain-overlay --skip-video→✓ grain-overlay.png (8611ms)✓npx tsx scripts/generate-catalog-pages.ts→ produces no diffs vs PR feat(registry): add vignette CSS component #825 (docs were already correct)bunx oxfmt scripts/generate-catalog-previews.tsandbunx oxlintcleanCredit
Vignette component authored by @calcarazgre646 — see commit authorship.
Closes #825.