mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-02 12:08:50 +00:00
This reverts commit 3b53bfd2f7.
This commit is contained in:
Miguel Ángel
@@ -3,13 +3,13 @@ title: "Rounded Media Grid"
|
||||
description: "N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle"
|
||||
---
|
||||
|
||||
import { InstallCommand } from "/snippets/install-command.jsx";
|
||||
|
||||
<iframe src="/public/catalog/preview/blocks/mk-placeholder-grid.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Rounded Media Grid preview" />
|
||||
<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-placeholder-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<InstallCommand command="npx hyperframes add mk-placeholder-grid" />
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-placeholder-grid
|
||||
```
|
||||
|
||||
That writes one file: `compositions/mk-placeholder-grid.html`.
|
||||
|
||||
@@ -32,248 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
||||
Move it in time with `data-start`. Put it on a different timeline row with
|
||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||
|
||||
## Source
|
||||
|
||||
<Accordion title={`mk-placeholder-grid.html`}>
|
||||
|
||||
```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;
|
||||
}
|
||||
#mk-pg-root {
|
||||
/* ---- mk tokens: override in the host to re-skin the family ---- */
|
||||
--mk-font: "Inter", -apple-system, sans-serif;
|
||||
--mk-ink-dim: #6e6e73;
|
||||
--mk-paper: #ffffff;
|
||||
--mk-blob-1: #ff7ac8;
|
||||
--mk-blob-2: #45d6c8;
|
||||
--mk-accent-dark: #7d5cff;
|
||||
--mk-blob-1-soft: #ffd3ec;
|
||||
--mk-blob-2-soft: #d9fff8;
|
||||
--mk-accent-dark-soft: #cabdff;
|
||||
--mk-well-warm: #ffb86b;
|
||||
--mk-well-warm-soft: #ffe3c2;
|
||||
--mk-well-sky: #5cb8ff;
|
||||
--mk-well-sky-soft: #cfe9ff;
|
||||
--mk-well-rose: #ff8f8f;
|
||||
--mk-well-rose-soft: #ffd6d6;
|
||||
--mk-well-num: rgba(255, 255, 255, 0.9);
|
||||
--mk-radius-card: 40px;
|
||||
--mk-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
|
||||
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent; /* pair with mk-background beneath for the gradient backdrop */
|
||||
}
|
||||
.mk-pg-cell {
|
||||
position: absolute;
|
||||
border-radius: var(--mk-radius-card);
|
||||
overflow: hidden;
|
||||
background: var(--mk-paper);
|
||||
box-shadow: var(--mk-shadow);
|
||||
}
|
||||
.mk-pg-media {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
/* empty drop-zone well: soft gradient + index numeral */
|
||||
.mk-pg-well {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.mk-pg-well-num {
|
||||
font-family: var(--mk-font);
|
||||
font-weight: 600;
|
||||
font-size: 88px;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--mk-well-num);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="mk-pg-root"
|
||||
data-composition-id="mk-placeholder-grid"
|
||||
data-start="0"
|
||||
data-duration="8"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div id="mk-pg-grid"></div>
|
||||
<div
|
||||
id="mk-pg-drv"
|
||||
class="clip"
|
||||
data-start="0"
|
||||
data-duration="8"
|
||||
data-track-index="0"
|
||||
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
|
||||
></div>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
window.__timelines = window.__timelines || {};
|
||||
|
||||
/* ---- published parameters (inspector-style CONFIG) ---- */
|
||||
var CONFIG = {
|
||||
// no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
|
||||
layout: "1+2", // "2up" | "3up" | "4up" | "3x2" | "1+2" (hero left + two stacked)
|
||||
margin: 120, // outer margin, px
|
||||
gap: 40, // px between cells
|
||||
radius: 40, // cell corner radius (rounded-edge look)
|
||||
// One entry per cell (in layout order). src: image path, or null for a
|
||||
// styled drop-zone well. insideScale: media scale inside the mask —
|
||||
// an "inside scale" convention (1 = cover-fit).
|
||||
cells: [
|
||||
{ src: null, insideScale: 1 },
|
||||
{ src: null, insideScale: 1 },
|
||||
{ src: null, insideScale: 1 },
|
||||
],
|
||||
kenBurns: true, // slow media settle inside the mask
|
||||
stagger: 0.15, // "box, box, box" entrance
|
||||
animationIn: true,
|
||||
animationOut: true,
|
||||
};
|
||||
|
||||
/* decorative fills for empty wells (cycled) */
|
||||
var WELL_FILLS = [
|
||||
"linear-gradient(135deg, var(--mk-blob-1) 0%, var(--mk-blob-1-soft) 100%)",
|
||||
"linear-gradient(135deg, var(--mk-blob-2) 0%, var(--mk-blob-2-soft) 100%)",
|
||||
"linear-gradient(135deg, var(--mk-accent-dark) 0%, var(--mk-accent-dark-soft) 100%)",
|
||||
"linear-gradient(135deg, var(--mk-well-warm) 0%, var(--mk-well-warm-soft) 100%)",
|
||||
"linear-gradient(135deg, var(--mk-well-sky) 0%, var(--mk-well-sky-soft) 100%)",
|
||||
"linear-gradient(135deg, var(--mk-well-rose) 0%, var(--mk-well-rose-soft) 100%)",
|
||||
];
|
||||
|
||||
var W = 1920,
|
||||
H = 1080,
|
||||
DUR = 8;
|
||||
|
||||
function rects(layout, m, g) {
|
||||
var iw = W - 2 * m,
|
||||
ih = H - 2 * m;
|
||||
function grid(cols, rows) {
|
||||
var cw = (iw - (cols - 1) * g) / cols,
|
||||
ch = (ih - (rows - 1) * g) / rows,
|
||||
out = [];
|
||||
for (var r = 0; r < rows; r++)
|
||||
for (var c = 0; c < cols; c++)
|
||||
out.push({ x: m + c * (cw + g), y: m + r * (ch + g), w: cw, h: ch });
|
||||
return out;
|
||||
}
|
||||
if (layout === "2up") return grid(2, 1);
|
||||
if (layout === "3up") return grid(3, 1);
|
||||
if (layout === "4up") return grid(2, 2);
|
||||
if (layout === "3x2") return grid(3, 2);
|
||||
/* "1+2": hero left (58%), two stacked right */
|
||||
var w1 = Math.round((iw - g) * 0.58),
|
||||
w2 = iw - g - w1,
|
||||
h2 = (ih - g) / 2;
|
||||
return [
|
||||
{ x: m, y: m, w: w1, h: ih },
|
||||
{ x: m + w1 + g, y: m, w: w2, h: h2 },
|
||||
{ x: m + w1 + g, y: m + h2 + g, w: w2, h: h2 },
|
||||
];
|
||||
}
|
||||
|
||||
var root = document.getElementById("mk-pg-root");
|
||||
var grid = document.getElementById("mk-pg-grid");
|
||||
var R = rects(CONFIG.layout, CONFIG.margin, CONFIG.gap);
|
||||
|
||||
var cells = [],
|
||||
medias = [];
|
||||
R.forEach(function (r, i) {
|
||||
var conf = CONFIG.cells[i] || {};
|
||||
var cell = document.createElement("div");
|
||||
cell.id = "mk-pg-cell-" + i;
|
||||
cell.className = "mk-pg-cell";
|
||||
cell.style.left = r.x + "px";
|
||||
cell.style.top = r.y + "px";
|
||||
cell.style.width = r.w + "px";
|
||||
cell.style.height = r.h + "px";
|
||||
cell.style.borderRadius = CONFIG.radius + "px";
|
||||
|
||||
var inner;
|
||||
if (conf.src) {
|
||||
inner = document.createElement("img");
|
||||
inner.className = "mk-pg-media";
|
||||
inner.src = conf.src;
|
||||
} else {
|
||||
inner = document.createElement("div");
|
||||
inner.className = "mk-pg-well";
|
||||
inner.style.background = WELL_FILLS[i % WELL_FILLS.length];
|
||||
var num = document.createElement("span");
|
||||
num.className = "mk-pg-well-num";
|
||||
num.textContent = String(i + 1);
|
||||
inner.appendChild(num);
|
||||
}
|
||||
inner.id = "mk-pg-inner-" + i;
|
||||
inner.setAttribute("data-layout-allow-overflow", ""); // ken-burns scales past the mask by design
|
||||
cell.appendChild(inner);
|
||||
grid.appendChild(cell);
|
||||
cells.push(cell);
|
||||
medias.push(inner);
|
||||
|
||||
gsap.set(inner, { scale: conf.insideScale || 1 });
|
||||
});
|
||||
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
cells.forEach(function (cell, i) {
|
||||
var t0 = (CONFIG.animationIn ? 0.3 : 0) + i * CONFIG.stagger;
|
||||
|
||||
if (CONFIG.animationIn) {
|
||||
gsap.set(cell, { opacity: 0, scale: 0.92, y: 28 });
|
||||
tl.to(cell, { opacity: 1, scale: 1, y: 0, duration: 0.65, ease: "power3.out" }, t0);
|
||||
}
|
||||
|
||||
if (CONFIG.kenBurns) {
|
||||
var base = (CONFIG.cells[i] && CONFIG.cells[i].insideScale) || 1;
|
||||
tl.fromTo(
|
||||
medias[i],
|
||||
{ scale: base * 1.06 },
|
||||
{ scale: base, duration: DUR - t0 - 0.6, ease: "sine.out" },
|
||||
t0,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
/* exit + hard kill */
|
||||
if (CONFIG.animationOut) {
|
||||
tl.to(grid, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
|
||||
}
|
||||
tl.set(root, { visibility: "hidden" }, DUR - 0.02);
|
||||
|
||||
window.__timelines["mk-placeholder-grid"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</Accordion>
|
||||
|
||||
{/* hf:generated-footer */}
|
||||
|
||||
Tagged `placeholder` `media` `grid` `minimal`.
|
||||
|
||||
Reference in New Issue
Block a user