Skip to content

Commit e38cca3

Browse files
jbernard077claude
jbernard077
and
claude
committed
feat(registry): add mk-background — Apple-keynote procedural gradient background
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 parent af5f3e5 commit e38cca3

4 files changed

Lines changed: 300 additions & 0 deletions

File tree

‎docs/catalog/blocks/mk-background.mdx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: "Keynote Background"
3+
description: "Apple-keynote-style procedural gradient backdrop: two soft radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode"
4+
---
5+
6+
# Keynote Background
7+
8+
Apple-keynote-style procedural gradient backdrop: two soft radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode
9+
10+
`background` `gradient` `minimal` `professional` `keynote`
11+
12+
<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/blocks/mk-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.png" autoPlay muted loop playsInline />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add mk-background
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Block |
29+
| Dimensions | 1920×1080 |
30+
| Duration | 10s |
31+
32+
## Files
33+
34+
| File | Target | Type |
35+
| --- | --- | --- |
36+
| `mk-background.html` | `compositions/mk-background.html` | hyperframes:composition |
37+
38+
## Usage
39+
40+
After installing, add the block to your host composition:
41+
42+
```html
43+
<div data-composition-id="mk-background" data-composition-src="compositions/mk-background.html" data-start="0" data-duration="10" data-track-index="1" data-width="1920" data-height="1080"></div>
44+
```

‎registry/blocks/mk-background/mk-background.html‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
6+
<style>
7+
*,
8+
*::before,
9+
*::after {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
body {
15+
background: transparent;
16+
overflow: hidden;
17+
}
18+
#mk-bg-root {
19+
/* ---- mk tokens: override these in the host to re-skin the family ---- */
20+
--mk-font: "Inter", -apple-system, sans-serif;
21+
--mk-stage: #f5f5f7;
22+
--mk-base: #ffffff;
23+
--mk-blob-1: #ff7ac8;
24+
--mk-blob-2: #45d6c8;
25+
--mk-stage-dark: #000000;
26+
--mk-base-dark: #0a0a0c;
27+
--mk-blob-1-dark: #7d5cff;
28+
--mk-blob-2-dark: #2d1b69;
29+
--mk-radius-card: 40px;
30+
--mk-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
31+
32+
position: relative;
33+
width: 1920px;
34+
height: 1080px;
35+
overflow: hidden;
36+
background: var(--mk-stage);
37+
}
38+
#mk-bg-root.mk-dark {
39+
background: var(--mk-stage-dark);
40+
}
41+
/* The "Bar" — mKeynote's rounded-rect mask. Full-bleed by default,
42+
animatable down to a floating card over the stage. */
43+
#mk-bg-card {
44+
position: absolute;
45+
top: 0;
46+
left: 0;
47+
width: 1920px;
48+
height: 1080px;
49+
overflow: hidden;
50+
border-radius: 0;
51+
background: var(--mk-base);
52+
box-shadow: var(--mk-shadow);
53+
}
54+
.mk-dark #mk-bg-card {
55+
background: var(--mk-base-dark);
56+
}
57+
/* Soft radial blobs — the procedural "mesh gradient". Two oversized
58+
radial gradients with a long falloff, drifting slowly. */
59+
.mk-bg-blob {
60+
position: absolute;
61+
border-radius: 50%;
62+
will-change: transform;
63+
}
64+
#mk-bg-blob1 {
65+
background: radial-gradient(
66+
circle closest-side,
67+
var(--mk-blob-1) 0%,
68+
rgba(255, 255, 255, 0) 72%
69+
);
70+
}
71+
#mk-bg-blob2 {
72+
background: radial-gradient(
73+
circle closest-side,
74+
var(--mk-blob-2) 0%,
75+
rgba(255, 255, 255, 0) 72%
76+
);
77+
}
78+
.mk-dark #mk-bg-blob1 {
79+
background: radial-gradient(
80+
circle closest-side,
81+
var(--mk-blob-1-dark) 0%,
82+
rgba(0, 0, 0, 0) 72%
83+
);
84+
}
85+
.mk-dark #mk-bg-blob2 {
86+
background: radial-gradient(
87+
circle closest-side,
88+
var(--mk-blob-2-dark) 0%,
89+
rgba(0, 0, 0, 0) 72%
90+
);
91+
}
92+
</style>
93+
</head>
94+
<body>
95+
<div
96+
id="mk-bg-root"
97+
data-composition-id="mk-background"
98+
data-start="0"
99+
data-duration="10"
100+
data-width="1920"
101+
data-height="1080"
102+
>
103+
<div id="mk-bg-card">
104+
<div id="mk-bg-blob1" class="mk-bg-blob" data-layout-allow-overflow></div>
105+
<div id="mk-bg-blob2" class="mk-bg-blob" data-layout-allow-overflow></div>
106+
</div>
107+
<div
108+
id="mk-bg-drv"
109+
class="clip"
110+
data-start="0"
111+
data-duration="10"
112+
data-track-index="0"
113+
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
114+
></div>
115+
</div>
116+
<script>
117+
(function () {
118+
window.__timelines = window.__timelines || {};
119+
120+
/* ---- published parameters (mKeynote-style CONFIG) ---- */
121+
var CONFIG = {
122+
scheme: "light", // "light" | "dark"
123+
animationIn: true, // fade/settle entrance
124+
animationOut: true, // fade exit
125+
drift: true, // ambient blob motion
126+
// Soft BG blobs: center as fraction of canvas, radius in px
127+
blob1: { x: 0.28, y: 0.32, r: 950, opacity: 0.85 },
128+
blob2: { x: 0.74, y: 0.66, r: 1100, opacity: 0.8 },
129+
// Bar mask (rounded-rect card). demo:true plays full-bleed -> card -> full-bleed
130+
bar: {
131+
demo: true, // full-bleed -> rounded card -> full-bleed showcase
132+
x: 240,
133+
y: 140,
134+
width: 1440,
135+
height: 800,
136+
roundness: 40,
137+
},
138+
// Content opacity + frost only matter with footage beneath the block
139+
contentOpacity: 1,
140+
frostBlur: 0, // px; e.g. 24 for the frosted-card look over footage
141+
};
142+
143+
var W = 1920,
144+
H = 1080,
145+
DUR = 10;
146+
147+
var root = document.getElementById("mk-bg-root");
148+
var card = document.getElementById("mk-bg-card");
149+
var blob1 = document.getElementById("mk-bg-blob1");
150+
var blob2 = document.getElementById("mk-bg-blob2");
151+
152+
if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
153+
154+
function placeBlob(el, b) {
155+
var d = b.r * 2;
156+
el.style.width = d + "px";
157+
el.style.height = d + "px";
158+
el.style.left = b.x * W - b.r + "px";
159+
el.style.top = b.y * H - b.r + "px";
160+
el.style.opacity = String(b.opacity);
161+
}
162+
placeBlob(blob1, CONFIG.blob1);
163+
placeBlob(blob2, CONFIG.blob2);
164+
165+
card.style.opacity = String(CONFIG.contentOpacity);
166+
if (CONFIG.frostBlur > 0) {
167+
card.style.backdropFilter = "blur(" + CONFIG.frostBlur + "px) saturate(1.4)";
168+
}
169+
170+
var tl = gsap.timeline({ paused: true });
171+
172+
/* entrance — fade + blobs settle (power3, no bounce) */
173+
if (CONFIG.animationIn) {
174+
tl.from(root, { opacity: 0, duration: 0.7, ease: "power2.out" }, 0);
175+
tl.from([blob1, blob2], { scale: 1.14, duration: 1.2, ease: "power3.out" }, 0);
176+
}
177+
178+
/* ambient drift — slow sine yoyo, seek-safe timeline tweens */
179+
if (CONFIG.drift) {
180+
tl.to(
181+
blob1,
182+
{ x: 70, y: 42, duration: 2.35, ease: "sine.inOut", yoyo: true, repeat: 3 },
183+
0.3,
184+
);
185+
tl.to(
186+
blob2,
187+
{ x: -84, y: -36, duration: 2.35, ease: "sine.inOut", yoyo: true, repeat: 3 },
188+
0.3,
189+
);
190+
}
191+
192+
/* bar-mask demo: full-bleed -> rounded card over the stage -> full-bleed */
193+
if (CONFIG.bar.demo) {
194+
tl.to(
195+
card,
196+
{
197+
top: CONFIG.bar.y,
198+
left: CONFIG.bar.x,
199+
width: CONFIG.bar.width,
200+
height: CONFIG.bar.height,
201+
borderRadius: CONFIG.bar.roundness,
202+
duration: 1.1,
203+
ease: "power3.inOut",
204+
},
205+
3.8,
206+
);
207+
tl.to(
208+
card,
209+
{
210+
top: 0,
211+
left: 0,
212+
width: W,
213+
height: H,
214+
borderRadius: 0,
215+
duration: 1.0,
216+
ease: "power3.inOut",
217+
},
218+
7.6,
219+
);
220+
}
221+
222+
/* exit + hard kill */
223+
if (CONFIG.animationOut) {
224+
tl.to(root, { opacity: 0, duration: 0.4, ease: "power2.in" }, DUR - 0.45);
225+
}
226+
tl.set(root, { visibility: "hidden" }, DUR - 0.02);
227+
228+
window.__timelines["mk-background"] = tl;
229+
})();
230+
</script>
231+
</body>
232+
</html>

‎registry/blocks/mk-background/registry-item.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
3+
"name": "mk-background",
4+
"type": "hyperframes:block",
5+
"title": "Keynote Background",
6+
"description": "Apple-keynote-style procedural gradient backdrop: two soft radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode",
7+
"tags": ["background", "gradient", "minimal", "professional", "keynote"],
8+
"dimensions": {
9+
"width": 1920,
10+
"height": 1080
11+
},
12+
"duration": 10,
13+
"files": [
14+
{
15+
"path": "mk-background.html",
16+
"target": "compositions/mk-background.html",
17+
"type": "hyperframes:composition"
18+
}
19+
]
20+
}

‎registry/registry.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -563,6 +563,10 @@
563563
"name": "vfx-liquid-glass",
564564
"type": "hyperframes:block"
565565
},
566+
{
567+
"name": "mk-background",
568+
"type": "hyperframes:block"
569+
},
566570
{
567571
"name": "parallax-zoom",
568572
"type": "hyperframes:component"

0 commit comments

Comments
 (0)