From 0c74f4ed89953893290dafe6d58bf823e0d0b249 Mon Sep 17 00:00:00 2001
From: Carlos Alcaraz <193642530+calcarazgre646@users.noreply.github.com>
Date: Thu, 14 May 2026 00:35:15 -0300
Subject: [PATCH 1/3] feat(registry): add vignette CSS component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 docs/catalog/components/vignette.mdx          |  38 ++++++
 docs/docs.json                                |   3 +-
 docs/public/catalog-index.json                |  14 ++
 registry/components/vignette/demo.html        | 126 ++++++++++++++++++
 .../components/vignette/registry-item.json    |  15 +++
 registry/components/vignette/vignette.html    |  51 +++++++
 registry/registry.json                        |   4 +
 7 files changed, 250 insertions(+), 1 deletion(-)
 create mode 100644 docs/catalog/components/vignette.mdx
 create mode 100644 registry/components/vignette/demo.html
 create mode 100644 registry/components/vignette/registry-item.json
 create mode 100644 registry/components/vignette/vignette.html

diff --git a/docs/catalog/components/vignette.mdx b/docs/catalog/components/vignette.mdx
new file mode 100644
index 000000000..2a0d500a6
--- /dev/null
+++ b/docs/catalog/components/vignette.mdx
@@ -0,0 +1,38 @@
+---
+title: "Vignette"
+description: "Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center"
+---
+
+# Vignette
+
+Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center
+
+`vignette` `overlay` `cinematic` `effect`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add vignette
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `vignette.html` | `compositions/components/vignette.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/vignette.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/docs.json b/docs/docs.json
index ed4095bcd..f85035cec 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -180,7 +180,8 @@
               "catalog/components/grain-overlay",
               "catalog/components/grid-pixelate-wipe",
               "catalog/components/shimmer-sweep",
-              "catalog/components/texture-mask-text"
+              "catalog/components/texture-mask-text",
+              "catalog/components/vignette"
             ]
           },
           {
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 736651727..b25cab621 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -650,6 +650,20 @@
     "href": "/catalog/blocks/vfx-text-cursor",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png"
   },
+  {
+    "name": "vignette",
+    "type": "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"
+    ],
+    "href": "/catalog/components/vignette",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png"
+  },
   {
     "name": "vpn-youtube-spot",
     "type": "block",
diff --git a/registry/components/vignette/demo.html b/registry/components/vignette/demo.html
new file mode 100644
index 000000000..522284757
--- /dev/null
+++ b/registry/components/vignette/demo.html
@@ -0,0 +1,126 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Vignette — Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="vignette-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6"
+    >
+      <div class="demo-bg">
+        <div
+          class="demo-title"
+          style="font-size: 96px; font-weight: 700; color: #f4ecd6; opacity: 0"
+        >
+          Vignette
+        </div>
+        <div
+          class="demo-subtitle"
+          style="
+            font-size: 32px;
+            color: rgba(244, 236, 214, 0.7);
+            margin-top: 16px;
+            letter-spacing: 0.04em;
+            opacity: 0;
+          "
+        >
+          Pulls focus toward the center
+        </div>
+      </div>
+
+      <!-- The vignette component -->
+      <div
+        id="hf-vignette"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: 90;
+        "
+      ></div>
+
+      <style>
+        .demo-bg {
+          width: 1920px;
+          height: 1080px;
+          background: radial-gradient(circle at 30% 30%, #c98a4b, #6d3a18 60%, #2a160a 100%);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          font-family: "Inter", sans-serif;
+          position: relative;
+        }
+
+        #hf-vignette {
+          background: radial-gradient(
+            var(--vignette-shape, ellipse) at center,
+            transparent var(--vignette-size, 45%),
+            var(--vignette-color, rgba(0, 0, 0, 0.7)) var(--vignette-edge, 100%)
+          );
+        }
+      </style>
+
+      <script>
+        (function () {
+          const tl = gsap.timeline({ paused: true });
+
+          // Fade in title and subtitle
+          tl.to(".demo-title", { opacity: 1, y: -10, duration: 1, ease: "power3.out" }, 0.3);
+          tl.to(".demo-subtitle", { opacity: 1, y: -5, duration: 0.8, ease: "power3.out" }, 0.7);
+
+          // Fade vignette in from transparent
+          tl.fromTo(
+            "#hf-vignette",
+            { "--vignette-color": "rgba(0, 0, 0, 0)" },
+            {
+              "--vignette-color": "rgba(0, 0, 0, 0.75)",
+              duration: 1.5,
+              ease: "power2.out",
+            },
+            1.2,
+          );
+
+          // Breathe the size in and out
+          tl.to(
+            "#hf-vignette",
+            { "--vignette-size": "35%", duration: 1.0, ease: "sine.inOut" },
+            3.0,
+          );
+          tl.to(
+            "#hf-vignette",
+            { "--vignette-size": "45%", duration: 1.0, ease: "sine.inOut" },
+            4.0,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vignette-demo"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/vignette/registry-item.json b/registry/components/vignette/registry-item.json
new file mode 100644
index 000000000..71a11291c
--- /dev/null
+++ b/registry/components/vignette/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$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"
+    }
+  ]
+}
diff --git a/registry/components/vignette/vignette.html b/registry/components/vignette/vignette.html
new file mode 100644
index 000000000..18ba2d0d5
--- /dev/null
+++ b/registry/components/vignette/vignette.html
@@ -0,0 +1,51 @@
+<!--
+  Vignette — cinematic radial darkening overlay.
+
+  Usage: paste this snippet inside your composition's positioned stage.
+  The overlay covers the full viewport with pointer-events: none so it
+  sits on top of all content without blocking interaction.
+
+  Customize:
+  - --vignette-color: edge color and alpha (default rgba(0, 0, 0, 0.7))
+  - --vignette-size: where the transparent center ends (default 45%)
+  - --vignette-edge: where the color reaches its final stop (default 100%)
+  - --vignette-shape: ellipse | circle (default ellipse)
+  - z-index: defaults to 90 so grain-overlay (100) reads on top
+-->
+
+<div
+  id="hf-vignette"
+  style="
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 90;
+  "
+></div>
+
+<style>
+  #hf-vignette {
+    background: radial-gradient(
+      var(--vignette-shape, ellipse) at center,
+      transparent var(--vignette-size, 45%),
+      var(--vignette-color, rgba(0, 0, 0, 0.7)) var(--vignette-edge, 100%)
+    );
+  }
+</style>
+
+<!--
+  Timeline integration example (add to your composition's GSAP timeline):
+
+  // Fade the vignette in over the first second
+  tl.fromTo("#hf-vignette",
+    { "--vignette-color": "rgba(0, 0, 0, 0)" },
+    { "--vignette-color": "rgba(0, 0, 0, 0.7)", duration: 1, ease: "power2.out" },
+    0,
+  );
+
+  // Or breathe the size in and out (works with any easing)
+  tl.to("#hf-vignette", { "--vignette-size": "35%", duration: 1, ease: "sine.inOut" }, 2);
+-->
diff --git a/registry/registry.json b/registry/registry.json
index 9becb0bbd..415976368 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -63,6 +63,10 @@
       "name": "texture-mask-text",
       "type": "hyperframes:component"
     },
+    {
+      "name": "vignette",
+      "type": "hyperframes:component"
+    },
     {
       "name": "instagram-follow",
       "type": "hyperframes:block"

From 91f811d4d589435daff410143f7eea6aef36df0c Mon Sep 17 00:00:00 2001
From: James Russo <james.russo@heygen.com>
Date: Thu, 14 May 2026 21:02:21 +0000
Subject: [PATCH 2/3] fix(scripts): pass rational fps to capture/render in
 catalog previews
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`scripts/generate-catalog-previews.ts` still called `createCaptureSession`
with `fps: 30` and `createRenderJob` with `fps: 24`. Since commit 5dcc89c9
("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 }`.
---
 scripts/generate-catalog-previews.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/generate-catalog-previews.ts b/scripts/generate-catalog-previews.ts
index 32b62fda3..8e0889a2f 100644
--- a/scripts/generate-catalog-previews.ts
+++ b/scripts/generate-catalog-previews.ts
@@ -243,7 +243,7 @@ async function generateThumbnail(item: CatalogItem, projectDir: string): Promise
     const session = await createCaptureSession(fileServer.url, framesDir, {
       width,
       height,
-      fps: 30,
+      fps: { num: 30, den: 1 },
       format: "png",
     });
     await initializeSession(session);
@@ -276,7 +276,7 @@ async function generateVideo(item: CatalogItem, projectDir: string): Promise<voi
 
   const outMp4 = join(outDir, `${item.name}.mp4`);
   const job = createRenderJob({
-    fps: 24,
+    fps: { num: 24, den: 1 },
     quality: "draft",
     format: "mp4",
   });

From 73cb5a5b55a5dd5d56a7ab8d0da86ef9b2a21484 Mon Sep 17 00:00:00 2001
From: James Russo <james.russo@heygen.com>
Date: Thu, 14 May 2026 21:36:24 +0000
Subject: [PATCH 3/3] fix(studio,registry): unbreak studio test on main + make
 vignette demo legible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../player/hooks/usePlaybackKeyboard.test.ts  |   4 +-
 registry/components/vignette/demo.html        | 178 ++++++++++++++----
 2 files changed, 144 insertions(+), 38 deletions(-)

diff --git a/packages/studio/src/player/hooks/usePlaybackKeyboard.test.ts b/packages/studio/src/player/hooks/usePlaybackKeyboard.test.ts
index 679cf617e..ab6f7b623 100644
--- a/packages/studio/src/player/hooks/usePlaybackKeyboard.test.ts
+++ b/packages/studio/src/player/hooks/usePlaybackKeyboard.test.ts
@@ -93,7 +93,7 @@ describe("usePlaybackKeyboard — keyboard layout independence (#834)", () => {
       dispatch(keydown({ code: "KeyA", key: "a" }));
     });
 
-    expect(spies.seek).toHaveBeenCalledWith(1.5);
+    expect(spies.seek).toHaveBeenCalledWith(1.5, { keepPlaying: true });
   });
 
   it("'Jump to in-point' fires on AZERTY (physical KeyQ produces e.key='a')", () => {
@@ -104,7 +104,7 @@ describe("usePlaybackKeyboard — keyboard layout independence (#834)", () => {
       dispatch(keydown({ code: "KeyQ", key: "a" }));
     });
 
-    expect(spies.seek).toHaveBeenCalledWith(2.5);
+    expect(spies.seek).toHaveBeenCalledWith(2.5, { keepPlaying: true });
   });
 
   it("AZERTY 'A' physical key (e.key='q') no longer triggers in-point seek", () => {
diff --git a/registry/components/vignette/demo.html b/registry/components/vignette/demo.html
index 522284757..d96e7ef03 100644
--- a/registry/components/vignette/demo.html
+++ b/registry/components/vignette/demo.html
@@ -17,6 +17,7 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
+        background: #000;
       }
     </style>
   </head>
@@ -26,26 +27,22 @@
       data-composition-id="vignette-demo"
       data-width="1920"
       data-height="1080"
-      data-duration="6"
+      data-duration="5"
     >
+      <!-- Backdrop: a layered "cinematic still" — a warm key light at upper-left,
+           a teal rim light at lower-right, and a soft global glow. The vignette
+           overlay reads against this so the effect is unambiguous. -->
       <div class="demo-bg">
-        <div
-          class="demo-title"
-          style="font-size: 96px; font-weight: 700; color: #f4ecd6; opacity: 0"
-        >
-          Vignette
-        </div>
-        <div
-          class="demo-subtitle"
-          style="
-            font-size: 32px;
-            color: rgba(244, 236, 214, 0.7);
-            margin-top: 16px;
-            letter-spacing: 0.04em;
-            opacity: 0;
-          "
-        >
-          Pulls focus toward the center
+        <!-- Subject shapes — a stylized "moon" centered, with subtle haze rings
+             so the eye has something to anchor on. Without a subject the demo
+             looks like an abstract gradient and the vignette gets lost. -->
+        <div class="demo-haze haze-far"></div>
+        <div class="demo-haze haze-near"></div>
+        <div class="demo-subject"></div>
+
+        <div class="demo-text">
+          <div class="demo-title">VIGNETTE</div>
+          <div class="demo-subtitle">Frame the eye. Hold the moment.</div>
         </div>
       </div>
 
@@ -67,13 +64,101 @@
         .demo-bg {
           width: 1920px;
           height: 1080px;
-          background: radial-gradient(circle at 30% 30%, #c98a4b, #6d3a18 60%, #2a160a 100%);
+          background:
+            radial-gradient(
+              circle at 22% 28%,
+              rgba(255, 196, 130, 0.85),
+              rgba(255, 196, 130, 0) 38%
+            ),
+            radial-gradient(circle at 78% 78%, rgba(64, 175, 200, 0.55), rgba(64, 175, 200, 0) 42%),
+            radial-gradient(circle at 50% 50%, #3b2616 0%, #1a0e07 68%, #060403 100%);
+          position: relative;
+          overflow: hidden;
+          font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        }
+
+        .demo-haze {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          border-radius: 50%;
+          transform: translate(-50%, -50%) scale(1);
+          pointer-events: none;
+          opacity: 0;
+        }
+        .haze-far {
+          width: 1400px;
+          height: 1400px;
+          background: radial-gradient(
+            circle,
+            rgba(255, 220, 180, 0.18),
+            rgba(255, 220, 180, 0) 65%
+          );
+          filter: blur(40px);
+        }
+        .haze-near {
+          width: 900px;
+          height: 900px;
+          background: radial-gradient(
+            circle,
+            rgba(255, 240, 210, 0.32),
+            rgba(255, 240, 210, 0) 60%
+          );
+          filter: blur(20px);
+        }
+
+        .demo-subject {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          width: 520px;
+          height: 520px;
+          border-radius: 50%;
+          transform: translate(-50%, -50%);
+          background: radial-gradient(
+            circle at 35% 32%,
+            #fff6e0 0%,
+            #f4c47e 28%,
+            #b87a3f 62%,
+            #6b3d1c 88%,
+            #2a1607 100%
+          );
+          box-shadow:
+            inset -40px -40px 80px rgba(0, 0, 0, 0.55),
+            0 0 120px rgba(255, 180, 100, 0.35);
+          opacity: 0;
+        }
+
+        .demo-text {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 12%;
           display: flex;
           flex-direction: column;
-          justify-content: center;
           align-items: center;
-          font-family: "Inter", sans-serif;
-          position: relative;
+          gap: 14px;
+          pointer-events: none;
+          /* Sits above the subject in document order; below the vignette in z-index */
+          z-index: 5;
+        }
+
+        .demo-title {
+          font-size: 108px;
+          font-weight: 800;
+          letter-spacing: 0.18em;
+          color: #f6ecd0;
+          text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
+          opacity: 0;
+        }
+
+        .demo-subtitle {
+          font-size: 30px;
+          font-weight: 400;
+          letter-spacing: 0.32em;
+          text-transform: uppercase;
+          color: rgba(246, 236, 208, 0.72);
+          opacity: 0;
         }
 
         #hf-vignette {
@@ -89,32 +174,53 @@
         (function () {
           const tl = gsap.timeline({ paused: true });
 
-          // Fade in title and subtitle
-          tl.to(".demo-title", { opacity: 1, y: -10, duration: 1, ease: "power3.out" }, 0.3);
-          tl.to(".demo-subtitle", { opacity: 1, y: -5, duration: 0.8, ease: "power3.out" }, 0.7);
+          // Reveal the backdrop subject and haze first so the vignette has
+          // something to frame. Without a subject the effect reads as a flat
+          // dark gradient — uninteresting in a still preview.
+          tl.to(".haze-far", { opacity: 1, duration: 0.8, ease: "power2.out" }, 0.0);
+          tl.to(".haze-near", { opacity: 1, duration: 0.8, ease: "power2.out" }, 0.15);
+          tl.to(".demo-subject", { opacity: 1, scale: 1, duration: 1.0, ease: "power3.out" }, 0.1);
 
-          // Fade vignette in from transparent
+          // Title + subtitle settle in.
           tl.fromTo(
+            ".demo-title",
+            { opacity: 0, y: 18, letterSpacing: "0.32em" },
+            { opacity: 1, y: 0, letterSpacing: "0.18em", duration: 1.0, ease: "power3.out" },
+            0.6,
+          );
+          tl.to(".demo-subtitle", { opacity: 1, duration: 0.8, ease: "power3.out" }, 1.0);
+
+          // Vignette: start visibly soft (so viewers see the unframed scene),
+          // then ramp to a strong cinematic vignette and hold through the
+          // capture-time peak (~3.0s, picked to match the catalog thumbnail
+          // sampling at `Math.min(3.0, duration * 0.6)` for duration=5).
+          gsap.set("#hf-vignette", {
+            "--vignette-color": "rgba(0, 0, 0, 0.35)",
+            "--vignette-size": "70%",
+            "--vignette-edge": "100%",
+          });
+          tl.to(
             "#hf-vignette",
-            { "--vignette-color": "rgba(0, 0, 0, 0)" },
             {
-              "--vignette-color": "rgba(0, 0, 0, 0.75)",
-              duration: 1.5,
-              ease: "power2.out",
+              "--vignette-color": "rgba(0, 0, 0, 0.92)",
+              "--vignette-size": "26%",
+              duration: 1.6,
+              ease: "power2.inOut",
             },
-            1.2,
+            1.4,
           );
 
-          // Breathe the size in and out
+          // Gentle breathing for the video loop so the effect reads as alive,
+          // not static. Keeps the still-frame at peak intensity around t≈3s.
           tl.to(
             "#hf-vignette",
-            { "--vignette-size": "35%", duration: 1.0, ease: "sine.inOut" },
-            3.0,
+            { "--vignette-size": "32%", duration: 0.9, ease: "sine.inOut" },
+            3.4,
           );
           tl.to(
             "#hf-vignette",
-            { "--vignette-size": "45%", duration: 1.0, ease: "sine.inOut" },
-            4.0,
+            { "--vignette-size": "26%", duration: 0.9, ease: "sine.inOut" },
+            4.3,
           );
 
           window.__timelines = window.__timelines || {};