heygen-com · calcarazgre646 · May 14, 2026
diff --git a/docs/catalog/components/vignette.mdx 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -63,6 +63,10 @@
       "name": "texture-mask-text",
       "type": "hyperframes:component"
     },
+    {
+      "name": "vignette",
+      "type": "hyperframes:component"
+    },
     {
       "name": "instagram-follow",
       "type": "hyperframes:block"