mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
feat(registry): add yt-feather-highlight — feathered spotlight
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jbernard077
co-authored by
Claude Fable 5
Claude Fable 5
parent
8948612359
commit
4e0a7dda88
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Feathered Spotlight"
|
||||
description: "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
|
||||
|
||||
`highlight` `spotlight` `effect` `overlay`
|
||||
|
||||
<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/yt-feather-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-feather-highlight.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add yt-feather-highlight
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Component |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `yt-feather-highlight.html` | `compositions/components/yt-feather-highlight.html` | hyperframes:snippet |
|
||||
|
||||
## Usage
|
||||
|
||||
Read the installed file and copy its CSS, markup pattern, and helper functions into your host composition — the parent timeline owns all timing. The file's header comment documents the wiring calls.
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "yt-feather-highlight",
|
||||
"type": "hyperframes:component",
|
||||
"title": "Feathered Spotlight",
|
||||
"description": "Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets",
|
||||
"tags": [
|
||||
"highlight",
|
||||
"spotlight",
|
||||
"effect",
|
||||
"overlay"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "yt-feather-highlight.html",
|
||||
"target": "compositions/components/yt-feather-highlight.html",
|
||||
"type": "hyperframes:snippet"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
<!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>
|
||||
@@ -594,6 +594,10 @@
|
||||
{
|
||||
"name": "yt-avatar-pip",
|
||||
"type": "hyperframes:component"
|
||||
},
|
||||
{
|
||||
"name": "yt-feather-highlight",
|
||||
"type": "hyperframes:component"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user