> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.

# Feathered Spotlight

> Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets

# Feathered Spotlight

Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets

**Feathered Spotlight**

```html yt-feather-highlight.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <style>
      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background: transparent;
        overflow: hidden;
      }
      /* ---- yt-feather-highlight --------------------------------------------
         Spotlight part of the frame: a dim layer with a feathered ellipse
         hole. The hole's position/size are CSS variables, so the helpers
         tween them directly (GSAP animates CSS vars). */
      .yt-hl {
        --yt-hl-x: 50%;
        --yt-hl-y: 50%;
        --yt-hl-rx: 22%;
        --yt-hl-ry: 26%;
        --yt-hl-dim: 0.55;

        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        background: rgba(6, 8, 12, var(--yt-hl-dim));
        -webkit-mask-image: radial-gradient(
          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),
          transparent 0%,
          transparent 52%,
          black 88%
        );
        mask-image: radial-gradient(
          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),
          transparent 0%,
          transparent 52%,
          black 88%
        );
      }
      /* self-preview stand-in scene (not part of the snippet) */
      #yt-hl-scene {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #2a7fff 0%, #7d5cff 100%);
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-family: "Inter", ui-sans-serif, sans-serif;
        font-weight: 700;
        font-size: 64px;
        color: rgba(255, 255, 255, 0.92);
      }
      #yt-hl-scene .box {
        width: 420px;
        height: 300px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.16);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <!-- Self-preview wrapper. WIRING: copy the .yt-hl CSS and drop
         <div class="yt-hl" id="yt-my-hl"></div> ABOVE the content to spotlight
         (same region). Then:

           ytHighlightIn(tl, "#yt-my-hl", 3.0, { x: "28%", y: "50%", rx: "20%", ry: "30%" });
           ytHighlightTo(tl, "#yt-my-hl", 5.0, { x: "72%" }, 0.8);   // glide to the next target
           ytHighlightOut(tl, "#yt-my-hl", 8.0);
    -->
    <div
      id="yt-hl-root"
      data-composition-id="yt-feather-highlight"
      data-start="0"
      data-duration="5"
      data-width="1920"
      data-height="1080"
    >
      <div id="yt-hl-scene">
        <div class="box">A</div>
        <div class="box">B</div>
      </div>
      <div class="yt-hl" id="yt-hl-demo"></div>
      <div
        id="yt-hl-drv"
        class="clip"
        data-start="0"
        data-duration="5"
        data-track-index="0"
        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
      ></div>
    </div>
    <script>
      (function () {
        window.__timelines = window.__timelines || {};

        // ---- copy these helpers into the host script ----
        window.ytHighlightIn = function (tl, target, at, opts) {
          opts = opts || {};
          var vars = { opacity: 1, duration: 0.5, ease: "power2.out" };
          if (opts.x !== undefined) vars["--yt-hl-x"] = opts.x;
          if (opts.y !== undefined) vars["--yt-hl-y"] = opts.y;
          if (opts.rx !== undefined) vars["--yt-hl-rx"] = opts.rx;
          if (opts.ry !== undefined) vars["--yt-hl-ry"] = opts.ry;
          gsap.set(target, {
            "--yt-hl-x": opts.x !== undefined ? opts.x : "50%",
            "--yt-hl-y": opts.y !== undefined ? opts.y : "50%",
            "--yt-hl-rx": opts.rx !== undefined ? opts.rx : "22%",
            "--yt-hl-ry": opts.ry !== undefined ? opts.ry : "26%",
          });
          tl.to(target, { opacity: 1, duration: 0.5, ease: "power2.out" }, at);
        };
        window.ytHighlightTo = function (tl, target, at, opts, dur) {
          opts = opts || {};
          var vars = { duration: dur === undefined ? 0.8 : dur, ease: "power2.inOut" };
          if (opts.x !== undefined) vars["--yt-hl-x"] = opts.x;
          if (opts.y !== undefined) vars["--yt-hl-y"] = opts.y;
          if (opts.rx !== undefined) vars["--yt-hl-rx"] = opts.rx;
          if (opts.ry !== undefined) vars["--yt-hl-ry"] = opts.ry;
          tl.to(target, vars, at);
        };
        window.ytHighlightOut = function (tl, target, at) {
          tl.to(target, { opacity: 0, duration: 0.4, ease: "power2.in" }, at);
        };

        // Self-preview timeline: spotlight box A, glide to box B, release.
        var tl = gsap.timeline({ paused: true });
        window.ytHighlightIn(tl, "#yt-hl-demo", 0.5, { x: "26%", y: "50%", rx: "17%", ry: "24%" });
        window.ytHighlightTo(tl, "#yt-hl-demo", 2.2, { x: "74%" }, 0.9);
        window.ytHighlightOut(tl, "#yt-hl-demo", 4.2);
        tl.set("#yt-hl-root", { visibility: "hidden" }, 4.98);
        window.__timelines["yt-feather-highlight"] = tl;
      })();
    </script>
  </body>
</html>
```

Copy npx hyperframes add yt-feather-highlight to the clipboard

That writes one file: `compositions/components/yt-feather-highlight.html`.

## Paste it into your composition

Open `compositions/components/yt-feather-highlight.html` and copy what is inside into your own composition.

A component has no size or duration of its own. It takes both from the composition
you paste it into.

{/* hf:generated-footer */}

Tagged `highlight` `spotlight` `effect` `overlay`.

## Related topics

* [Browse the complete Catalog](/catalog.md)
* [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md)
* [Put blocks together into one video](/concepts/compositions.md)
