> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-feat-ad94-tune-scroll-cue.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Catalog
> Browse reusable HyperFrames scenes, transitions, captions, overlays, effects, and components.
export const CatalogGallery = ({catalog, initialGroup = "", initialSection = ""}) => {
const PLAYER_SCRIPT_URL = 'https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js';
const REST_SECONDS = 3;
const MAX_DOM_PLAYERS = 24;
const MAX_WEBGL_PLAYERS = 1;
const READY_TIMEOUT_MS = 6000;
const revealWhenPainted = (player, reveal) => {
const paint = () => requestAnimationFrame(reveal);
if (player.assetsReady) paint(); else player.addEventListener('assetsready', paint, {
once: true
});
};
async function ensurePlayerDefined() {
if (customElements.get('hyperframes-player')) return;
if (!window.__hfDocsPlayerLoading) {
window.__hfDocsPlayerLoading = new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = PLAYER_SCRIPT_URL;
script.onload = resolve;
script.onerror = () => {
script.remove();
delete window.__hfDocsPlayerLoading;
reject(new Error('Player unavailable'));
};
document.head.appendChild(script);
});
}
await window.__hfDocsPlayerLoading;
await customElements.whenDefined('hyperframes-player');
}
const MotionWord = useMemo(() => function MotionWord() {
const root = useRef(null);
useEffect(() => {
const node = root.current;
const media = matchMedia('(prefers-reduced-motion: reduce)');
let observer, frame = 0, animations = [];
let visible = true, previous = 0, elapsed = 0;
const circle = [0, -10, 5.52, -10, 10, -5.52, 10, 0, 10, 5.52, 5.52, 10, 0, 10, -5.52, 10, -10, 5.52, -10, 0, -10, -5.52, -5.52, -10, 0, -10];
const spark = [0, -17, 1.6, -7, 7, -1.6, 17, 0, 7, 1.6, 1.6, 7, 0, 17, -1.6, 7, -7, 1.6, -17, 0, -7, -1.6, -1.6, -7, 0, -17];
const pathAt = m => {
const a = circle.map((n, i) => n + (spark[i] - n) * m);
return 'M' + a.slice(0, 2).join(' ') + 'C' + a.slice(2).join(' ') + 'Z';
};
const setup = () => {
cancelAnimationFrame(frame);
animations.forEach(a => a.cancel());
animations = [];
node.style.setProperty('--phase', 0);
node.querySelector('.dot').setAttribute('d', pathAt(0));
if (media.matches) return;
const duration = 5600;
node.querySelectorAll('.ch').forEach((letter, i) => {
animations.push(letter.animate([{
transform: 'translateY(0) rotate(0) skewX(0)',
offset: 0
}, {
transform: `translateY(-18%) rotate(${i % 2 ? 6 : -6}deg)`,
offset: .05
}, {
transform: 'translateY(4%) rotate(0)',
offset: .12
}, {
transform: 'translateY(-2%)',
offset: .19
}, {
transform: 'translateY(0) skewX(0)',
offset: .3
}, {
transform: 'skewX(0)',
offset: .43
}, {
transform: 'skewX(-12deg)',
offset: .47
}, {
transform: 'skewX(2deg)',
offset: .56
}, {
transform: 'skewX(0)',
offset: .7
}, {
transform: 'translateY(0) rotate(0) skewX(0)',
offset: 1
}], {
duration,
delay: i * 60,
iterations: Infinity,
easing: 'ease-in-out'
}));
});
animations.push(node.querySelector('.jump').animate([{
transform: 'translateY(0)'
}, {
transform: 'translateY(-45px)',
offset: .09
}, {
transform: 'translateY(0)',
offset: .18
}, {
transform: 'translateY(-7px)',
offset: .22
}, {
transform: 'translateY(0)',
offset: .27
}, {
transform: 'translateY(0)'
}], {
duration,
iterations: Infinity,
easing: 'ease-in-out'
}));
animations.push(node.querySelector('.ring').animate([{
opacity: 0,
transform: 'scale(.6)'
}, {
opacity: 0,
transform: 'scale(.6)',
offset: .13
}, {
opacity: .9,
transform: 'scale(.6)',
offset: .14
}, {
opacity: 0,
transform: 'scale(3.8)',
offset: .29
}, {
opacity: 0
}], {
duration,
iterations: Infinity
}));
const line = node.querySelector('.sq path');
line.style.strokeDasharray = '220';
animations.push(line.animate([{
strokeDashoffset: 220
}, {
strokeDashoffset: 220,
offset: .43
}, {
strokeDashoffset: 0,
offset: .58
}, {
strokeDashoffset: 0,
offset: .72
}, {
strokeDashoffset: -220,
offset: .84
}, {
strokeDashoffset: -220
}], {
duration,
iterations: Infinity,
easing: 'ease-in-out'
}));
const tick = now => {
if (visible && !document.hidden) {
elapsed += previous ? Math.min(now - previous, 50) : 0;
const t = elapsed % duration / duration;
let morph = t < .43 ? 0 : t < .51 ? (t - .43) / .08 : t < .69 ? 1 : t < .77 ? 1 - (t - .69) / .08 : 0;
morph = morph * morph * (3 - 2 * morph);
const dot = node.querySelector('.dot');
dot.setAttribute('d', pathAt(morph));
dot.setAttribute('transform', 'rotate(' + (t < .43 ? 0 : Math.min((t - .43) / .34, 1) * 360) + ')');
node.style.setProperty('--phase', elapsed % 9000 / 9000);
}
previous = now;
frame = requestAnimationFrame(tick);
};
frame = requestAnimationFrame(tick);
};
const measure = () => {
const size = parseFloat(getComputedStyle(node).fontSize);
node.style.setProperty('--period', node.offsetWidth * 1.7 / size);
node.querySelectorAll('.ch').forEach(ch => ch.style.setProperty('--x', ch.offsetLeft / size));
};
const resize = new ResizeObserver(measure);
resize.observe(node);
measure();
document.fonts?.ready.then(measure);
const visibility = () => animations.forEach(a => visible && !document.hidden ? a.play() : a.pause());
observer = new IntersectionObserver(([entry]) => {
visible = entry.isIntersecting;
visibility();
});
observer.observe(node);
document.addEventListener('visibilitychange', visibility);
media.addEventListener('change', setup);
setup();
return () => {
cancelAnimationFrame(frame);
animations.forEach(a => a.cancel());
observer.disconnect();
resize.disconnect();
media.removeEventListener('change', setup);
document.removeEventListener('visibilitychange', visibility);
};
}, []);
return React.createElement("span", {
className: "mw",
ref: root,
"aria-label": "Motion",
style: {
'--grad': 'linear-gradient(100deg,#3ce6ac 0%,#7cc4ff 25%,#b48cff 50%,#ffb35c 75%,#3ce6ac 100%)'
}
}, ['M', 'o', 't', 'ı', 'o', 'n'].map((letter, i) => React.createElement("span", {
key: i,
className: 'ch' + (i === 3 ? ' i' : ''),
"aria-hidden": "true"
}, letter, i === 3 && React.createElement("svg", {
className: "dsvg",
viewBox: "-50 -50 100 100"
}, React.createElement("circle", {
className: "ring",
r: "10",
fill: "none",
stroke: "#7cc4ff",
strokeWidth: "2",
opacity: "0"
}), React.createElement("g", {
className: "jump"
}, React.createElement("path", {
className: "dot",
d: "M0 -10C5.52 -10 10 -5.52 10 0C10 5.52 5.52 10 0 10C-5.52 10 -10 5.52 -10 0C-10 -5.52 -5.52 -10 0 -10Z",
fill: "#7cc4ff"
}))))), React.createElement("svg", {
className: "sq",
viewBox: "0 0 196 12",
"aria-hidden": "true"
}, React.createElement("path", {
d: "M2 6Q18 -2 34 6T66 6T98 6T130 6T162 6T194 6",
fill: "none",
stroke: "#7cc4ff",
strokeWidth: "2.4",
strokeLinecap: "round"
})));
}, []);
const [filters, setFilters] = useState({
q: "",
group: initialGroup,
section: initialSection,
kind: "",
sort: "featured"
});
const [active, setActive] = useState(null);
const [reduced, setReduced] = useState(true);
const [limit, setLimit] = useState(24);
const [expandedGroups, setExpandedGroups] = useState({});
const resultsRef = useRef(null);
useEffect(() => {
const read = () => {
const params = new URLSearchParams(window.location.search);
setFilters({
q: params.get("q") || "",
group: params.get("group") || initialGroup,
section: params.get("section") || initialSection,
kind: params.get("kind") || "",
sort: params.get("sort") || "featured"
});
setLimit(24);
setActive(null);
};
read();
window.addEventListener("popstate", read);
const query = window.matchMedia("(prefers-reduced-motion: reduce)");
const pointer = window.matchMedia("(hover: hover) and (pointer: fine)");
const motion = () => {
setReduced(query.matches || !pointer.matches || navigator.maxTouchPoints > 0);
setActive(null);
};
const visibility = () => {
if (document.hidden) setActive(null);
};
motion();
query.addEventListener("change", motion);
pointer.addEventListener("change", motion);
document.addEventListener("visibilitychange", visibility);
return () => {
window.removeEventListener("popstate", read);
query.removeEventListener("change", motion);
pointer.removeEventListener("change", motion);
document.removeEventListener("visibilitychange", visibility);
};
}, [initialGroup, initialSection]);
useEffect(() => {
if (!active || reduced || document.hidden) return;
const item = catalog.items.find(item => item.href === active);
if (item?.preview?.mode !== 'video') return;
const host = resultsRef.current?.querySelector(`[data-preview-host="${CSS.escape(active)}"]`);
if (!host) return;
let cancelled = false;
let element;
let timeout;
const abort = new AbortController();
const release = () => {
clearTimeout(timeout);
if (element) {
element.pause();
if (element.tagName === 'VIDEO') {
element.removeAttribute('src');
element.load();
}
element.remove();
element = null;
}
delete host.dataset.ready;
};
const fail = () => {
if (cancelled) return;
cancelled = true;
abort.abort();
release();
host.dataset.state = 'unavailable';
};
const show = () => {
if (cancelled || !element) return;
clearTimeout(timeout);
host.dataset.ready = 'true';
host.dataset.state = 'playing';
};
const start = async () => {
host.dataset.state = 'loading';
timeout = setTimeout(fail, 12000);
try {
element = document.createElement('video');
element.muted = true;
element.loop = true;
element.playsInline = true;
element.addEventListener('error', fail, {
once: true
});
element.addEventListener('playing', show, {
once: true
});
element.src = item.video;
if (cancelled) {
release();
return;
}
element.setAttribute('inert', '');
element.setAttribute('tabindex', '-1');
element.setAttribute('aria-hidden', 'true');
host.appendChild(element);
element.play().catch(fail);
} catch {
if (!cancelled) fail();
}
};
const intent = setTimeout(start, 180);
const observer = new IntersectionObserver(entries => {
if (!cancelled && !entries[0]?.isIntersecting) setActive(current => current === active ? null : current);
});
observer.observe(host);
return () => {
cancelled = true;
clearTimeout(intent);
abort.abort();
observer.disconnect();
release();
delete host.dataset.state;
};
}, [active, reduced, catalog]);
const capsRef = useRef({
dom: 0,
webgl: 0
});
const mountsRef = useRef(new Map());
const hoveredRef = useRef(null);
const promoteRef = useRef(() => {});
useEffect(() => {
if (reduced) return;
const tierFor = item => item.preview.heavy ? 'webgl' : 'dom';
const capFor = tier => tier === 'webgl' ? MAX_WEBGL_PLAYERS : MAX_DOM_PLAYERS;
let waiting = new Map();
const release = (item, state) => {
if (mountsRef.current.get(item.href) !== state) return;
clearTimeout(state.readyTimer);
state.player?.remove();
capsRef.current[state.tier] -= 1;
mountsRef.current.delete(item.href);
const entries = [...waiting];
const queued = [...entries.filter(([h]) => h === hoveredRef.current), ...entries.filter(([h]) => h !== hoveredRef.current)];
waiting.clear();
queued.forEach(([href, host]) => mount(host, catalog.items.find(i => i.href === href)));
};
const unmount = (host, item) => {
waiting.delete(item.href);
const state = mountsRef.current.get(item.href);
if (!state) return;
release(item, state);
delete host.dataset.ready;
};
const mount = async (host, item) => {
if (mountsRef.current.has(item.href)) return;
let state;
try {
const tier = tierFor(item);
if (capsRef.current[tier] >= capFor(tier)) {
waiting.set(item.href, host);
return;
}
capsRef.current[tier] += 1;
state = {
player: null,
host,
tier,
hover: hoveredRef.current === item.href,
readyTimer: 0
};
mountsRef.current.set(item.href, state);
await ensurePlayerDefined();
const response = await fetch(item.preview.source);
if (!response.ok) throw new Error(`preview fetch failed: ${response.status}`);
const {html} = await response.json();
if (mountsRef.current.get(item.href) !== state) return;
const player = document.createElement('hyperframes-player');
player.setAttribute('muted', '');
player.setAttribute('audio-locked', '');
player.setAttribute('width', String(item.preview.width));
player.setAttribute('height', String(item.preview.height));
player.setAttribute('inert', '');
player.setAttribute('tabindex', '-1');
player.setAttribute('aria-hidden', 'true');
const fail = () => {
if (mountsRef.current.get(item.href) !== state) return;
console.error(`[catalog] preview failed to load: ${item.id}`);
host.dataset.state = 'unavailable';
delete host.dataset.ready;
release(item, state);
};
const readyTimer = state.readyTimer = setTimeout(fail, READY_TIMEOUT_MS);
player.addEventListener('error', fail, {
once: true
});
player.addEventListener('ready', () => {
clearTimeout(readyTimer);
player.seek(REST_SECONDS);
revealWhenPainted(player, () => {
if (mountsRef.current.get(item.href) !== state) return;
host.dataset.ready = 'true';
if (state.hover) player.play();
});
}, {
once: true
});
player.setAttribute('srcdoc', html);
state.player = player;
host.appendChild(player);
} catch (err) {
if (state && mountsRef.current.get(item.href) !== state) return;
console.error(`[catalog] preview failed to load: ${item.id}`, err);
host.dataset.state = 'unavailable';
if (state) release(item, state);
}
};
promoteRef.current = item => {
const host = waiting.get(item.href);
if (!host) return;
const tier = tierFor(item);
const victim = [...mountsRef.current].find(([, st]) => st.tier === tier && !st.hover);
if (!victim) return;
waiting = new Map([[item.href, host], ...waiting]);
waiting.set(victim[0], victim[1].host);
release(catalog.items.find(i => i.href === victim[0]), victim[1]);
delete victim[1].host.dataset.ready;
};
const hosts = resultsRef.current?.querySelectorAll('a[data-preview-mode="player"] [data-preview-host]') ?? [];
const observer = new IntersectionObserver(entries => {
for (const entry of entries) {
const host = entry.target;
const item = catalog.items.find(i => i.href === host.dataset.previewHost);
if (!item) continue;
if (entry.isIntersecting) mount(host, item); else unmount(host, item);
}
}, {
rootMargin: '200px'
});
hosts.forEach(host => observer.observe(host));
const mounts = mountsRef.current;
return () => {
observer.disconnect();
mounts.forEach(state => {
clearTimeout(state.readyTimer);
state.player?.remove();
});
mounts.clear();
capsRef.current = {
dom: 0,
webgl: 0
};
hoveredRef.current = null;
};
}, [filters, limit, expandedGroups, reduced, catalog]);
const setHover = (item, hovering) => {
if (reduced) return;
if (item.preview?.mode === 'player') {
hoveredRef.current = hovering ? item.href : null;
const state = mountsRef.current.get(item.href);
if (!state) {
if (hovering) promoteRef.current(item);
return;
}
state.hover = hovering;
if (state.player) {
if (hovering) state.player.play(); else state.player.seek(REST_SECONDS);
}
} else if (item.preview?.mode !== 'still' && item.preview?.mode !== 'unsupported') {
setActive(hovering ? item.href : null);
}
};
const update = patch => {
const next = {
...filters,
...patch
};
setFilters(next);
setLimit(24);
setActive(null);
const url = new URL(window.location.href);
Object.entries(next).forEach(([key, value]) => {
if (value && !(key === "sort" && value === "featured")) url.searchParams.set(key, value); else url.searchParams.delete(key);
});
window.history.replaceState(window.history.state, "", url);
};
const reset = () => update({
q: "",
group: "",
section: "",
kind: "",
sort: "featured"
});
const items = catalog?.items || [];
const groups = catalog?.groups || [];
const searching = Boolean(filters.q || filters.group || filters.section || filters.kind || filters.sort !== "featured");
const words = filters.q.trim().toLowerCase().split(/\s+/).filter(Boolean);
const ordered = list => [...list].sort((a, b) => filters.sort === "az" ? a.title.localeCompare(b.title) : a.featured - b.featured || Number(Boolean(b.poster)) - Number(Boolean(a.poster)) || Number(Boolean(b.video)) - Number(Boolean(a.video)) || a.title.localeCompare(b.title));
const matches = ordered(items.filter(item => {
const text = [item.title, item.description, item.section, ...item.tags].join(" ").toLowerCase();
return (!filters.group || item.group === filters.group) && (!filters.section || item.section === filters.section) && (!filters.kind || item.kind === filters.kind) && words.every(word => text.includes(word));
}));
const caret = React.createElement("svg", {
className: "hfc-caret",
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round",
"aria-hidden": "true"
}, React.createElement("path", {
d: "m6 9 6 6 6-6"
}));
const card = (item, eager = false) => React.createElement("a", {
className: "hfc-card",
href: item.href,
key: item.href,
"data-preview-mode": item.preview?.mode || "still",
onMouseEnter: () => setHover(item, true),
onMouseLeave: () => setHover(item, false),
onFocus: () => setHover(item, true),
onBlur: () => setHover(item, false)
}, React.createElement("div", {
className: "hfc-media"
}, item.preview?.mode === "unsupported" ? React.createElement("div", {
className: "hfc-fallback hfc-unsupported",
"aria-hidden": "true"
}, React.createElement("span", null, "Needs a browser flag"), React.createElement("code", null, `chrome://flags/#${item.preview.flag}`)) : React.createElement("div", {
className: "hfc-fallback",
"aria-hidden": "true",
style: {
display: item.poster ? "none" : undefined
}
}, React.createElement("span", null, item.section), React.createElement("strong", null, item.title)), item.poster && React.createElement("img", {
src: item.poster,
alt: `${item.title} preview`,
loading: eager ? "eager" : "lazy",
fetchPriority: eager ? "high" : undefined,
decoding: "async",
width: "640",
height: "360",
onError: event => {
event.currentTarget.style.display = "none";
event.currentTarget.previousElementSibling.style.display = "flex";
}
}), item.preview?.mode !== "still" && item.preview?.mode !== "unsupported" && React.createElement("div", {
className: "hfc-preview-host",
"data-preview-host": item.href,
"aria-hidden": "true"
})), React.createElement("div", {
className: "hfc-card-body"
}, React.createElement("div", {
className: "hfc-card-title"
}, React.createElement("h3", null, item.title), item.status && React.createElement("span", {
className: "hfc-status"
}, item.status)), React.createElement("p", {
className: "hfc-meta"
}, [...(item.tech || []).filter(t => !(/^GSAP/).test(t)).slice(0, 2), ...item.tags.slice(0, 2)].join(" · ") || item.section)));
return React.createElement("div", {
className: "hfc-gallery not-prose"
}, React.createElement("section", {
className: "hfc-hero",
"aria-label": "Explore the catalog"
}, React.createElement("h1", null, React.createElement(MotionWord, null), " ready to install."), React.createElement("p", null, initialGroup ? `${matches.length} items. Preview a piece and open it to explore its controls, code, and installation.` : "Find the scene, caption, or finishing touch for your next video. Preview the motion, pick a favorite, and make it your own.")), React.createElement("section", {
className: "hfc-browser",
"aria-label": "Browse catalog",
ref: resultsRef
}, searching ? React.createElement(React.Fragment, null, matches.length ? React.createElement("div", {
className: "hfc-grid"
}, matches.slice(0, limit).map(item => card(item))) : React.createElement("div", {
className: "hfc-empty"
}, React.createElement("h3", null, "No matches yet."), React.createElement("p", null, "Try a different search, or clear the filters to explore everything."), React.createElement("button", {
type: "button",
onClick: reset
}, "Explore all items")), matches.length > limit && React.createElement("button", {
className: "hfc-load",
type: "button",
onClick: () => setLimit(limit + 24)
}, "Show more ", React.createElement("span", null, "(", matches.length - limit, " remaining)"))) : React.createElement("div", {
className: "hfc-overview"
}, groups.map(group => React.createElement("section", {
className: "hfc-collection",
key: group.id,
"aria-label": group.label
}, React.createElement("div", {
className: "hfc-section-head"
}, React.createElement("h2", null, group.label), React.createElement("button", {
type: "button",
onClick: () => setExpandedGroups(previous => ({
...previous,
[group.id]: !previous[group.id]
})),
"aria-label": `${expandedGroups[group.id] ? "Show less" : `Show all ${group.count}`} ${group.label}`,
"aria-expanded": Boolean(expandedGroups[group.id]),
"aria-controls": `gallery-${group.id}`
}, expandedGroups[group.id] ? "Show Less" : `Show All ${group.count}`, " ", caret)), React.createElement("div", {
className: "hfc-grid",
id: `gallery-${group.id}`
}, ordered(items.filter(item => item.group === group.id)).slice(0, expandedGroups[group.id] ? undefined : group.pinned ? 6 : 3).map(item => card(item, group.pinned === true))))))));
};
export const catalogGalleryData = {
"source": "https://github.com/heygen-com/hyperframes",
"groups": [{
"id": "3d-motion",
"label": "3D motion",
"pinned": true,
"count": 7
}, {
"id": "carousels",
"label": "Carousels",
"pinned": false,
"count": 25
}, {
"id": "text-captions",
"label": "Text & captions",
"pinned": false,
"count": 71
}, {
"id": "code",
"label": "Code",
"pinned": false,
"count": 34
}, {
"id": "transitions",
"label": "Transitions",
"pinned": false,
"count": 31
}, {
"id": "data-charts",
"label": "Data & charts",
"pinned": false,
"count": 17
}, {
"id": "scenes-demos",
"label": "Scenes & demos",
"pinned": false,
"count": 95
}, {
"id": "motion-effects",
"label": "Motion & effects",
"pinned": false,
"count": 94
}, {
"id": "surfaces",
"label": "Surfaces",
"pinned": false,
"count": 20
}, {
"id": "blocks",
"label": "Blocks",
"pinned": false,
"count": 13
}],
"items": [{
"id": "canopy-part-title",
"kind": "block",
"href": "/catalog/blocks/canopy-part-title",
"title": "Canopy Part Title",
"tagline": "Leaves sweep through the frame and part to reveal the headline.",
"description": "Leaves sweep through the frame and part to reveal the headline.",
"group": "3d-motion",
"section": "3D motion",
"tags": ["3d-motion", "title-card", "leaves", "organic", "depth-of-field", "two-headlines", "sweep"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/canopy-part-title.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/canopy-part-title.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/canopy-part-title.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "code-slice-hero",
"kind": "block",
"href": "/catalog/blocks/code-slice-hero",
"title": "Code Slice Hero",
"tagline": "A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline.",
"description": "A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline.",
"group": "3d-motion",
"section": "3D motion",
"tags": ["3d-motion", "transition", "typography", "tiles", "flip", "webgl2", "shadows", "two-headlines"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-slice-hero.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-slice-hero.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-slice-hero.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "cuboid-carousel",
"kind": "block",
"href": "/catalog/blocks/cuboid-carousel",
"title": "Cuboid Carousel",
"tagline": "A chain of bevelled cuboids rides a travelling wave as a content carousel.",
"description": "A chain of bevelled cuboids rides a travelling wave as a content carousel.",
"group": "3d-motion",
"section": "3D motion",
"tags": ["3d-motion", "carousel", "cards", "travelling-wave", "pbr", "shadows", "room-environment"],
"tech": [],
"duration": 6.67,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cuboid-carousel.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cuboid-carousel.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/cuboid-carousel.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "frost-sequence-camera-orbit",
"kind": "block",
"href": "/catalog/blocks/frost-sequence-camera-orbit",
"title": "Frost Sequence Camera Orbit",
"tagline": "An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades.",
"description": "An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades.",
"group": "3d-motion",
"section": "3D motion",
"tags": ["3d-motion", "ice", "frost", "camera-orbit", "logo", "particles", "webgpu", "two-headlines"],
"tech": [],
"duration": 22.5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/frost-sequence-camera-orbit.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/frost-sequence-camera-orbit.mp4",
"preview": {
"mode": "video"
}
}, {
"id": "glass-shard-title",
"kind": "block",
"href": "/catalog/blocks/glass-shard-title",
"title": "Glass Shard Title",
"tagline": "Glass shards fly in through fog and tile themselves into the headline.",
"description": "Glass shards fly in through fog and tile themselves into the headline.",
"group": "3d-motion",
"section": "3D motion",
"tags": ["3d-motion", "title-card", "glass", "voronoi", "shards", "fog", "hdr"],
"tech": [],
"duration": 12.16,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glass-shard-title.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glass-shard-title.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/glass-shard-title.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "orbit-card",
"kind": "block",
"href": "/catalog/blocks/orbit-card",
"title": "Orbit Card",
"tagline": "A single feature card orbits a dot sphere on approved Blender camera motion.",
"description": "A single feature card orbits a dot sphere on approved Blender camera motion.",
"group": "3d-motion",
"section": "3D motion",
"tags": ["3d-motion", "cards", "feature-reveal", "dots", "orbit", "blender-motion", "sphere"],
"tech": [],
"duration": 10,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/orbit-card-v2.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/orbit-card.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/orbit-card.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "wireframe-portal-title",
"kind": "block",
"href": "/catalog/blocks/wireframe-portal-title",
"title": "Wireframe Portal Title",
"tagline": "A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.",
"description": "A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.",
"group": "3d-motion",
"section": "3D motion",
"tags": ["3d-motion", "title-card", "wireframe", "portal", "burst", "typography", "post-processing", "phrase-swap"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/wireframe-portal-title.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/wireframe-portal-title.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/wireframe-portal-title.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-camera-follow",
"kind": "component",
"href": "/catalog/components/caption-camera-follow",
"title": "Camera Follow Captions",
"tagline": "One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the same size. Old words stay lit and simply become small.",
"description": "One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the same size. Old words stay lit and simply become small.",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "camera", "typography", "motion-primitive", "portrait"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-camera-follow.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-clip-wipe",
"kind": "component",
"href": "/catalog/components/caption-clip-wipe",
"title": "Clip Wipe",
"tagline": "Left-to-right clip-path wipe reveal per word",
"description": "Left-to-right clip-path wipe reveal per word",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "wipe", "clip-path", "reveal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview-v2.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-clip-wipe.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-editorial-emphasis",
"kind": "component",
"href": "/catalog/components/caption-editorial-emphasis",
"title": "Editorial Emphasis",
"tagline": "Dual-font system with dramatic size contrast for emphasis words",
"description": "Dual-font system with dramatic size contrast for emphasis words",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "editorial", "typography", "emphasis"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-editorial-emphasis/preview.mp4?v=1779051416",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-editorial-emphasis.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-emoji-pop",
"kind": "component",
"href": "/catalog/components/caption-emoji-pop",
"title": "Emoji Pop",
"tagline": "Emoji integration with stroked text and horizontal squeeze entrance",
"description": "Emoji integration with stroked text and horizontal squeeze entrance",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "emoji", "social"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-emoji-pop/preview.mp4?v=1779051416",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-emoji-pop.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-glitch-rgb",
"kind": "component",
"href": "/catalog/components/caption-glitch-rgb",
"title": "Glitch RGB",
"tagline": "RGB chromatic aberration with CRT scanline overlay",
"description": "RGB chromatic aberration with CRT scanline overlay",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "glitch", "cyber", "tech"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview-v2.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-glitch-rgb.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-gradient-fill",
"kind": "component",
"href": "/catalog/components/caption-gradient-fill",
"title": "Gradient Fill",
"tagline": "Gradient-clipped text with elastic bounce entrance",
"description": "Gradient-clipped text with elastic bounce entrance",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "gradient", "colorful"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview-v2.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-gradient-fill.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-highlight",
"kind": "component",
"href": "/catalog/components/caption-highlight",
"title": "Highlight",
"tagline": "Red background sweep behind each active word, TikTok-style",
"description": "Red background sweep behind each active word, TikTok-style",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "highlight", "social", "tiktok"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-highlight/preview-v2.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-highlight.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-kinetic-slam",
"kind": "component",
"href": "/catalog/components/caption-kinetic-slam",
"title": "Kinetic Slam",
"tagline": "Full-screen single-word display with alternating entrance directions",
"description": "Full-screen single-word display with alternating entrance directions",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "kinetic", "typography", "slam"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-kinetic-slam/preview.mp4?v=1779051416",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-kinetic-slam.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-matrix-decode",
"kind": "component",
"href": "/catalog/components/caption-matrix-decode",
"title": "Matrix Decode",
"tagline": "Character scramble animation before text reveal",
"description": "Character scramble animation before text reveal",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "matrix", "scramble", "decode"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview-v2.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-matrix-decode.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-neon-accent",
"kind": "component",
"href": "/catalog/components/caption-neon-accent",
"title": "Neon Accent",
"tagline": "Multi-color neon glow accents with wiggle drift animation",
"description": "Multi-color neon glow accents with wiggle drift animation",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "neon", "glow", "accent"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-accent/preview.mp4?v=1779051416",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-neon-accent.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-neon-glow",
"kind": "component",
"href": "/catalog/components/caption-neon-glow",
"title": "Neon Glow",
"tagline": "Cyan and magenta neon glow with keyword accent colors",
"description": "Cyan and magenta neon glow with keyword accent colors",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "neon", "glow", "gaming"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-glow/preview.mp4?v=1779051416",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-neon-glow.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-parallax-layers",
"kind": "component",
"href": "/catalog/components/caption-parallax-layers",
"title": "Parallax Layers",
"tagline": "Behind-subject 3D text layering with vertical stretch effect",
"description": "Behind-subject 3D text layering with vertical stretch effect",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "parallax", "3d", "depth"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-parallax-layers/preview.mp4?v=1779051692",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-parallax-layers.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-particle-burst",
"kind": "component",
"href": "/catalog/components/caption-particle-burst",
"title": "Particle Burst",
"tagline": "Keyword words trigger colored particle explosions",
"description": "Keyword words trigger colored particle explosions",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "particles", "burst", "effects"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-particle-burst/preview.mp4?v=1779051416",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-particle-burst.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-pill-karaoke",
"kind": "component",
"href": "/catalog/components/caption-pill-karaoke",
"title": "Pill Karaoke",
"tagline": "Pill-shaped container with per-word karaoke color highlight",
"description": "Pill-shaped container with per-word karaoke color highlight",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "karaoke", "pill"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-pill-karaoke/preview.mp4?v=1779051416",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-pill-karaoke.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-texture",
"kind": "component",
"href": "/catalog/components/caption-texture",
"title": "Texture",
"tagline": "Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable",
"description": "Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "texture", "mask"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-texture.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-weight-shift",
"kind": "component",
"href": "/catalog/components/caption-weight-shift",
"title": "Weight Shift",
"tagline": "Elegant font-weight transition between caption lines",
"description": "Elegant font-weight transition between caption lines",
"group": "text-captions",
"section": "Captions",
"tags": ["captions", "caption-style", "minimal", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png",
"video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview-v2.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-weight-shift.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "mk-callout-highlight",
"kind": "block",
"href": "/catalog/blocks/mk-callout-highlight",
"title": "Word-Sweep Highlight",
"tagline": "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover",
"description": "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover",
"group": "text-captions",
"section": "Captions",
"tags": ["typography", "karaoke", "captions", "minimal"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/mk-callout-highlight.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "blur-out-up",
"kind": "component",
"href": "/catalog/components/blur-out-up",
"title": "Blur Out Up",
"tagline": "Words arrive clean and depart upward with increasing blur for airy exits.",
"description": "Words arrive clean and depart upward with increasing blur for airy exits.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/blur-out-up.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/blur-out-up.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "bottom-up-letters",
"kind": "component",
"href": "/catalog/components/bottom-up-letters",
"title": "Bottom Up Letters",
"tagline": "Splits text into letters and reveals each glyph from below with deterministic staggered timing",
"description": "Splits text into letters and reveals each glyph from below with deterministic staggered timing",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "text", "letters", "reveal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/bottom-up-letters.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/bottom-up-letters.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "caption-blend-difference",
"kind": "component",
"href": "/catalog/components/caption-blend-difference",
"title": "Blend Difference",
"tagline": "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background",
"description": "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["text", "text-effect", "effect", "blend-mode", "contrast", "inversion"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/caption-blend-difference.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "char-slam-explode",
"kind": "component",
"href": "/catalog/components/char-slam-explode",
"title": "Char Slam Explode",
"tagline": "Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.",
"description": "Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography", "text-treatment", "scatter", "slam", "impact"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/char-slam-explode.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "focus-blur-resolve",
"kind": "component",
"href": "/catalog/components/focus-blur-resolve",
"title": "Focus Blur Resolve",
"tagline": "A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.",
"description": "A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/focus-blur-resolve.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/focus-blur-resolve.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "headline-slam",
"kind": "component",
"href": "/catalog/components/headline-slam",
"title": "Headline Slam",
"tagline": "A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.",
"description": "A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography", "headline", "slam", "impact", "exit"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/headline-slam.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "hw-path-text",
"kind": "block",
"href": "/catalog/blocks/hw-path-text",
"title": "Text Along a Path",
"tagline": "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input",
"description": "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["handwritten", "typography", "path", "overlay"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/hw-path-text.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "hw-title",
"kind": "block",
"href": "/catalog/blocks/hw-title",
"title": "Handwritten Title",
"tagline": "Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils",
"description": "Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["handwritten", "typography", "title-card", "overlay"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/hw-title.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "hw-write-title",
"kind": "block",
"href": "/catalog/blocks/hw-write-title",
"title": "Handwritten Write-On Title",
"tagline": "True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a curvature-adaptive pen-velocity ease (fast on straights, slow into curves, inter-stroke pen lifts); optional squiggle underline; boils",
"description": "True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a curvature-adaptive pen-velocity ease (fast on straights, slow into curves, inter-stroke pen lifts); optional squiggle underline; boils",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["handwritten", "typography", "title-card", "write-on", "overlay"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/hw-write-title.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "inline-highlight",
"kind": "component",
"href": "/catalog/components/inline-highlight",
"title": "Inline Highlight",
"tagline": "A clean marker-style inline highlight that animates behind text using a CSS scale variable",
"description": "A clean marker-style inline highlight that animates behind text using a CSS scale variable",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "text", "highlight", "caption"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/inline-highlight.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/inline-highlight.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "kinetic-center-build",
"kind": "component",
"href": "/catalog/components/kinetic-center-build",
"title": "Kinetic Center Build",
"tagline": "Words enter from the right and push the growing phrase left until the final line locks centered.",
"description": "Words enter from the right and push the growing phrase left until the final line locks centered.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "text-effects", "kinetic-type", "reveal", "remocn-port"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/kinetic-center-build.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "kinetic-type-swap",
"kind": "component",
"href": "/catalog/components/kinetic-type-swap",
"title": "Kinetic Type Swap",
"tagline": "A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.",
"description": "A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "text-effects", "kinetic-type", "word-swap", "reveal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/kinetic-type-swap.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "line-by-line-slide",
"kind": "component",
"href": "/catalog/components/line-by-line-slide",
"title": "Line-by-Line Slide",
"tagline": "Each line enters from the left with staggered slide and exits to the right.",
"description": "Each line enters from the left with staggered slide and exits to the right.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/line-by-line-slide.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/line-by-line-slide.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "line-swap",
"kind": "component",
"href": "/catalog/components/line-swap",
"title": "Line Swap",
"tagline": "A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B.",
"description": "A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "text-effects", "swap", "beat", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/line-swap.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "logo-brand-close",
"kind": "component",
"href": "/catalog/components/logo-brand-close",
"title": "Logo Brand Close",
"tagline": "A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film.",
"description": "A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography", "brand", "logo", "end-card", "close"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/logo-brand-close.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "marker-highlight",
"kind": "component",
"href": "/catalog/components/marker-highlight",
"title": "Marker Highlight",
"tagline": "Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue.",
"description": "Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography", "emphasis", "marker", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/marker-highlight.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "matrix-decode",
"kind": "component",
"href": "/catalog/components/matrix-decode",
"title": "Matrix Decode",
"tagline": "Random scramble resolves left-to-right into the target text.",
"description": "Random scramble resolves left-to-right into the target text.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/matrix-decode.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/matrix-decode.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "mk-emphasis-type",
"kind": "component",
"href": "/catalog/components/mk-emphasis-type",
"title": "Background Emphasis Type",
"tagline": "Oversized low-contrast background word drifting slowly behind the subject — typography as texture",
"description": "Oversized low-contrast background word drifting slowly behind the subject — typography as texture",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["typography", "text-treatment", "minimal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/mk-emphasis-type.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "morph-text",
"kind": "component",
"href": "/catalog/components/morph-text",
"title": "Morph Text",
"tagline": "Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect",
"description": "Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["text", "text-effect", "typography", "morph", "gooey", "kinetic", "animation"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/components/morph-text.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "particle-text-dissolve",
"kind": "component",
"href": "/catalog/components/particle-text-dissolve",
"title": "Particle Text Dissolve",
"tagline": "Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter.",
"description": "Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "text-effects", "particles", "canvas", "deterministic", "experiment"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/particle-text-dissolve.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "per-word-crossfade",
"kind": "component",
"href": "/catalog/components/per-word-crossfade",
"title": "Per-Word Crossfade",
"tagline": "Words gently fade into place with a short vertical drift for calm keynote rhythm.",
"description": "Words gently fade into place with a short vertical drift for calm keynote rhythm.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/per-word-crossfade.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/per-word-crossfade.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "per-word-rise",
"kind": "component",
"href": "/catalog/components/per-word-rise",
"title": "Per Word Rise",
"tagline": "Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit).",
"description": "Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit).",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "text-effects", "typography", "stagger", "reveal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/per-word-rise.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "perspective-marquee",
"kind": "component",
"href": "/catalog/components/perspective-marquee",
"title": "Perspective Marquee",
"tagline": "A 3D tilted marquee with depth feel as items roll toward the horizon.",
"description": "A 3D tilted marquee with depth feel as items roll toward the horizon.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/perspective-marquee.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/perspective-marquee.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "rgb-glitch-text",
"kind": "component",
"href": "/catalog/components/rgb-glitch-text",
"title": "RGB Glitch Text",
"tagline": "RGB-offset text copies jitter briefly for a controlled glitch window.",
"description": "RGB-offset text copies jitter briefly for a controlled glitch window.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/rgb-glitch-text.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/rgb-glitch-text.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "scan-band",
"kind": "component",
"href": "/catalog/components/scan-band",
"title": "Scan Band",
"tagline": "A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.",
"description": "A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography", "scan", "chromatic", "distortion", "wordmark"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/scan-band.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "scramble-reveal",
"kind": "component",
"href": "/catalog/components/scramble-reveal",
"title": "Scramble Reveal",
"tagline": "A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.",
"description": "A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "text-effects", "scramble", "reveal", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/scramble-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "shared-axis-y",
"kind": "component",
"href": "/catalog/components/shared-axis-y",
"title": "Shared Axis Y",
"tagline": "Per-word vertical shared-axis transition for sharp editorial swaps.",
"description": "Per-word vertical shared-axis transition for sharp editorial swaps.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shared-axis-y.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/shared-axis-y.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "shared-axis-z",
"kind": "component",
"href": "/catalog/components/shared-axis-z",
"title": "Shared Axis Z",
"tagline": "Scale-based shared-axis transition for focus shifts and context depth.",
"description": "Scale-based shared-axis transition for focus shifts and context depth.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shared-axis-z.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/shared-axis-z.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "shimmer-sweep",
"kind": "component",
"href": "/catalog/components/shimmer-sweep",
"title": "Shimmer Sweep",
"tagline": "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals",
"description": "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["text", "shimmer", "highlight", "effect"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/shimmer-sweep.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "soft-blur-in",
"kind": "component",
"href": "/catalog/components/soft-blur-in",
"title": "Soft Blur In",
"tagline": "A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts",
"description": "A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "text", "reveal", "blur"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/soft-blur-in.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/soft-blur-in.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "split-flap-board",
"kind": "block",
"href": "/catalog/blocks/split-flap-board",
"title": "Split-Flap Board",
"tagline": "Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade.",
"description": "Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["text", "kinetic", "mechanical", "split-flap", "solari", "departure-board", "reveal"],
"tech": [],
"duration": 3.5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/split-flap-board.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "strikethrough-replace",
"kind": "component",
"href": "/catalog/components/strikethrough-replace",
"title": "Strikethrough Replace",
"tagline": "Draw a strike line across old text, then reveal the replacement.",
"description": "Draw a strike line across old text, then reveal the replacement.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/strikethrough-replace.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/strikethrough-replace.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "text-shimmer",
"kind": "component",
"href": "/catalog/components/text-shimmer",
"title": "Text Shimmer",
"tagline": "A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.",
"description": "A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "text-effects", "shimmer", "specular", "emphasis"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/text-shimmer.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "ticker-takeover",
"kind": "component",
"href": "/catalog/components/ticker-takeover",
"title": "Ticker Takeover",
"tagline": "A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.",
"description": "A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography", "ticker", "slot-machine", "headline", "reveal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/ticker-takeover.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "titlecard-calm",
"kind": "component",
"href": "/catalog/components/titlecard-calm",
"title": "Titlecard Calm",
"tagline": "A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.",
"description": "A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography", "title-card", "calm", "orient"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/titlecard-calm.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "titlecard-lockup",
"kind": "component",
"href": "/catalog/components/titlecard-lockup",
"title": "Titlecard Lockup",
"tagline": "The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still.",
"description": "The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography", "title-card", "lockup", "breather", "orient"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/titlecard-lockup.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "tracking-in",
"kind": "component",
"href": "/catalog/components/tracking-in",
"title": "Tracking In",
"tagline": "A precise letter-spacing reveal for premium headings and interface labels",
"description": "A precise letter-spacing reveal for premium headings and interface labels",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "text", "reveal", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tracking-in.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/tracking-in.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "variable-axis-type",
"kind": "component",
"href": "/catalog/components/variable-axis-type",
"title": "Variable Axis Type",
"tagline": "A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.",
"description": "A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["typography", "variable-font", "kinetic-type", "axis", "emphasize"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/variable-axis-type.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "vox-annotate",
"kind": "component",
"href": "/catalog/components/vox-annotate",
"title": "Vox Annotate",
"tagline": "The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.",
"description": "The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["motion-primitive", "typography", "annotation", "marker", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/vox-annotate.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "weight-wave",
"kind": "block",
"href": "/catalog/blocks/weight-wave",
"title": "Weight Wave",
"tagline": "A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms.",
"description": "A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["typography", "kinetic-type", "title", "variable-font", "text"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/weight-wave.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "wordmark-tiles",
"kind": "component",
"href": "/catalog/components/wordmark-tiles",
"title": "Wordmark Tiles",
"tagline": "A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave.",
"description": "A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave.",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["typography", "wordmark", "tiles", "raster", "reveal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/wordmark-tiles.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "yt-prism-title",
"kind": "block",
"href": "/catalog/blocks/yt-prism-title",
"title": "Chromatic Fringe Title",
"tagline": "Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift",
"description": "Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift",
"group": "text-captions",
"section": "Typography & Text",
"tags": ["typography", "title-card", "creator"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/yt-prism-title.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "lower-third-bild",
"kind": "block",
"href": "/catalog/blocks/lower-third-bild",
"title": "Lower Third — BILD Style",
"tagline": "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.",
"description": "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.",
"group": "text-captions",
"section": "Lower Thirds",
"tags": ["broadcast", "lower-third", "news", "overlay"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/lower-third-bild.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "lt-accent-underline",
"kind": "block",
"href": "/catalog/blocks/lt-accent-underline",
"title": "Lower Third — Accent Underline",
"tagline": "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility",
"description": "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility",
"group": "text-captions",
"section": "Lower Thirds",
"tags": ["lower-third", "overlay", "podcast", "interview", "minimal"],
"tech": [],
"duration": 4.8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/lt-accent-underline.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "lt-bold-block",
"kind": "block",
"href": "/catalog/blocks/lt-bold-block",
"title": "Lower Third — Bold Block",
"tagline": "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops",
"description": "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops",
"group": "text-captions",
"section": "Lower Thirds",
"tags": ["lower-third", "overlay", "podcast", "interview", "bold"],
"tech": [],
"duration": 4.8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/lt-bold-block.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "lt-clean-bar",
"kind": "block",
"href": "/catalog/blocks/lt-clean-bar",
"title": "Lower Third — Clean Bar",
"tagline": "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance",
"description": "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance",
"group": "text-captions",
"section": "Lower Thirds",
"tags": ["lower-third", "overlay", "podcast", "interview"],
"tech": [],
"duration": 4.8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/lt-clean-bar.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "lt-color-block",
"kind": "block",
"href": "/catalog/blocks/lt-color-block",
"title": "Lower Third — Color Block",
"tagline": "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role",
"description": "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role",
"group": "text-captions",
"section": "Lower Thirds",
"tags": ["lower-third", "overlay", "podcast", "interview", "bold"],
"tech": [],
"duration": 4.8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/lt-color-block.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "lt-dark-card",
"kind": "block",
"href": "/catalog/blocks/lt-dark-card",
"title": "Lower Third — Dark Card",
"tagline": "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance",
"description": "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance",
"group": "text-captions",
"section": "Lower Thirds",
"tags": ["lower-third", "overlay", "podcast", "interview", "dark"],
"tech": [],
"duration": 4.8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/lt-dark-card.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "lt-kicker-name",
"kind": "block",
"href": "/catalog/blocks/lt-kicker-name",
"title": "Lower Third — Kicker Name",
"tagline": "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage",
"description": "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage",
"group": "text-captions",
"section": "Lower Thirds",
"tags": ["lower-third", "overlay", "podcast", "interview", "bold"],
"tech": [],
"duration": 4.8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/lt-kicker-name.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "lt-mask-reveal",
"kind": "block",
"href": "/catalog/blocks/lt-mask-reveal",
"title": "Lower Third — Mask Reveal",
"tagline": "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage",
"description": "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage",
"group": "text-captions",
"section": "Lower Thirds",
"tags": ["lower-third", "overlay", "podcast", "interview", "bold"],
"tech": [],
"duration": 4.8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/lt-mask-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "lt-side-rule",
"kind": "block",
"href": "/catalog/blocks/lt-side-rule",
"title": "Lower Third — Side Rule",
"tagline": "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage",
"description": "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage",
"group": "text-captions",
"section": "Lower Thirds",
"tags": ["lower-third", "overlay", "podcast", "interview", "minimal"],
"tech": [],
"duration": 4.8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/lt-side-rule.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "lt-soft-pill",
"kind": "block",
"href": "/catalog/blocks/lt-soft-pill",
"title": "Lower Third — Soft Pill",
"tagline": "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance",
"description": "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance",
"group": "text-captions",
"section": "Lower Thirds",
"tags": ["lower-third", "overlay", "podcast", "interview", "minimal"],
"tech": [],
"duration": 4.8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/lt-soft-pill.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "lt-stack-bars",
"kind": "block",
"href": "/catalog/blocks/lt-stack-bars",
"title": "Lower Third — Stack Bars",
"tagline": "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right",
"description": "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right",
"group": "text-captions",
"section": "Lower Thirds",
"tags": ["lower-third", "overlay", "podcast", "interview", "bold"],
"tech": [],
"duration": 4.8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/lt-stack-bars.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "news-ticker",
"kind": "block",
"href": "/catalog/blocks/news-ticker",
"title": "News Ticker",
"tagline": "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.",
"description": "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.",
"group": "text-captions",
"section": "Lower Thirds",
"tags": ["lower-third", "overlay", "news", "ticker"],
"tech": [],
"duration": 7,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/news-ticker.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-3d-extrude",
"kind": "block",
"href": "/catalog/blocks/code-3d-extrude",
"title": "Code 3D Extrude",
"tagline": "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.",
"description": "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.",
"group": "code",
"section": "Code Animations",
"tags": ["code", "code-animation", "3d", "webgl", "developer"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-3d-extrude.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "code-diff",
"kind": "block",
"href": "/catalog/blocks/code-diff",
"title": "Code Diff",
"tagline": "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.",
"description": "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.",
"group": "code",
"section": "Code Animations",
"tags": ["code", "code-animation", "diff", "developer"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-diff.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-highlight",
"kind": "block",
"href": "/catalog/blocks/code-highlight",
"title": "Code Highlight Sweep",
"tagline": "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.",
"description": "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.",
"group": "code",
"section": "Code Animations",
"tags": ["code", "code-animation", "highlight", "developer"],
"tech": [],
"duration": 5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-highlight.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-morph",
"kind": "block",
"href": "/catalog/blocks/code-morph",
"title": "Code Morph",
"tagline": "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.",
"description": "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.",
"group": "code",
"section": "Code Animations",
"tags": ["code", "code-animation", "morph", "refactor", "developer"],
"tech": [],
"duration": 7,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-morph.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-particle-assemble",
"kind": "block",
"href": "/catalog/blocks/code-particle-assemble",
"title": "Code Particle Assemble",
"tagline": "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.",
"description": "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.",
"group": "code",
"section": "Code Animations",
"tags": ["code", "code-animation", "particles", "gpu", "webgl", "developer"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-particle-assemble.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "code-scroll",
"kind": "block",
"href": "/catalog/blocks/code-scroll",
"title": "Code Scroll To Line",
"tagline": "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.",
"description": "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.",
"group": "code",
"section": "Code Animations",
"tags": ["code", "code-animation", "scroll", "developer"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-scroll.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-shader-dissolve",
"kind": "block",
"href": "/catalog/blocks/code-shader-dissolve",
"title": "Code Shader Dissolve",
"tagline": "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.",
"description": "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.",
"group": "code",
"section": "Code Animations",
"tags": ["code", "code-animation", "shader", "webgl", "developer"],
"tech": [],
"duration": 7,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-shader-dissolve.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-flight",
"kind": "block",
"href": "/catalog/blocks/code-snippet-flight",
"title": "Code Snippet Flight",
"tagline": "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.",
"description": "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.",
"group": "code",
"section": "Code Animations",
"tags": ["code", "code-animation", "flight", "developer"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-flight.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-typing",
"kind": "block",
"href": "/catalog/blocks/code-typing",
"title": "Code Typing",
"tagline": "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.",
"description": "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.",
"group": "code",
"section": "Code Animations",
"tags": ["code", "code-animation", "typing", "developer"],
"tech": [],
"duration": 5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-typing.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "terminal-simulator",
"kind": "component",
"href": "/catalog/components/terminal-simulator",
"title": "Terminal Simulator",
"tagline": "A terminal window types commands and streams log output.",
"description": "A terminal window types commands and streams log output.",
"group": "code",
"section": "Code Animations",
"tags": ["code-animation"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-simulator.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/terminal-simulator.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-apple-terminal-basic",
"kind": "block",
"href": "/catalog/blocks/code-snippet-apple-terminal-basic",
"title": "Code Snippet - Apple Terminal Basic",
"tagline": "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session.",
"description": "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-apple-terminal-basic.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-apple-terminal-clear-dark",
"kind": "block",
"href": "/catalog/blocks/code-snippet-apple-terminal-clear-dark",
"title": "Code Snippet - Apple Terminal Clear Dark",
"tagline": "Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session.",
"description": "Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-apple-terminal-clear-dark.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-apple-terminal-clear-light",
"kind": "block",
"href": "/catalog/blocks/code-snippet-apple-terminal-clear-light",
"title": "Code Snippet - Apple Terminal Clear Light",
"tagline": "Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session.",
"description": "Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-apple-terminal-clear-light.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-apple-terminal-grass",
"kind": "block",
"href": "/catalog/blocks/code-snippet-apple-terminal-grass",
"title": "Code Snippet - Apple Terminal Grass",
"tagline": "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session.",
"description": "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-apple-terminal-grass.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-apple-terminal-homebrew",
"kind": "block",
"href": "/catalog/blocks/code-snippet-apple-terminal-homebrew",
"title": "Code Snippet - Apple Terminal Homebrew",
"tagline": "Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session.",
"description": "Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-apple-terminal-homebrew.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-apple-terminal-man-page",
"kind": "block",
"href": "/catalog/blocks/code-snippet-apple-terminal-man-page",
"title": "Code Snippet - Apple Terminal Man Page",
"tagline": "Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session.",
"description": "Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-apple-terminal-man-page.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-apple-terminal-novel",
"kind": "block",
"href": "/catalog/blocks/code-snippet-apple-terminal-novel",
"title": "Code Snippet - Apple Terminal Novel",
"tagline": "Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session.",
"description": "Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-apple-terminal-novel.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-apple-terminal-ocean",
"kind": "block",
"href": "/catalog/blocks/code-snippet-apple-terminal-ocean",
"title": "Code Snippet - Apple Terminal Ocean",
"tagline": "Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session.",
"description": "Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-apple-terminal-ocean.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-apple-terminal-pro",
"kind": "block",
"href": "/catalog/blocks/code-snippet-apple-terminal-pro",
"title": "Code Snippet - Apple Terminal Pro",
"tagline": "Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.",
"description": "Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-apple-terminal-pro.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-apple-terminal-red-sands",
"kind": "block",
"href": "/catalog/blocks/code-snippet-apple-terminal-red-sands",
"title": "Code Snippet - Apple Terminal Red Sands",
"tagline": "Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session.",
"description": "Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-apple-terminal-red-sands.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-apple-terminal-silver-aerogel",
"kind": "block",
"href": "/catalog/blocks/code-snippet-apple-terminal-silver-aerogel",
"title": "Code Snippet - Apple Terminal Silver Aerogel",
"tagline": "Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session.",
"description": "Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-apple-terminal-solid-colors",
"kind": "block",
"href": "/catalog/blocks/code-snippet-apple-terminal-solid-colors",
"title": "Code Snippet - Apple Terminal Solid Colors",
"tagline": "Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session.",
"description": "Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-apple-terminal-solid-colors.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-dark-2026",
"kind": "block",
"href": "/catalog/blocks/code-snippet-dark-2026",
"title": "Code Snippet - Dark 2026",
"tagline": "VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"description": "VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "vscode"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-dark-2026.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-dark-modern",
"kind": "block",
"href": "/catalog/blocks/code-snippet-dark-modern",
"title": "Code Snippet - Dark Modern",
"tagline": "VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"description": "VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "vscode"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-dark-modern.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-dark-plus",
"kind": "block",
"href": "/catalog/blocks/code-snippet-dark-plus",
"title": "Code Snippet - Dark+",
"tagline": "VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"description": "VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "vscode"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-dark-plus.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-high-contrast",
"kind": "block",
"href": "/catalog/blocks/code-snippet-high-contrast",
"title": "Code Snippet - High Contrast",
"tagline": "VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"description": "VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "vscode"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-high-contrast.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-high-contrast-light",
"kind": "block",
"href": "/catalog/blocks/code-snippet-high-contrast-light",
"title": "Code Snippet - High Contrast Light",
"tagline": "VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"description": "VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "vscode"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-high-contrast-light.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-light-2026",
"kind": "block",
"href": "/catalog/blocks/code-snippet-light-2026",
"title": "Code Snippet - Light 2026",
"tagline": "VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"description": "VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "vscode"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-light-2026.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-light-modern",
"kind": "block",
"href": "/catalog/blocks/code-snippet-light-modern",
"title": "Code Snippet - Light Modern",
"tagline": "VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"description": "VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "vscode"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-light-modern.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-light-plus",
"kind": "block",
"href": "/catalog/blocks/code-snippet-light-plus",
"title": "Code Snippet - Light+",
"tagline": "VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"description": "VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "vscode"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-light-plus.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-monokai",
"kind": "block",
"href": "/catalog/blocks/code-snippet-monokai",
"title": "Code Snippet - Monokai",
"tagline": "VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"description": "VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "vscode"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-monokai.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-solarized-light",
"kind": "block",
"href": "/catalog/blocks/code-snippet-solarized-light",
"title": "Code Snippet - Solarized Light",
"tagline": "VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"description": "VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "vscode"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-solarized-light.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-visual-studio-dark",
"kind": "block",
"href": "/catalog/blocks/code-snippet-visual-studio-dark",
"title": "Code Snippet - Visual Studio Dark",
"tagline": "VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"description": "VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "vscode"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-visual-studio-dark.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-snippet-visual-studio-light",
"kind": "block",
"href": "/catalog/blocks/code-snippet-visual-studio-light",
"title": "Code Snippet - Visual Studio Light",
"tagline": "VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"description": "VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
"group": "code",
"section": "Code Snippets",
"tags": ["code", "developer", "showcase", "vscode"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/code-snippet-visual-studio-light.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "chromatic-radial-split",
"kind": "block",
"href": "/catalog/blocks/chromatic-radial-split",
"title": "Chromatic Radial Split",
"tagline": "Shader transition with chromatic aberration radial split",
"description": "Shader transition with chromatic aberration radial split",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/chromatic-radial-split.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "cinematic-zoom",
"kind": "block",
"href": "/catalog/blocks/cinematic-zoom",
"title": "Cinematic Zoom",
"tagline": "Shader transition with dramatic zoom blur",
"description": "Shader transition with dramatic zoom blur",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/cinematic-zoom.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "cross-warp-morph",
"kind": "block",
"href": "/catalog/blocks/cross-warp-morph",
"title": "Cross Warp Morph",
"tagline": "Shader transition with cross-warped morphing",
"description": "Shader transition with cross-warped morphing",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/cross-warp-morph.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "domain-warp-dissolve",
"kind": "block",
"href": "/catalog/blocks/domain-warp-dissolve",
"title": "Domain Warp Dissolve",
"tagline": "Shader transition with fractal noise domain warping",
"description": "Shader transition with fractal noise domain warping",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/domain-warp-dissolve.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "flash-through-white",
"kind": "block",
"href": "/catalog/blocks/flash-through-white",
"title": "Flash Through White",
"tagline": "Shader transition with white flash crossfade",
"description": "Shader transition with white flash crossfade",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/flash-through-white.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "glitch",
"kind": "block",
"href": "/catalog/blocks/glitch",
"title": "Glitch",
"tagline": "Shader transition with digital glitch artifacts",
"description": "Shader transition with digital glitch artifacts",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/glitch.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "gravitational-lens",
"kind": "block",
"href": "/catalog/blocks/gravitational-lens",
"title": "Gravitational Lens",
"tagline": "Shader transition with gravitational lensing distortion",
"description": "Shader transition with gravitational lensing distortion",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/gravitational-lens.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "light-leak",
"kind": "block",
"href": "/catalog/blocks/light-leak",
"title": "Light Leak",
"tagline": "Shader transition with cinematic light leak overlay",
"description": "Shader transition with cinematic light leak overlay",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/light-leak.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "ridged-burn",
"kind": "block",
"href": "/catalog/blocks/ridged-burn",
"title": "Ridged Burn",
"tagline": "Shader transition with ridged turbulence burn effect",
"description": "Shader transition with ridged turbulence burn effect",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/ridged-burn.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "ripple-waves",
"kind": "block",
"href": "/catalog/blocks/ripple-waves",
"title": "Ripple Waves",
"tagline": "Shader transition with concentric ripple wave distortion",
"description": "Shader transition with concentric ripple wave distortion",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/ripple-waves.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "sdf-iris",
"kind": "block",
"href": "/catalog/blocks/sdf-iris",
"title": "SDF Iris",
"tagline": "Shader transition with signed distance field iris reveal",
"description": "Shader transition with signed distance field iris reveal",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/sdf-iris.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "swirl-vortex",
"kind": "block",
"href": "/catalog/blocks/swirl-vortex",
"title": "Swirl Vortex",
"tagline": "Shader transition with swirling vortex distortion",
"description": "Shader transition with swirling vortex distortion",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/swirl-vortex.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "thermal-distortion",
"kind": "block",
"href": "/catalog/blocks/thermal-distortion",
"title": "Thermal Distortion",
"tagline": "Shader transition with heat haze thermal distortion",
"description": "Shader transition with heat haze thermal distortion",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/thermal-distortion.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "whip-pan",
"kind": "block",
"href": "/catalog/blocks/whip-pan",
"title": "Whip Pan",
"tagline": "Shader transition simulating a fast camera whip pan",
"description": "Shader transition simulating a fast camera whip pan",
"group": "transitions",
"section": "Shader Transitions",
"tags": ["transition", "shader"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/whip-pan.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "beat-freeze-cut",
"kind": "block",
"href": "/catalog/blocks/beat-freeze-cut",
"title": "Beat Freeze Cut",
"tagline": "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.",
"description": "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "music", "beat-driven", "freeze-frame"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/beat-freeze-cut.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "hw-scribble-transition",
"kind": "block",
"href": "/catalog/blocks/hw-scribble-transition",
"title": "Scribble Transition",
"tagline": "Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears",
"description": "Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["handwritten", "transition", "wipe"],
"tech": [],
"duration": 2.2,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/hw-scribble-transition.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "mk-clone-wall-transition",
"kind": "block",
"href": "/catalog/blocks/mk-clone-wall-transition",
"title": "Text Clone Wall Transition",
"tagline": "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered",
"description": "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "typography", "wipe"],
"tech": [],
"duration": 2.4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/mk-clone-wall-transition.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "organic-light-leak-overlay",
"kind": "block",
"href": "/catalog/blocks/organic-light-leak-overlay",
"title": "Organic Light Leak Overlay",
"tagline": "Finite CSS light-leak overlay for memory beats and motivated transitions",
"description": "Finite CSS light-leak overlay for memory beats and motivated transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["light-leak", "film", "memory", "transition", "overlay", "media-treatment-overlay"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/organic-light-leak-overlay.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-3d",
"kind": "block",
"href": "/catalog/blocks/transitions-3d",
"title": "3D Transitions",
"tagline": "Showcase of 3D perspective flip and rotate transitions",
"description": "Showcase of 3D perspective flip and rotate transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-3d.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-blur",
"kind": "block",
"href": "/catalog/blocks/transitions-blur",
"title": "Blur Transitions",
"tagline": "Showcase of blur-based transitions between scenes",
"description": "Showcase of blur-based transitions between scenes",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 20,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-blur.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-cover",
"kind": "block",
"href": "/catalog/blocks/transitions-cover",
"title": "Cover Transitions",
"tagline": "Showcase of cover/uncover slide transitions",
"description": "Showcase of cover/uncover slide transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 21,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-cover.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-destruction",
"kind": "block",
"href": "/catalog/blocks/transitions-destruction",
"title": "Destruction Transitions",
"tagline": "Showcase of destructive break-apart transitions",
"description": "Showcase of destructive break-apart transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 14,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-destruction.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-dissolve",
"kind": "block",
"href": "/catalog/blocks/transitions-dissolve",
"title": "Dissolve Transitions",
"tagline": "Showcase of dissolve and fade transitions",
"description": "Showcase of dissolve and fade transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 24,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-dissolve.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-distortion",
"kind": "block",
"href": "/catalog/blocks/transitions-distortion",
"title": "Distortion Transitions",
"tagline": "Showcase of warp and distortion transitions",
"description": "Showcase of warp and distortion transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 21,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-distortion.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-grid",
"kind": "block",
"href": "/catalog/blocks/transitions-grid",
"title": "Grid Transitions",
"tagline": "Showcase of grid-based tile transitions",
"description": "Showcase of grid-based tile transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 11,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-grid.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-light",
"kind": "block",
"href": "/catalog/blocks/transitions-light",
"title": "Light Transitions",
"tagline": "Showcase of light-based glow and flash transitions",
"description": "Showcase of light-based glow and flash transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 21,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-light.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-mechanical",
"kind": "block",
"href": "/catalog/blocks/transitions-mechanical",
"title": "Mechanical Transitions",
"tagline": "Showcase of mechanical shutter and iris transitions",
"description": "Showcase of mechanical shutter and iris transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 15,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-mechanical.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-other",
"kind": "block",
"href": "/catalog/blocks/transitions-other",
"title": "Other Transitions",
"tagline": "Showcase of miscellaneous creative transitions",
"description": "Showcase of miscellaneous creative transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 20,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-other.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-push",
"kind": "block",
"href": "/catalog/blocks/transitions-push",
"title": "Push Transitions",
"tagline": "Showcase of push and slide transitions",
"description": "Showcase of push and slide transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 24,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-push.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-radial",
"kind": "block",
"href": "/catalog/blocks/transitions-radial",
"title": "Radial Transitions",
"tagline": "Showcase of radial wipe and reveal transitions",
"description": "Showcase of radial wipe and reveal transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 20,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-radial.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "transitions-scale",
"kind": "block",
"href": "/catalog/blocks/transitions-scale",
"title": "Scale Transitions",
"tagline": "Showcase of scale and zoom transitions",
"description": "Showcase of scale and zoom transitions",
"group": "transitions",
"section": "CSS Transitions",
"tags": ["transition", "showcase"],
"tech": [],
"duration": 15,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/transitions-scale.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "animated-bar-chart",
"kind": "component",
"href": "/catalog/components/animated-bar-chart",
"title": "Animated Bar Chart",
"tagline": "A compact data card with deterministic bar growth and value callouts.",
"description": "A compact data card with deterministic bar growth and value callouts.",
"group": "data-charts",
"section": "Data",
"tags": ["data"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-bar-chart.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/animated-bar-chart.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "ascii-render-pass",
"kind": "component",
"href": "/catalog/components/ascii-render-pass",
"title": "ASCII Render Pass",
"tagline": "A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine.",
"description": "A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine.",
"group": "data-charts",
"section": "Data",
"tags": ["motion-primitive", "experiment", "texture", "ascii", "quantize"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/ascii-render-pass.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "ascii-trail-reveal",
"kind": "component",
"href": "/catalog/components/ascii-trail-reveal",
"title": "ASCII Trail Reveal",
"tagline": "An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.",
"description": "An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.",
"group": "data-charts",
"section": "Data",
"tags": ["motion-primitive", "intro", "reveal", "ascii", "trail", "grid"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/ascii-trail-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "bar-chart-race",
"kind": "block",
"href": "/catalog/blocks/bar-chart-race",
"title": "Bar Chart Race",
"tagline": "Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads",
"description": "Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads",
"group": "data-charts",
"section": "Data",
"tags": ["data", "chart", "statistics", "ranking"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/bar-chart-race.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "chart-story",
"kind": "component",
"href": "/catalog/components/chart-story",
"title": "Chart Story",
"tagline": "One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum.",
"description": "One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum.",
"group": "data-charts",
"section": "Data",
"tags": ["motion-primitive", "proof", "stats", "chart", "bars", "line", "donut", "progress", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/chart-story.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "conic-progress-ring",
"kind": "component",
"href": "/catalog/components/conic-progress-ring",
"title": "Conic Progress Ring",
"tagline": "A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.",
"description": "A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.",
"group": "data-charts",
"section": "Data",
"tags": ["data", "progress", "ring", "conic-gradient", "prove", "demonstrate"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/conic-progress-ring.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "data-chart",
"kind": "block",
"href": "/catalog/blocks/data-chart",
"title": "Data Chart",
"tagline": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels",
"description": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels",
"group": "data-charts",
"section": "Data",
"tags": ["data", "chart", "statistics"],
"tech": [],
"duration": 15,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/data-chart.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "decline-chart",
"kind": "component",
"href": "/catalog/components/decline-chart",
"title": "Decline Chart",
"tagline": "A metric line draws downward as its value counts down and the ambient background darkens in lockstep.",
"description": "A metric line draws downward as its value counts down and the ambient background darkens in lockstep.",
"group": "data-charts",
"section": "Data",
"tags": ["motion-primitive", "data", "chart", "decline", "metric", "problem"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/decline-chart.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "logo-wall",
"kind": "component",
"href": "/catalog/components/logo-wall",
"title": "Logo Wall",
"tagline": "A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.",
"description": "A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.",
"group": "data-charts",
"section": "Data",
"tags": ["data", "logos", "social-proof", "stagger", "prove"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/logo-wall.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "mk-line-graph",
"kind": "block",
"href": "/catalog/blocks/mk-line-graph",
"title": "Minimal Line Graph",
"tagline": "One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend",
"description": "One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend",
"group": "data-charts",
"section": "Data",
"tags": ["data-viz", "chart", "graph", "minimal"],
"tech": [],
"duration": 7,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/mk-line-graph.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "spain-map",
"kind": "block",
"href": "/catalog/blocks/spain-map",
"title": "Spain Map",
"tagline": "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection",
"description": "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection",
"group": "data-charts",
"section": "Data",
"tags": ["data", "map", "geography", "spain", "europe", "choropleth"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/spain-map.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "star-rating-fill",
"kind": "component",
"href": "/catalog/components/star-rating-fill",
"title": "Star Rating Fill",
"tagline": "A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.",
"description": "A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.",
"group": "data-charts",
"section": "Data",
"tags": ["data", "rating", "stars", "fractional", "fill", "prove"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/star-rating-fill.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "us-map",
"kind": "block",
"href": "/catalog/blocks/us-map",
"title": "US Map",
"tagline": "Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP",
"description": "Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP",
"group": "data-charts",
"section": "Data",
"tags": ["data", "map", "geography", "usa", "choropleth"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/us-map.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "us-map-bubble",
"kind": "block",
"href": "/catalog/blocks/us-map-bubble",
"title": "US Bubble Map",
"tagline": "Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map",
"description": "Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map",
"group": "data-charts",
"section": "Data",
"tags": ["data", "map", "geography", "usa", "bubble", "cities"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/us-map-bubble.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "us-map-flow",
"kind": "block",
"href": "/catalog/blocks/us-map-flow",
"title": "US Flow Map",
"tagline": "Animated connection arcs between US cities over a base map — composable origin-destination flow visualization",
"description": "Animated connection arcs between US cities over a base map — composable origin-destination flow visualization",
"group": "data-charts",
"section": "Data",
"tags": ["data", "map", "geography", "usa", "flow", "connections", "arcs"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/us-map-flow.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "us-map-hex",
"kind": "block",
"href": "/catalog/blocks/us-map-hex",
"title": "US Hex Grid Map",
"tagline": "Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label",
"description": "Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label",
"group": "data-charts",
"section": "Data",
"tags": ["data", "map", "geography", "usa", "hexgrid", "tilegrid"],
"tech": [],
"duration": 10,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/us-map-hex.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "world-map",
"kind": "block",
"href": "/catalog/blocks/world-map",
"title": "World Map",
"tagline": "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection",
"description": "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection",
"group": "data-charts",
"section": "Data",
"tags": ["data", "map", "geography", "world", "choropleth"],
"tech": [],
"duration": 14,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/world-map.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "ai-chat-reveal",
"kind": "block",
"href": "/catalog/blocks/ai-chat-reveal",
"title": "AI Chat Reveal",
"tagline": "A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card",
"description": "A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "mock-ui", "ai", "chat", "vertical", "ad-template"],
"tech": [],
"duration": 19.3333,
"width": 1080,
"height": 1920,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/ai-chat-reveal.json",
"heavy": false,
"width": 1080,
"height": 1920
}
}, {
"id": "app-showcase",
"kind": "block",
"href": "/catalog/blocks/app-showcase",
"title": "App Showcase",
"tagline": "Fitness app product showcase with three floating smartphone screens",
"description": "Fitness app product showcase with three floating smartphone screens",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "app", "3d"],
"tech": [],
"duration": 5.5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/app-showcase.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "apple-money-count",
"kind": "block",
"href": "/catalog/blocks/apple-money-count",
"title": "Apple Money Count",
"tagline": "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.",
"description": "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "finance", "kinetic", "youtube", "sfx"],
"tech": [],
"duration": 5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/apple-money-count.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "blue-sweater-intro-video",
"kind": "block",
"href": "/catalog/blocks/blue-sweater-intro-video",
"title": "Blue Sweater Intro Video",
"tagline": "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.",
"description": "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "ai", "creator", "sfx"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/blue-sweater-intro-video.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "camera-dolly-zoom",
"kind": "block",
"href": "/catalog/blocks/camera-dolly-zoom",
"title": "Dolly Zoom (Vertigo Shot)",
"tagline": "Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move.",
"description": "Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move.",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["camera", "depth", "3d", "cinematic"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/camera-dolly-zoom.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "chatgpt-exchange",
"kind": "block",
"href": "/catalog/blocks/chatgpt-exchange",
"title": "ChatGPT Exchange",
"tagline": "A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result",
"description": "A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "mock-ui", "ai", "chat", "vertical", "ad-template"],
"tech": [],
"duration": 14.9,
"width": 1080,
"height": 1920,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/chatgpt-exchange.json",
"heavy": false,
"width": 1080,
"height": 1920
}
}, {
"id": "claude-exchange",
"kind": "block",
"href": "/catalog/blocks/claude-exchange",
"title": "Claude Exchange",
"tagline": "A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions",
"description": "A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "mock-ui", "ai", "chat", "vertical", "ad-template"],
"tech": [],
"duration": 21.4,
"width": 1080,
"height": 1920,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/claude-exchange.json",
"heavy": false,
"width": 1080,
"height": 1920
}
}, {
"id": "cosmic-orb",
"kind": "block",
"href": "/catalog/blocks/cosmic-orb",
"title": "Cosmic Orb",
"tagline": "An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge.",
"description": "An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge.",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["webgl", "shader", "background", "showcase", "3d"],
"tech": [],
"duration": 10,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/cosmic-orb.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "gallery-tunnel",
"kind": "block",
"href": "/catalog/blocks/gallery-tunnel",
"title": "Gallery Tunnel",
"tagline": "An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog.",
"description": "An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog.",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["webgl", "3d", "background", "showcase", "depth", "loop"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/gallery-tunnel.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "heygen-avatar-promo-card",
"kind": "block",
"href": "/catalog/blocks/heygen-avatar-promo-card",
"title": "HeyGen Avatar Promo Card",
"tagline": "A portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout",
"description": "A portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "avatar", "promotion", "vertical"],
"tech": [],
"duration": 10,
"width": 1080,
"height": 1920,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/heygen-avatar-promo-card.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/heygen-avatar-promo-card.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/heygen-avatar-promo-card.json",
"heavy": false,
"width": 1080,
"height": 1920
}
}, {
"id": "message-thread-reveal",
"kind": "block",
"href": "/catalog/blocks/message-thread-reveal",
"title": "Message Thread Reveal",
"tagline": "A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. The complete chat ad-template, measured message by message",
"description": "A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. The complete chat ad-template, measured message by message",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "mock-ui", "chat", "vertical", "ad-template"],
"tech": [],
"duration": 25.7667,
"width": 1080,
"height": 1920,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/message-thread-reveal.json",
"heavy": false,
"width": 1080,
"height": 1920
}
}, {
"id": "north-korea-locked-down",
"kind": "block",
"href": "/catalog/blocks/north-korea-locked-down",
"title": "North Korea Locked Down",
"tagline": "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.",
"description": "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "map", "annotation", "youtube", "kinetic"],
"tech": [],
"duration": 7,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/north-korea-locked-down.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "notes-reveal",
"kind": "block",
"href": "/catalog/blocks/notes-reveal",
"title": "Notes Reveal",
"tagline": "A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist",
"description": "A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "mock-ui", "notes", "typing", "vertical", "ad-template"],
"tech": [],
"duration": 24.85,
"width": 1080,
"height": 1920,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/notes-reveal.json",
"heavy": false,
"width": 1080,
"height": 1920
}
}, {
"id": "notification-cascade",
"kind": "block",
"href": "/catalog/blocks/notification-cascade",
"title": "Notification Cascade",
"tagline": "Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card",
"description": "Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "mock-ui", "notification", "vertical", "ad-template"],
"tech": [],
"duration": 14,
"width": 1080,
"height": 1920,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/notification-cascade.json",
"heavy": false,
"width": 1080,
"height": 1920
}
}, {
"id": "nyc-paris-flight",
"kind": "block",
"href": "/catalog/blocks/nyc-paris-flight",
"title": "NYC Paris Flight",
"tagline": "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.",
"description": "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "travel", "map", "youtube", "sfx"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/nyc-paris-flight.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "oscilloscope-trace",
"kind": "block",
"href": "/catalog/blocks/oscilloscope-trace",
"title": "Oscilloscope Trace",
"tagline": "CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows",
"description": "CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["instrument", "data", "showcase", "retro"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/oscilloscope-trace.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/oscilloscope-trace.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/oscilloscope-trace.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "rack-focus",
"kind": "block",
"href": "/catalog/blocks/rack-focus",
"title": "Rack Focus",
"tagline": "A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat's eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables.",
"description": "A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat's eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables.",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["webgl", "shader", "camera", "depth", "cinematic", "showcase"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/rack-focus.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "share-sheet-carousel",
"kind": "block",
"href": "/catalog/blocks/share-sheet-carousel",
"title": "Share-Sheet Carousel",
"tagline": "A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap",
"description": "A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "mock-ui", "share-sheet", "vertical", "ad-template"],
"tech": [],
"duration": 7.2333,
"width": 1080,
"height": 1920,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/share-sheet-carousel.json",
"heavy": false,
"width": 1080,
"height": 1920
}
}, {
"id": "slack-notification-ad",
"kind": "block",
"href": "/catalog/blocks/slack-notification-ad",
"title": "Slack Notification Ad",
"tagline": "A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff",
"description": "A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "mock-ui", "notification", "vertical", "ad-template"],
"tech": [],
"duration": 12,
"width": 1080,
"height": 1920,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/slack-notification-ad.json",
"heavy": false,
"width": 1080,
"height": 1920
}
}, {
"id": "ui-3d-reveal",
"kind": "block",
"href": "/catalog/blocks/ui-3d-reveal",
"title": "3D UI Reveal",
"tagline": "Perspective 3D reveal animation for UI elements",
"description": "Perspective 3D reveal animation for UI elements",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["showcase", "3d", "reveal"],
"tech": [],
"duration": 13,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/ui-3d-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "vfx-anamorphic-flare",
"kind": "block",
"href": "/catalog/blocks/vfx-anamorphic-flare",
"title": "Anamorphic Streak Flare",
"tagline": "A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint.",
"description": "A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint.",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["vfx", "background", "showcase", "optical", "canvas"],
"tech": [],
"duration": 10,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/vfx-anamorphic-flare.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "vpn-youtube-spot",
"kind": "block",
"href": "/catalog/blocks/vpn-youtube-spot",
"title": "VPN YouTube Spot",
"tagline": "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.",
"description": "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.",
"group": "scenes-demos",
"section": "Showcases",
"tags": ["app", "showcase", "youtube", "sfx"],
"tech": [],
"duration": 7,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/vpn-youtube-spot.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "browser-device-stage",
"kind": "component",
"href": "/catalog/components/browser-device-stage",
"title": "Browser Device Stage",
"tagline": "A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap.",
"description": "A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["stage", "product-demo", "device", "browser", "phone", "slot", "chrome"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/browser-device-stage.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "code-terminal-run",
"kind": "component",
"href": "/catalog/components/code-terminal-run",
"title": "Code Terminal Run",
"tagline": "A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.",
"description": "A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "terminal", "typing", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/code-terminal-run.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "cursor-glyph-trail",
"kind": "component",
"href": "/catalog/components/cursor-glyph-trail",
"title": "Cursor Glyph Trail",
"tagline": "An actor travels an authored path depositing small dithered glyphs at its past positions, each popping in and decaying in place, stamp rate scaling with the actor's velocity.",
"description": "An actor travels an authored path depositing small dithered glyphs at its past positions, each popping in and decaying in place, stamp rate scaling with the actor's velocity.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "demonstrate", "trail", "cursor", "glyphs", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/cursor-glyph-trail.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "echo-trail",
"kind": "component",
"href": "/catalog/components/echo-trail",
"title": "Echo Trail",
"tagline": "A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest.",
"description": "A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "demonstrate", "trail", "onion-skin", "ghosts", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/echo-trail.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "focus-swap",
"kind": "component",
"href": "/catalog/components/focus-swap",
"title": "Focus Swap",
"tagline": "Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.",
"description": "Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["effect", "ui-props", "focus", "blur", "attention", "demonstrate"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/focus-swap.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "icon-morph-beat",
"kind": "component",
"href": "/catalog/components/icon-morph-beat",
"title": "Icon Morph Beat",
"tagline": "An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.",
"description": "An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "icon", "morph", "state-change", "completion"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/icon-morph-beat.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "native-notification-pop",
"kind": "component",
"href": "/catalog/components/native-notification-pop",
"title": "Native Notification Pop",
"tagline": "One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit.",
"description": "One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "overlay", "notification", "spring"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/native-notification-pop.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "notification-stack",
"kind": "component",
"href": "/catalog/components/notification-stack",
"title": "Notification Stack",
"tagline": "1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.",
"description": "1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "notification", "stack", "stagger"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/notification-stack.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "offset-path-traveler",
"kind": "component",
"href": "/catalog/components/offset-path-traveler",
"title": "Offset Path Traveler",
"tagline": "A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.",
"description": "A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "path", "traveler", "auto-rotate"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/offset-path-traveler.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "press-ripple",
"kind": "component",
"href": "/catalog/components/press-ripple",
"title": "Press Ripple",
"tagline": "A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with ink ripple rings, then exits off-stage while the pressed state holds.",
"description": "A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with ink ripple rings, then exits off-stage while the pressed state holds.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "cursor", "press", "ripple", "payoff"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/press-ripple.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "pull-to-refresh",
"kind": "component",
"href": "/catalog/components/pull-to-refresh",
"title": "Pull to Refresh",
"tagline": "A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.",
"description": "A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["pointer", "pointers", "mobile", "gesture", "interaction", "refresh", "demonstrate"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/pull-to-refresh.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "screen-flow-carousel",
"kind": "component",
"href": "/catalog/components/screen-flow-carousel",
"title": "Screen Flow Carousel",
"tagline": "Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults.",
"description": "Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["product-demo", "feature-tour", "carousel", "rail", "slot", "screens"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/screen-flow-carousel.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "segmentation-flood",
"kind": "component",
"href": "/catalog/components/segmentation-flood",
"title": "Segmentation Flood",
"tagline": "Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean.",
"description": "Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "ai", "hud", "canvas", "deterministic", "experiment"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/segmentation-flood.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "soft-blob-touch",
"kind": "component",
"href": "/catalog/components/soft-blob-touch",
"title": "Soft Blob Touch",
"tagline": "A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere.",
"description": "A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "material", "blob", "touch", "grain"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/soft-blob-touch.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "spring-stack-shuffle",
"kind": "component",
"href": "/catalog/components/spring-stack-shuffle",
"title": "Spring Stack Shuffle",
"tagline": "A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved.",
"description": "A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "physics", "stack", "interruptible-spring"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/spring-stack-shuffle.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "state-chip-rail",
"kind": "component",
"href": "/catalog/components/state-chip-rail",
"title": "State Chip Rail",
"tagline": "A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim, pending chips hollow, optional badges pop beside one state.",
"description": "A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim, pending chips hollow, optional badges pop beside one state.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "state-machine", "status", "chips", "rail"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/state-chip-rail.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "sticky-mock-swap",
"kind": "component",
"href": "/catalog/components/sticky-mock-swap",
"title": "Sticky Mock Swap",
"tagline": "A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.",
"description": "A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "sticky", "mock", "crossfade", "feature-tour"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/sticky-mock-swap.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "telemetry-hud",
"kind": "component",
"href": "/catalog/components/telemetry-hud",
"title": "Telemetry HUD",
"tagline": "Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero.",
"description": "Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "hud", "telemetry", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/telemetry-hud.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "toggle-flip",
"kind": "component",
"href": "/catalog/components/toggle-flip",
"title": "Toggle Flip",
"tagline": "An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family.",
"description": "An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["prop", "ui-props", "toggle", "interaction", "reference-prop", "demonstrate"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/toggle-flip.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "tracing-beam",
"kind": "component",
"href": "/catalog/components/tracing-beam",
"title": "Tracing Beam",
"tagline": "A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.",
"description": "A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "attention", "beam", "path", "spotlight"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/tracing-beam.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "typed-prompt",
"kind": "component",
"href": "/catalog/components/typed-prompt",
"title": "Typed Prompt",
"tagline": "A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word.",
"description": "A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["motion-primitive", "product-demo", "typing", "prompt", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/typed-prompt.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "vector-editor-rig",
"kind": "component",
"href": "/catalog/components/vector-editor-rig",
"title": "Vector Editor Rig",
"tagline": "A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.",
"description": "A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.",
"group": "scenes-demos",
"section": "Product Demo",
"tags": ["prop", "ui-props", "demonstrate", "vector", "design-tool", "pen-tool", "bezier", "app-chrome"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/vector-editor-rig.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "editorial-flash-overlay",
"kind": "block",
"href": "/catalog/blocks/editorial-flash-overlay",
"title": "Editorial Flash Overlay",
"tagline": "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal",
"description": "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal",
"group": "scenes-demos",
"section": "Social Overlays",
"tags": ["flash", "editorial", "social", "light", "transition", "overlay", "media-treatment-overlay"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/editorial-flash-overlay.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "freeze-frame-dressing",
"kind": "block",
"href": "/catalog/blocks/freeze-frame-dressing",
"title": "Freeze-Frame Dressing",
"tagline": "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject",
"description": "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject",
"group": "scenes-demos",
"section": "Social Overlays",
"tags": ["freeze-frame", "cutout", "scrapbook", "paper", "social", "overlay", "media-treatment-overlay"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/freeze-frame-dressing.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "instagram-follow",
"kind": "block",
"href": "/catalog/blocks/instagram-follow",
"title": "Instagram Follow",
"tagline": "Animated Instagram follow overlay with profile card and follow button",
"description": "Animated Instagram follow overlay with profile card and follow button",
"group": "scenes-demos",
"section": "Social Overlays",
"tags": ["social", "overlay", "instagram"],
"tech": [],
"duration": 4.5,
"width": 1080,
"height": 1920,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/instagram-follow.json",
"heavy": false,
"width": 1080,
"height": 1920
}
}, {
"id": "macos-notification",
"kind": "block",
"href": "/catalog/blocks/macos-notification",
"title": "macOS Notification",
"tagline": "Animated macOS-style notification banner with app icon and message",
"description": "Animated macOS-style notification banner with app icon and message",
"group": "scenes-demos",
"section": "Social Overlays",
"tags": ["social", "overlay", "notification"],
"tech": [],
"duration": 5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/macos-notification.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "reddit-post",
"kind": "block",
"href": "/catalog/blocks/reddit-post",
"title": "Reddit Post Card",
"tagline": "Animated Reddit post card overlay with upvotes and comments",
"description": "Animated Reddit post card overlay with upvotes and comments",
"group": "scenes-demos",
"section": "Social Overlays",
"tags": ["social", "overlay", "reddit"],
"tech": [],
"duration": 5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/reddit-post.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "spotify-card",
"kind": "block",
"href": "/catalog/blocks/spotify-card",
"title": "Spotify Now Playing",
"tagline": "Animated Spotify now-playing card with album art and progress bar",
"description": "Animated Spotify now-playing card with album art and progress bar",
"group": "scenes-demos",
"section": "Social Overlays",
"tags": ["social", "overlay", "spotify"],
"tech": [],
"duration": 5,
"width": 1080,
"height": 1920,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/spotify-card.json",
"heavy": false,
"width": 1080,
"height": 1920
}
}, {
"id": "thread-message-stack",
"kind": "block",
"href": "/catalog/blocks/thread-message-stack",
"title": "Thread Message Stack",
"tagline": "A source-owned editable conversation stack with arbitrary incoming and outgoing messages",
"description": "A source-owned editable conversation stack with arbitrary incoming and outgoing messages",
"group": "scenes-demos",
"section": "Social Overlays",
"tags": ["social", "conversation", "messages"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/thread-message-stack.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "tiktok-follow",
"kind": "block",
"href": "/catalog/blocks/tiktok-follow",
"title": "TikTok Follow",
"tagline": "Animated TikTok follow overlay with profile card and follow button",
"description": "Animated TikTok follow overlay with profile card and follow button",
"group": "scenes-demos",
"section": "Social Overlays",
"tags": ["social", "overlay", "tiktok"],
"tech": [],
"duration": 4.5,
"width": 1080,
"height": 1920,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/tiktok-follow.json",
"heavy": false,
"width": 1080,
"height": 1920
}
}, {
"id": "x-post",
"kind": "block",
"href": "/catalog/blocks/x-post",
"title": "X Post Card",
"tagline": "Animated X/Twitter post card overlay with engagement metrics",
"description": "Animated X/Twitter post card overlay with engagement metrics",
"group": "scenes-demos",
"section": "Social Overlays",
"tags": ["social", "overlay", "twitter"],
"tech": [],
"duration": 5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/x-post.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "yt-comment-card",
"kind": "block",
"href": "/catalog/blocks/yt-comment-card",
"title": "Comment Cards",
"tagline": "Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips",
"description": "Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips",
"group": "scenes-demos",
"section": "Social Overlays",
"tags": ["social", "comments", "creator", "overlay"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/yt-comment-card.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "yt-lower-third",
"kind": "block",
"href": "/catalog/blocks/yt-lower-third",
"title": "YouTube Lower Third",
"tagline": "Animated YouTube subscribe lower third with avatar and channel info",
"description": "Animated YouTube subscribe lower third with avatar and channel info",
"group": "scenes-demos",
"section": "Social Overlays",
"tags": ["social", "overlay", "youtube"],
"tech": [],
"duration": 4.5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/yt-lower-third.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "aurora-drift",
"kind": "component",
"href": "/catalog/components/aurora-drift",
"title": "Aurora Drift",
"tagline": "Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.",
"description": "Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "background", "aurora", "gradient", "ambient", "loopable"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/aurora-drift.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "beat-accent",
"kind": "component",
"href": "/catalog/components/beat-accent",
"title": "Beat Accent",
"tagline": "A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.",
"description": "A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "effects", "burst", "sting", "emphasize", "impact"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/beat-accent.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "beat-pulse-background",
"kind": "component",
"href": "/catalog/components/beat-pulse-background",
"title": "Beat Pulse Background",
"tagline": "An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.",
"description": "An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "background", "beat", "pulse", "rhythmic", "reactive"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/beat-pulse-background.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "chat-thread",
"kind": "component",
"href": "/catalog/components/chat-thread",
"title": "Chat Thread",
"tagline": "The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits",
"description": "The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "chat", "mock-ui", "conversation", "vertical"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/chat-thread.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "constellation-hub",
"kind": "component",
"href": "/catalog/components/constellation-hub",
"title": "Constellation Hub",
"tagline": "Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.",
"description": "Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "feature-tour", "hub", "nodes", "connector", "reveal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/constellation-hub.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "count-up",
"kind": "component",
"href": "/catalog/components/count-up",
"title": "Count Up",
"tagline": "A token-native stat counter that eases between values and lands with a restrained scale pulse.",
"description": "A token-native stat counter that eases between values and lands with a restrained scale pulse.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "proof", "stats", "counter", "number", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/count-up.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "cta-close",
"kind": "component",
"href": "/catalog/components/cta-close",
"title": "CTA Close",
"tagline": "A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still.",
"description": "A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "ui-props", "cta", "end-card", "close", "ask"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/cta-close.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "cta-lockup",
"kind": "component",
"href": "/catalog/components/cta-lockup",
"title": "CTA Lockup",
"tagline": "A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence.",
"description": "A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "ui-props", "cta", "end-card", "lockup", "ask"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/cta-lockup.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "facet-morph",
"kind": "component",
"href": "/catalog/components/facet-morph",
"title": "Facet Morph",
"tagline": "A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold.",
"description": "A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "intro", "morph", "low-poly", "svg", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/facet-morph.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "gesture-tap",
"kind": "component",
"href": "/catalog/components/gesture-tap",
"title": "Gesture Tap",
"tagline": "A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.",
"description": "A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "gesture", "tap", "interaction", "ui-props"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/gesture-tap.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "gloss-sweep",
"kind": "component",
"href": "/catalog/components/gloss-sweep",
"title": "Gloss Sweep",
"tagline": "A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.",
"description": "A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "celebration", "gloss", "card", "badge", "payoff"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/gloss-sweep.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "grade-split-reveal",
"kind": "component",
"href": "/catalog/components/grade-split-reveal",
"title": "Grade Split Reveal",
"tagline": "The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame. Both looks are real HyperFrames color grading run through the WebGL shader, so the preview and the render match.",
"description": "The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame. Both looks are real HyperFrames color grading run through the WebGL shader, so the preview and the render match.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["color-grading", "media", "compare", "reveal", "motion-primitive", "grade"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/grade-split-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "grid-card-assemble",
"kind": "component",
"href": "/catalog/components/grid-card-assemble",
"title": "Grid Card Assemble",
"tagline": "N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.",
"description": "N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "layout", "grid", "list", "stagger", "assemble", "feature-tour"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/grid-card-assemble.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "light-sweep-pass",
"kind": "component",
"href": "/catalog/components/light-sweep-pass",
"title": "Light Sweep Pass",
"tagline": "A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty.",
"description": "A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "overlay", "light", "sweep", "slots", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/light-sweep-pass.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "locked-nucleus-orbit",
"kind": "component",
"href": "/catalog/components/locked-nucleus-orbit",
"title": "Locked Nucleus Orbit",
"tagline": "A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.",
"description": "A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "intro", "reveal", "orbit", "lockup", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/locked-nucleus-orbit.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "logo-sting",
"kind": "component",
"href": "/catalog/components/logo-sting",
"title": "Logo Sting",
"tagline": "A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.",
"description": "A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "brand", "logo", "sting", "impact", "reveal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/logo-sting.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "marker-checklist-card",
"kind": "component",
"href": "/catalog/components/marker-checklist-card",
"title": "Marker Checklist Card",
"tagline": "A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows",
"description": "A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "handwritten", "checklist", "paper", "marker"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/marker-checklist-card.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "modal-morph",
"kind": "component",
"href": "/catalog/components/modal-morph",
"title": "Modal Morph",
"tagline": "A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time.",
"description": "A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "structure", "flip", "shared-element", "modal", "deterministic", "experiment"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/modal-morph.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "multi-device-splay",
"kind": "component",
"href": "/catalog/components/multi-device-splay",
"title": "Multi Device Splay",
"tagline": "Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.",
"description": "Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "device", "phone", "tablet", "desktop", "splay"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/multi-device-splay.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "notes-typing",
"kind": "component",
"href": "/catalog/components/notes-typing",
"title": "Notes Typing",
"tagline": "The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter",
"description": "The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "notes", "typing", "mock-ui", "vertical"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/notes-typing.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "outline-draw",
"kind": "component",
"href": "/catalog/components/outline-draw",
"title": "Outline Draw",
"tagline": "A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.",
"description": "A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "effects", "outline", "border", "mask", "proof"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/outline-draw.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "oversized-cursor",
"kind": "component",
"href": "/catalog/components/oversized-cursor",
"title": "Oversized Cursor",
"tagline": "A deliberately oversized macOS-style pointer that enters off-screen, travels to a target, clicks to ignite a visible response, then exits",
"description": "A deliberately oversized macOS-style pointer that enters off-screen, travels to a target, clicks to ignite a visible response, then exits",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "actor", "cursor", "pointer", "interaction"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/oversized-cursor.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "particle-image-reveal",
"kind": "component",
"href": "/catalog/components/particle-image-reveal",
"title": "Particle Image Reveal",
"tagline": "A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean.",
"description": "A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "intros-reveals", "particles", "reveal", "canvas", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/particle-image-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "physical-exit",
"kind": "component",
"href": "/catalog/components/physical-exit",
"title": "Physical Exit",
"tagline": "A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading.",
"description": "A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "exit", "momentum", "toss", "drop", "slide"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/physical-exit.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "radial-surround",
"kind": "component",
"href": "/catalog/components/radial-surround",
"title": "Radial Surround",
"tagline": "Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.",
"description": "Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "problem-setup", "radial", "ring", "surround", "converge"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/radial-surround.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "scroll-feed",
"kind": "component",
"href": "/catalog/components/scroll-feed",
"title": "Scroll Feed",
"tagline": "A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.",
"description": "A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "effects", "scroll", "feed", "loop", "agitation"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/scroll-feed.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "slit-scan-reveal",
"kind": "component",
"href": "/catalog/components/slit-scan-reveal",
"title": "Slit Scan Reveal",
"tagline": "The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent.",
"description": "The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "time", "slit-scan", "canvas", "deterministic", "experiment"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/slit-scan-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "social-proof-card",
"kind": "component",
"href": "/catalog/components/social-proof-card",
"title": "Social Proof Card",
"tagline": "The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup",
"description": "The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "social-proof", "end-card", "cta", "vertical"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/social-proof-card.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "split-tilt-cards",
"kind": "component",
"href": "/catalog/components/split-tilt-cards",
"title": "Split Tilt Cards",
"tagline": "Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults.",
"description": "Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "layout", "compare", "holdable", "book-open", "tilt", "slots"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/split-tilt-cards.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "spring-pop",
"kind": "component",
"href": "/catalog/components/spring-pop",
"title": "Spring Pop",
"tagline": "A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.",
"description": "A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "effects", "spring", "overshoot", "pop", "reveal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/spring-pop.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "stitched-text-draw",
"kind": "component",
"href": "/catalog/components/stitched-text-draw",
"title": "Stitched Text Draw",
"tagline": "Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter.",
"description": "Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "experiment", "type", "craft", "stitch", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/stitched-text-draw.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "stop-motion-cadence",
"kind": "component",
"href": "/catalog/components/stop-motion-cadence",
"title": "Stop Motion Cadence",
"tagline": "The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames.",
"description": "The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "time-law", "stop-motion", "stepped", "boil", "deterministic", "experiment"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/stop-motion-cadence.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "svg-stroke-trace",
"kind": "component",
"href": "/catalog/components/svg-stroke-trace",
"title": "SVG Stroke Trace",
"tagline": "An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.",
"description": "An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "intro", "reveal", "svg", "stroke", "line-draw"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/svg-stroke-trace.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "swipe-rail",
"kind": "component",
"href": "/catalog/components/swipe-rail",
"title": "Swipe Rail",
"tagline": "A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.",
"description": "A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "interaction", "gesture", "swipe", "cards", "rail"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/swipe-rail.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "testimonial-proof-card",
"kind": "component",
"href": "/catalog/components/testimonial-proof-card",
"title": "Testimonial Proof Card",
"tagline": "A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands.",
"description": "A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "proof", "testimonial", "quote", "social-proof", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/testimonial-proof-card.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "touch-indicator",
"kind": "component",
"href": "/catalog/components/touch-indicator",
"title": "Touch Indicator",
"tagline": "A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass, causes a same-frame response, and lifts. Tap or swipe, picked by variable.",
"description": "A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass, causes a same-frame response, and lifts. Tap or swipe, picked by variable.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "mobile", "gesture", "touch", "pointer"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/touch-indicator.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "trust-strip",
"kind": "component",
"href": "/catalog/components/trust-strip",
"title": "Trust Strip",
"tagline": "A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still.",
"description": "A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "proof", "trust", "logo-strip", "wordmarks"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/trust-strip.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "variable-font-flex",
"kind": "component",
"href": "/catalog/components/variable-font-flex",
"title": "Variable Font Flex",
"tagline": "A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds.",
"description": "A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "experiment", "type", "variable-font", "deterministic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/variable-font-flex.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "velocity-throw-snap",
"kind": "component",
"href": "/catalog/components/velocity-throw-snap",
"title": "Velocity Throw Snap",
"tagline": "A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.",
"description": "A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "feature-tour", "rail", "velocity", "throw", "snap", "physics"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/velocity-throw-snap.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "whiteboard-ink",
"kind": "component",
"href": "/catalog/components/whiteboard-ink",
"title": "Whiteboard Ink",
"tagline": "A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token.",
"description": "A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token.",
"group": "scenes-demos",
"section": "Motion Scenes",
"tags": ["motion-primitive", "intro", "reveal", "svg", "whiteboard", "line-draw", "slot"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/whiteboard-ink.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-circle-1",
"kind": "block",
"href": "/catalog/blocks/carousel-circle-1",
"title": "Circle Carousel 1",
"tagline": "Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots.",
"description": "Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "circle"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-circle-1.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-circle-2",
"kind": "block",
"href": "/catalog/blocks/carousel-circle-2",
"title": "Circle Carousel 2",
"tagline": "Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots.",
"description": "Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "circle"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-circle-2.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-circle-3",
"kind": "block",
"href": "/catalog/blocks/carousel-circle-3",
"title": "Circle Carousel 3",
"tagline": "Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots.",
"description": "Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "circle"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-circle-3.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-circle-4",
"kind": "block",
"href": "/catalog/blocks/carousel-circle-4",
"title": "Circle Carousel 4",
"tagline": "Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots.",
"description": "Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "circle"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-circle-4.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-circle-5",
"kind": "block",
"href": "/catalog/blocks/carousel-circle-5",
"title": "Circle Carousel 5",
"tagline": "Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots.",
"description": "Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "circle"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-circle-5.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-orbit-1",
"kind": "block",
"href": "/catalog/blocks/carousel-orbit-1",
"title": "Orbit Carousel 1",
"tagline": "Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 image slots.",
"description": "Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "orbit", "3d"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-orbit-1.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-orbit-2",
"kind": "block",
"href": "/catalog/blocks/carousel-orbit-2",
"title": "Orbit Carousel 2",
"tagline": "Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 image slots.",
"description": "Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "orbit", "3d"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-orbit-2.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-orbit-3",
"kind": "block",
"href": "/catalog/blocks/carousel-orbit-3",
"title": "Orbit Carousel 3",
"tagline": "Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 image slots.",
"description": "Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "orbit", "3d"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-orbit-3.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-orbit-4",
"kind": "block",
"href": "/catalog/blocks/carousel-orbit-4",
"title": "Orbit Carousel 4",
"tagline": "Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 image slots.",
"description": "Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "orbit", "3d"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-orbit-4.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-orbit-5",
"kind": "block",
"href": "/catalog/blocks/carousel-orbit-5",
"title": "Orbit Carousel 5",
"tagline": "Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 image slots.",
"description": "Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "orbit", "3d"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-orbit-5.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-path-1",
"kind": "block",
"href": "/catalog/blocks/carousel-path-1",
"title": "Path Carousel 1",
"tagline": "Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 1); 24 image slots.",
"description": "Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 1); 24 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "path"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-path-1.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-path-2",
"kind": "block",
"href": "/catalog/blocks/carousel-path-2",
"title": "Path Carousel 2",
"tagline": "Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 2); 12 image slots.",
"description": "Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 2); 12 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "path"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-path-2.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-path-3",
"kind": "block",
"href": "/catalog/blocks/carousel-path-3",
"title": "Path Carousel 3",
"tagline": "Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 3); 12 image slots.",
"description": "Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 3); 12 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "path"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-path-3.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-path-4",
"kind": "block",
"href": "/catalog/blocks/carousel-path-4",
"title": "Path Carousel 4",
"tagline": "Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 4); 24 image slots.",
"description": "Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 4); 24 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "path"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-path-4.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-path-5",
"kind": "block",
"href": "/catalog/blocks/carousel-path-5",
"title": "Path Carousel 5",
"tagline": "Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 5); 24 image slots.",
"description": "Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 5); 24 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "path"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-path-5.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-text-circle-1",
"kind": "block",
"href": "/catalog/blocks/carousel-text-circle-1",
"title": "Text + Circle Carousel 1",
"tagline": "A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 1).",
"description": "A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 1).",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "title-card", "kinetic-text", "images", "showcase", "circle"],
"tech": [],
"duration": 5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-text-circle-1.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-text-circle-2",
"kind": "block",
"href": "/catalog/blocks/carousel-text-circle-2",
"title": "Text + Circle Carousel 2",
"tagline": "A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 2).",
"description": "A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 2).",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "title-card", "kinetic-text", "images", "showcase", "circle"],
"tech": [],
"duration": 5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-text-circle-2.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-text-circle-3",
"kind": "block",
"href": "/catalog/blocks/carousel-text-circle-3",
"title": "Text + Circle Carousel 3",
"tagline": "A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 3).",
"description": "A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 3).",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "title-card", "kinetic-text", "images", "showcase", "circle"],
"tech": [],
"duration": 5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-text-circle-3.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-text-circle-4",
"kind": "block",
"href": "/catalog/blocks/carousel-text-circle-4",
"title": "Text + Circle Carousel 4",
"tagline": "A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 4).",
"description": "A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 4).",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "title-card", "kinetic-text", "images", "showcase", "circle"],
"tech": [],
"duration": 5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-text-circle-4.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-text-circle-5",
"kind": "block",
"href": "/catalog/blocks/carousel-text-circle-5",
"title": "Text + Circle Carousel 5",
"tagline": "A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 5).",
"description": "A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 5).",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "title-card", "kinetic-text", "images", "showcase", "circle"],
"tech": [],
"duration": 5,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-text-circle-5.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-vision-1",
"kind": "block",
"href": "/catalog/blocks/carousel-vision-1",
"title": "Vision Carousel 1",
"tagline": "A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 1); 12 image slots.",
"description": "A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 1); 12 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "vision", "3d"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-vision-1.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-vision-2",
"kind": "block",
"href": "/catalog/blocks/carousel-vision-2",
"title": "Vision Carousel 2",
"tagline": "A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 2); 12 image slots.",
"description": "A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 2); 12 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "vision", "3d"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-vision-2.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-vision-3",
"kind": "block",
"href": "/catalog/blocks/carousel-vision-3",
"title": "Vision Carousel 3",
"tagline": "A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 3); 12 image slots.",
"description": "A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 3); 12 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "vision", "3d"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-vision-3.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-vision-4",
"kind": "block",
"href": "/catalog/blocks/carousel-vision-4",
"title": "Vision Carousel 4",
"tagline": "A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 4); 12 image slots.",
"description": "A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 4); 12 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "vision", "3d"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-vision-4.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "carousel-vision-5",
"kind": "block",
"href": "/catalog/blocks/carousel-vision-5",
"title": "Vision Carousel 5",
"tagline": "A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 5); 12 image slots.",
"description": "A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 5); 12 image slots.",
"group": "carousels",
"section": "Carousels",
"tags": ["carousel", "gallery", "images", "showcase", "vision", "3d"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/carousel-vision-5.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "arc-motion-path",
"kind": "component",
"href": "/catalog/components/arc-motion-path",
"title": "Arc Motion Path",
"tagline": "A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation.",
"description": "A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation.",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "motionpath", "gsap-plugin", "hyperframes-native"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/arc-motion-path.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/arc-motion-path.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "avatar-group-hover",
"kind": "component",
"href": "/catalog/components/avatar-group-hover",
"title": "Avatar Group Hover",
"tagline": "A distance-falloff avatar group lift with bouncy hover return",
"description": "A distance-falloff avatar group lift with bouncy hover return",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "avatar", "hover"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/avatar-group-hover.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/avatar-group-hover.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "badge-pop",
"kind": "component",
"href": "/catalog/components/badge-pop",
"title": "Badge Pop",
"tagline": "A transitions.dev-inspired notification badge pop with elastic scale and count reveal",
"description": "A transitions.dev-inspired notification badge pop with elastic scale and count reveal",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "badge", "microinteraction"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/badge-pop.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/badge-pop.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "blur-in",
"kind": "component",
"href": "/catalog/components/blur-in",
"title": "Blur In",
"tagline": "An Operator Black word-level content reveal that resolves its own text from controlled blur",
"description": "An Operator Black word-level content reveal that resolves its own text from controlled blur",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "blur-in", "text-effect"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/blur-in.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/blur-in.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "card-resize",
"kind": "component",
"href": "/catalog/components/card-resize",
"title": "Card Resize",
"tagline": "A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel",
"description": "A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "card", "layout"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/card-resize.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/card-resize.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "chat-message",
"kind": "component",
"href": "/catalog/components/chat-message",
"title": "Chat Message",
"tagline": "One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from",
"description": "One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "chat", "mock-ui", "message"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/chat-message.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "chromatic-aberration-wipe",
"kind": "component",
"href": "/catalog/components/chromatic-aberration-wipe",
"title": "Chromatic Aberration Wipe",
"tagline": "A fast slide wipe with RGB channel split on peak frames.",
"description": "A fast slide wipe with RGB channel split on peak frames.",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chromatic-aberration-wipe.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/chromatic-aberration-wipe.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "dynamic-grid",
"kind": "component",
"href": "/catalog/components/dynamic-grid",
"title": "Dynamic Grid",
"tagline": "A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes",
"description": "A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "motion-primitive", "background", "grid", "ui"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dynamic-grid.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/dynamic-grid.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "icon-swap",
"kind": "component",
"href": "/catalog/components/icon-swap",
"title": "Icon Swap",
"tagline": "A scale-and-blur icon swap primitive for toolbar and action state changes",
"description": "A scale-and-blur icon swap primitive for toolbar and action state changes",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "icon", "swap"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/icon-swap.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/icon-swap.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "lt-neon-border",
"kind": "block",
"href": "/catalog/blocks/lt-neon-border",
"title": "Neon Border",
"tagline": "Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role.",
"description": "Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role.",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["lower-third", "glow", "loop", "video-primitive"],
"tech": [],
"duration": 4.8,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/lt-neon-border.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "menu-morph",
"kind": "component",
"href": "/catalog/components/menu-morph",
"title": "Menu Morph",
"tagline": "A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus",
"description": "A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "menu", "morph"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/menu-morph.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/menu-morph.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "number-pop-in",
"kind": "component",
"href": "/catalog/components/number-pop-in",
"title": "Number Pop In",
"tagline": "A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal",
"description": "A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "number", "pop"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-pop-in.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/number-pop-in.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "number-wheel",
"kind": "component",
"href": "/catalog/components/number-wheel",
"title": "Number Wheel",
"tagline": "A rolling digit counter primitive for metrics, prices, counts, and scoreboards",
"description": "A rolling digit counter primitive for metrics, prices, counts, and scoreboards",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "motion-primitive", "number", "counter", "data"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-wheel.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/number-wheel.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "page-slide",
"kind": "component",
"href": "/catalog/components/page-slide",
"title": "Page Slide",
"tagline": "A transitions.dev-inspired page slide primitive with outgoing and incoming panels",
"description": "A transitions.dev-inspired page slide primitive with outgoing and incoming panels",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "page", "slide"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/page-slide.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/page-slide.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "separator",
"kind": "component",
"href": "/catalog/components/separator",
"title": "Separator",
"tagline": "A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal",
"description": "A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "separator", "layout"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/separator.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/separator.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "sheet-spring-up",
"kind": "component",
"href": "/catalog/components/sheet-spring-up",
"title": "Sheet Spring-Up",
"tagline": "A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease",
"description": "A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "sheet", "spring", "mock-ui", "overlay"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/sheet-spring-up.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "simulated-cursor",
"kind": "component",
"href": "/catalog/components/simulated-cursor",
"title": "Simulated Cursor",
"tagline": "A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos",
"description": "A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "motion-primitive", "cursor", "ui", "walkthrough"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/simulated-cursor.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/simulated-cursor.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "skeleton-reveal",
"kind": "component",
"href": "/catalog/components/skeleton-reveal",
"title": "Skeleton Reveal",
"tagline": "A skeleton loader transition that pulses, then cross-fades into content",
"description": "A skeleton loader transition that pulses, then cross-fades into content",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "skeleton", "reveal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/skeleton-reveal.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/skeleton-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "slot-machine-roll",
"kind": "component",
"href": "/catalog/components/slot-machine-roll",
"title": "Slot Machine Roll",
"tagline": "A vertical reel scrolls characters from one value to another.",
"description": "A vertical reel scrolls characters from one value to another.",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/slot-machine-roll.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/slot-machine-roll.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "staggered-fade-up",
"kind": "component",
"href": "/catalog/components/staggered-fade-up",
"title": "Staggered Fade Up",
"tagline": "Words fade in and slide up one after another with configurable delay.",
"description": "Words fade in and slide up one after another with configurable delay.",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/staggered-fade-up.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/staggered-fade-up.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "streaming-text",
"kind": "component",
"href": "/catalog/components/streaming-text",
"title": "Streaming Text",
"tagline": "Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inking to full colour - rather than the even tick of a typewriter",
"description": "Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inking to full colour - rather than the even tick of a typewriter",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "text-effect", "ai", "chat"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/streaming-text.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "success-check",
"kind": "component",
"href": "/catalog/components/success-check",
"title": "Success Check",
"tagline": "A success check primitive with ring pop, path draw, and subtle rotate blur",
"description": "A success check primitive with ring pop, path draw, and subtle rotate blur",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "success", "check"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/success-check.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/success-check.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "svg-line-draw-loader",
"kind": "component",
"href": "/catalog/components/svg-line-draw-loader",
"title": "SVG Line Draw Loader",
"tagline": "An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.",
"description": "An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "advanced-motion", "anime-inspired", "hyperframes-native"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/svg-line-draw-loader.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/svg-line-draw-loader.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "text-stagger",
"kind": "component",
"href": "/catalog/components/text-stagger",
"title": "Text Stagger",
"tagline": "A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words",
"description": "A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "text", "stagger"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-stagger.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/text-stagger.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "text-state-swap",
"kind": "component",
"href": "/catalog/components/text-state-swap",
"title": "Text State Swap",
"tagline": "A text state swap primitive with outgoing blur and incoming lift",
"description": "A text state swap primitive with outgoing blur and incoming lift",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "text", "swap"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-state-swap.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/text-state-swap.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "three-orbiting-cards",
"kind": "component",
"href": "/catalog/components/three-orbiting-cards",
"title": "Three Orbiting Cards",
"tagline": "A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.",
"description": "A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "three-js", "webgl", "hyperframes-native"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/three-orbiting-cards.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/three-orbiting-cards.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "tilt-card",
"kind": "component",
"href": "/catalog/components/tilt-card",
"title": "Tilt Card",
"tagline": "A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax",
"description": "A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "card", "tilt"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tilt-card.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/tilt-card.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "top-down-letters",
"kind": "component",
"href": "/catalog/components/top-down-letters",
"title": "Top-Down Letters",
"tagline": "Letters descend from above in a pronounced staircase with zero blur.",
"description": "Letters descend from above in a pronounced staircase with zero blur.",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/top-down-letters.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/top-down-letters.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "typewriter",
"kind": "component",
"href": "/catalog/components/typewriter",
"title": "Typewriter",
"tagline": "Character-by-character text reveal with a deterministic blinking cursor.",
"description": "Character-by-character text reveal with a deterministic blinking cursor.",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "motion-primitive", "typography"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/typewriter.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/typewriter.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "typing-indicator",
"kind": "component",
"href": "/catalog/components/typing-indicator",
"title": "Typing Indicator",
"tagline": "The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply is coming, and vanishes when the message lands",
"description": "The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply is coming, and vanishes when the message lands",
"group": "motion-effects",
"section": "Motion Primitives",
"tags": ["video-primitive", "chat", "mock-ui", "overlay"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/typing-indicator.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "avatar-cloud",
"kind": "component",
"href": "/catalog/components/avatar-cloud",
"title": "Avatar Cloud",
"tagline": "Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.",
"description": "Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.",
"group": "motion-effects",
"section": "Effects",
"tags": ["effects", "avatars", "community", "network", "social-proof", "prove"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/avatar-cloud.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "beat-timeline",
"kind": "component",
"href": "/catalog/components/beat-timeline",
"title": "Beat Timeline",
"tagline": "A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.",
"description": "A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.",
"group": "motion-effects",
"section": "Effects",
"tags": ["orchestration", "transitions", "sequencing", "bridge", "timeline"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/beat-timeline.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "before-after-wipe",
"kind": "component",
"href": "/catalog/components/before-after-wipe",
"title": "Before After Wipe",
"tagline": "Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.",
"description": "Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.",
"group": "motion-effects",
"section": "Effects",
"tags": ["prop", "ui-props", "compare", "holdable", "before-after", "wipe", "slots"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/before-after-wipe.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "camera-rig-depth-stack",
"kind": "component",
"href": "/catalog/components/camera-rig-depth-stack",
"title": "Camera Rig Depth Stack",
"tagline": "A 3D camera-rig-style card stack with depth, parallax, and focus shift.",
"description": "A 3D camera-rig-style card stack with depth, parallax, and focus shift.",
"group": "motion-effects",
"section": "Effects",
"tags": ["advanced-motion", "hyperframes-native"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/camera-rig-depth-stack.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/camera-rig-depth-stack.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "comparison-split",
"kind": "component",
"href": "/catalog/components/comparison-split",
"title": "Comparison Split",
"tagline": "Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.",
"description": "Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.",
"group": "motion-effects",
"section": "Effects",
"tags": ["prop", "ui-props", "compare", "holdable", "before-after", "wipe"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/comparison-split.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "confetti",
"kind": "component",
"href": "/catalog/components/confetti",
"title": "Confetti",
"tagline": "A deterministic celebration burst with seeded particles and gravity.",
"description": "A deterministic celebration burst with seeded particles and gravity.",
"group": "motion-effects",
"section": "Effects",
"tags": ["effect"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/confetti.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/confetti.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "cut-the-curve",
"kind": "component",
"href": "/catalog/components/cut-the-curve",
"title": "Cut the Curve",
"tagline": "A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out.",
"description": "A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out.",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition", "directional-cut", "velocity-match", "whip", "bridge", "demonstrate"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/cut-the-curve.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "device-frame-stage",
"kind": "component",
"href": "/catalog/components/device-frame-stage",
"title": "Device Frame Stage",
"tagline": "A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float",
"description": "A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float",
"group": "motion-effects",
"section": "Effects",
"tags": ["prop", "device", "mobile", "tablet", "ui-props", "holdable"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/device-frame-stage.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "directional-wipe",
"kind": "component",
"href": "/catalog/components/directional-wipe",
"title": "Directional Wipe",
"tagline": "A directional scene push that slides one panel over another.",
"description": "A directional scene push that slides one panel over another.",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition-primitive"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/directional-wipe.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/directional-wipe.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "fade-through",
"kind": "component",
"href": "/catalog/components/fade-through",
"title": "Fade Through",
"tagline": "A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer",
"description": "A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer",
"group": "motion-effects",
"section": "Effects",
"tags": ["motion-primitive", "transition", "fade", "scene"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/fade-through.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/fade-through.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "grid-pixelate-wipe",
"kind": "component",
"href": "/catalog/components/grid-pixelate-wipe",
"title": "Grid Pixelate Wipe",
"tagline": "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes",
"description": "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition", "wipe", "grid", "pixelate"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/grid-pixelate-wipe.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "halftone-dissolve",
"kind": "component",
"href": "/catalog/components/halftone-dissolve",
"title": "Halftone Dissolve",
"tagline": "Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A.",
"description": "Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A.",
"group": "motion-effects",
"section": "Effects",
"tags": ["motion-primitive", "transition", "texture", "halftone", "dissolve"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/halftone-dissolve.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "hw-arrow",
"kind": "component",
"href": "/catalog/components/hw-arrow",
"title": "Hand-Drawn Arrow",
"tagline": "Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a travel-aligned head-arrival stretch pulse with spring recovery; boils while on screen",
"description": "Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a travel-aligned head-arrival stretch pulse with spring recovery; boils while on screen",
"group": "motion-effects",
"section": "Effects",
"tags": ["handwritten", "annotation", "arrow", "overlay"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/hw-arrow.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "hw-boil",
"kind": "component",
"href": "/catalog/components/hw-boil",
"title": "Hand-Drawn Boil",
"tagline": "Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher, a wobbled-ellipse path generator, the boil pose control (off/calm/lively over the family-locked frameDrop), a curvature-adaptive pen-velocity ease, and the completed stroke matrix (plain/soft/sharp/spray — spray is index-seeded deterministic dots, no turbulence) with texture-safe draw-on",
"description": "Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher, a wobbled-ellipse path generator, the boil pose control (off/calm/lively over the family-locked frameDrop), a curvature-adaptive pen-velocity ease, and the completed stroke matrix (plain/soft/sharp/spray — spray is index-seeded deterministic dots, no turbulence) with texture-safe draw-on",
"group": "motion-effects",
"section": "Effects",
"tags": ["handwritten", "effect", "annotation"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/hw-boil.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "hw-box-label",
"kind": "component",
"href": "/catalog/components/hw-box-label",
"title": "Hand-Drawn Box Label",
"tagline": "Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true contact squash and bouncy spring recovery, with a handwritten label above or centered; boils",
"description": "Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true contact squash and bouncy spring recovery, with a handwritten label above or centered; boils",
"group": "motion-effects",
"section": "Effects",
"tags": ["handwritten", "annotation", "overlay"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/hw-box-label.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "hw-callout-circle",
"kind": "component",
"href": "/catalog/components/hw-callout-circle",
"title": "Scribble Callout Circle",
"tagline": "Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the drawn shapes absorb the arrival with a volume-preserving contact squash; outline and connector take the family stroke matrix (plain/soft/sharp/spray); boils",
"description": "Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the drawn shapes absorb the arrival with a volume-preserving contact squash; outline and connector take the family stroke matrix (plain/soft/sharp/spray); boils",
"group": "motion-effects",
"section": "Effects",
"tags": ["handwritten", "annotation", "callout", "overlay"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/hw-callout-circle.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "hw-underline",
"kind": "component",
"href": "/catalog/components/hw-underline",
"title": "Squiggle Marks",
"tagline": "Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on",
"description": "Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on",
"group": "motion-effects",
"section": "Effects",
"tags": ["handwritten", "annotation", "text-treatment"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/hw-underline.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "input-feedback",
"kind": "component",
"href": "/catalog/components/input-feedback",
"title": "Input Feedback",
"tagline": "A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state",
"description": "A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition-primitive", "transitions-dev-port", "input", "feedback"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/input-feedback.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/input-feedback.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "iris-reveal",
"kind": "component",
"href": "/catalog/components/iris-reveal",
"title": "Iris Reveal",
"tagline": "A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.",
"description": "A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition", "iris", "circle-reveal", "clip-path", "bridge", "slots"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/iris-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "keyframe-scrub-stack",
"kind": "component",
"href": "/catalog/components/keyframe-scrub-stack",
"title": "Keyframe Scrub Stack",
"tagline": "A keyframe-sequenced stack of cards with offset timing and easing presets.",
"description": "A keyframe-sequenced stack of cards with offset timing and easing presets.",
"group": "motion-effects",
"section": "Effects",
"tags": ["advanced-motion", "anime-inspired", "hyperframes-native"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/keyframe-scrub-stack.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/keyframe-scrub-stack.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "match-cut",
"kind": "component",
"href": "/catalog/components/match-cut",
"title": "Match Cut",
"tagline": "A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.",
"description": "A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.",
"group": "motion-effects",
"section": "Effects",
"tags": ["motion-primitive", "transition", "match-cut", "hard-cut", "continuity"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/match-cut.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "mesh-gradient-bg",
"kind": "component",
"href": "/catalog/components/mesh-gradient-bg",
"title": "Mesh Gradient Background",
"tagline": "A render-safe mesh gradient using animated radial layers.",
"description": "A render-safe mesh gradient using animated radial layers.",
"group": "motion-effects",
"section": "Effects",
"tags": ["effect"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mesh-gradient-bg.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/mesh-gradient-bg.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "micro-transitions",
"kind": "component",
"href": "/catalog/components/micro-transitions",
"title": "Micro Transitions",
"tagline": "A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions",
"description": "A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition-primitive", "motion-primitive", "transitions-dev-port", "ui", "transition", "microinteraction"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/micro-transitions.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/micro-transitions.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "mk-usage-arc",
"kind": "component",
"href": "/catalog/components/mk-usage-arc",
"title": "Hairline Arc Gauge",
"tagline": "Thin circular gauge that draws on while its percentage counts up; one helper call drives both",
"description": "Thin circular gauge that draws on while its percentage counts up; one helper call drives both",
"group": "motion-effects",
"section": "Effects",
"tags": ["data-viz", "gauge", "minimal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/mk-usage-arc.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "morph-swap",
"kind": "component",
"href": "/catalog/components/morph-swap",
"title": "Morph Swap",
"tagline": "Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty.",
"description": "Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty.",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition", "morph", "swap", "condense", "reshape", "holdable", "slots"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/morph-swap.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "motion-blur",
"kind": "component",
"href": "/catalog/components/motion-blur",
"title": "Motion Blur",
"tagline": "After Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame) by sampling the GSAP timeline at sub-frame times and averaging equal-weight additive copies of the element along its real trajectory, so translation, scale, rotation, 3D rotation and skew all drive the smear",
"description": "After Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame) by sampling the GSAP timeline at sub-frame times and averaging equal-weight additive copies of the element along its real trajectory, so translation, scale, rotation, 3D rotation and skew all drive the smear",
"group": "motion-effects",
"section": "Effects",
"tags": ["effect", "motion-blur", "shutter", "after-effects", "velocity", "animation"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/motion-blur.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "multiplayer-cursors",
"kind": "component",
"href": "/catalog/components/multiplayer-cursors",
"title": "Multiplayer Cursors",
"tagline": "Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence.",
"description": "Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence.",
"group": "motion-effects",
"section": "Effects",
"tags": ["cursor", "pointer", "multiplayer", "collaboration", "presence", "loop", "prove"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/multiplayer-cursors.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "notification-pileup",
"kind": "component",
"href": "/catalog/components/notification-pileup",
"title": "Notification Pileup",
"tagline": "Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.",
"description": "Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.",
"group": "motion-effects",
"section": "Effects",
"tags": ["notification", "mobile", "ui-props", "overload", "pileup", "loop", "agitate"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/notification-pileup.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "onboarding-stepper-flow",
"kind": "component",
"href": "/catalog/components/onboarding-stepper-flow",
"title": "Onboarding Stepper Flow",
"tagline": "A composed onboarding flow with milestone rail, active step card, and next-action button",
"description": "A composed onboarding flow with milestone rail, active step card, and next-action button",
"group": "motion-effects",
"section": "Effects",
"tags": ["ui-flow", "onboarding", "stepper"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/onboarding-stepper-flow.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/onboarding-stepper-flow.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "ordered-dither-pass",
"kind": "component",
"href": "/catalog/components/ordered-dither-pass",
"title": "Ordered Dither Pass",
"tagline": "Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion.",
"description": "Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion.",
"group": "motion-effects",
"section": "Effects",
"tags": ["motion-primitive", "experiment", "texture", "dither", "transition", "quantize"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/ordered-dither-pass.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "overwhelm-surround",
"kind": "component",
"href": "/catalog/components/overwhelm-surround",
"title": "Overwhelm Surround",
"tagline": "Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.",
"description": "Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.",
"group": "motion-effects",
"section": "Effects",
"tags": ["effects", "agitate", "overwhelm", "pressure", "notifications"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/overwhelm-surround.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "panel-reveal",
"kind": "component",
"href": "/catalog/components/panel-reveal",
"title": "Panel Reveal",
"tagline": "A panel reveal primitive with height expansion and content fade",
"description": "A panel reveal primitive with height expansion and content fade",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition-primitive", "transitions-dev-port", "panel", "reveal"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/panel-reveal.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/panel-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "parallax-device-dive",
"kind": "component",
"href": "/catalog/components/parallax-device-dive",
"title": "Parallax Device Dive",
"tagline": "A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.",
"description": "A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.",
"group": "motion-effects",
"section": "Effects",
"tags": ["motion-primitive", "camera", "device", "phone", "parallax", "transition"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/parallax-device-dive.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "parallax-unzoom",
"kind": "component",
"href": "/catalog/components/parallax-unzoom",
"title": "Parallax Unzoom",
"tagline": "Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)",
"description": "Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition", "reveal", "unzoom", "parallax", "grid", "hero"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/parallax-unzoom.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "parallax-zoom",
"kind": "component",
"href": "/catalog/components/parallax-zoom",
"title": "Parallax Zoom",
"tagline": "Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition",
"description": "Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition", "zoom", "parallax", "grid", "hero"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/parallax-zoom.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "rubber-band-bumper",
"kind": "component",
"href": "/catalog/components/rubber-band-bumper",
"title": "Rubber Band Bumper",
"tagline": "An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it.",
"description": "An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it.",
"group": "motion-effects",
"section": "Effects",
"tags": ["motion-primitive", "transition", "rubber-band", "resistance", "overshoot"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/rubber-band-bumper.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "settings-toggle-flow",
"kind": "component",
"href": "/catalog/components/settings-toggle-flow",
"title": "Settings Toggle Flow",
"tagline": "A composed settings flow with preference rows, toggle switches, and active-state feedback",
"description": "A composed settings flow with preference rows, toggle switches, and active-state feedback",
"group": "motion-effects",
"section": "Effects",
"tags": ["ui-flow", "settings", "toggle"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/settings-toggle-flow.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/settings-toggle-flow.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "shutter-slam",
"kind": "component",
"href": "/catalog/components/shutter-slam",
"title": "Shutter Slam",
"tagline": "One word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, then a full turn about each axis — on the measured easing of the After Effects export the shutter model was fitted to",
"description": "One word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, then a full turn about each axis — on the measured easing of the After Effects export the shutter model was fitted to",
"group": "motion-effects",
"section": "Effects",
"tags": ["effect", "motion-blur", "shutter", "after-effects", "slam", "animation"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shutter-slam.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/shutter-slam.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "signup-flow",
"kind": "component",
"href": "/catalog/components/signup-flow",
"title": "Signup Flow",
"tagline": "A composed signup flow with social action, email field, password field, and submit button",
"description": "A composed signup flow with social action, email field, password field, and submit button",
"group": "motion-effects",
"section": "Effects",
"tags": ["ui-flow", "signup", "form"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/signup-flow.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/signup-flow.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "spotlight-card",
"kind": "component",
"href": "/catalog/components/spotlight-card",
"title": "Spotlight Card",
"tagline": "A card with a scripted cursor spotlight and lit border.",
"description": "A card with a scripted cursor spotlight and lit border.",
"group": "motion-effects",
"section": "Effects",
"tags": ["effect"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spotlight-card.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/spotlight-card.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "stagger-cascade",
"kind": "component",
"href": "/catalog/components/stagger-cascade",
"title": "Stagger Cascade",
"tagline": "A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic.",
"description": "A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic.",
"group": "motion-effects",
"section": "Effects",
"tags": ["effects", "grid", "stagger", "entrance", "exhibit"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/stagger-cascade.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "stagger-lattice",
"kind": "component",
"href": "/catalog/components/stagger-lattice",
"title": "Stagger Lattice",
"tagline": "A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames.",
"description": "A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames.",
"group": "motion-effects",
"section": "Effects",
"tags": ["advanced-motion", "anime-inspired", "hyperframes-native"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/stagger-lattice.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/stagger-lattice.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "store-badge-lockup",
"kind": "component",
"href": "/catalog/components/store-badge-lockup",
"title": "Store Badge Lockup",
"tagline": "Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action.",
"description": "Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action.",
"group": "motion-effects",
"section": "Effects",
"tags": ["prop", "ui-props", "mobile", "store-badges", "cta", "ask"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/store-badge-lockup.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "svg-mask-reveal",
"kind": "component",
"href": "/catalog/components/svg-mask-reveal",
"title": "SVG Mask Reveal",
"tagline": "A soft token-colored sweep reveals media only through an editable SVG wordmark mask.",
"description": "A soft token-colored sweep reveals media only through an editable SVG wordmark mask.",
"group": "motion-effects",
"section": "Effects",
"tags": ["effect", "svg", "mask", "wordmark", "reveal", "exhibit"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/svg-mask-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "tabs-slide-indicator",
"kind": "component",
"href": "/catalog/components/tabs-slide-indicator",
"title": "Tabs Slide Indicator",
"tagline": "A pill indicator transition that slides between active tabs",
"description": "A pill indicator transition that slides between active tabs",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition-primitive", "transitions-dev-port", "tabs", "indicator"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tabs-slide-indicator.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/tabs-slide-indicator.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "testimonial-card",
"kind": "component",
"href": "/catalog/components/testimonial-card",
"title": "Testimonial Card",
"tagline": "Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.",
"description": "Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.",
"group": "motion-effects",
"section": "Effects",
"tags": ["prop", "ui-props", "testimonial", "social-proof", "quote", "prove"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/testimonial-card.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "type-match-cut",
"kind": "component",
"href": "/catalog/components/type-match-cut",
"title": "Type Match Cut",
"tagline": "A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.",
"description": "A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.",
"group": "motion-effects",
"section": "Effects",
"tags": ["motion-primitive", "transition", "typography", "match-cut", "continuity"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/type-match-cut.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "vignette",
"kind": "component",
"href": "/catalog/components/vignette",
"title": "Vignette",
"tagline": "Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center",
"description": "Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center",
"group": "motion-effects",
"section": "Effects",
"tags": ["vignette", "overlay", "cinematic", "effect"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/vignette.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "whip-pan-cut",
"kind": "component",
"href": "/catalog/components/whip-pan-cut",
"title": "Whip Pan Cut",
"tagline": "A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.",
"description": "A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition", "whip-pan", "motion-blur", "velocity-match", "speed-ramp", "bridge", "slots"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/whip-pan-cut.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "x-follow-card",
"kind": "component",
"href": "/catalog/components/x-follow-card",
"title": "X Follow Card",
"tagline": "A social follow card with avatar, handle, and follower motion.",
"description": "A social follow card with avatar, handle, and follower motion.",
"group": "motion-effects",
"section": "Effects",
"tags": ["social-overlay"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-follow-card.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/x-follow-card.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "yt-circle-pointer",
"kind": "component",
"href": "/catalog/components/yt-circle-pointer",
"title": "Pointer Circle + Countdown",
"tagline": "Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick",
"description": "Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick",
"group": "motion-effects",
"section": "Effects",
"tags": ["annotation", "countdown", "overlay"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/yt-circle-pointer.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "yt-feather-highlight",
"kind": "component",
"href": "/catalog/components/yt-feather-highlight",
"title": "Feathered Spotlight",
"tagline": "Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets",
"description": "Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets",
"group": "motion-effects",
"section": "Effects",
"tags": ["highlight", "spotlight", "effect", "overlay"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/yt-feather-highlight.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "zoom-through-transition",
"kind": "component",
"href": "/catalog/components/zoom-through-transition",
"title": "Zoom Through Transition",
"tagline": "A transition that zooms through a focal card into the next scene.",
"description": "A transition that zooms through a focal card into the next scene.",
"group": "motion-effects",
"section": "Effects",
"tags": ["transition-primitive"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/zoom-through-transition.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/zoom-through-transition.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "camcorder-hud",
"kind": "block",
"href": "/catalog/blocks/camcorder-hud",
"title": "Camcorder HUD",
"tagline": "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments",
"description": "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments",
"group": "motion-effects",
"section": "Camera & 3D",
"tags": ["camcorder", "camera", "recording", "hud", "overlay", "creator", "media-treatment-overlay"],
"tech": [],
"duration": 4,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/camcorder-hud.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "camera-scan-gate",
"kind": "component",
"href": "/catalog/components/camera-scan-gate",
"title": "Camera Scan Gate",
"tagline": "A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.",
"description": "A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.",
"group": "motion-effects",
"section": "Camera & 3D",
"tags": ["prop", "ui-props", "camera", "qr", "scan", "recognition", "interaction", "demonstrate"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/camera-scan-gate.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "camera-shake",
"kind": "component",
"href": "/catalog/components/camera-shake",
"title": "Camera Shake",
"tagline": "Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe",
"description": "Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe",
"group": "motion-effects",
"section": "Camera & 3D",
"tags": ["camera", "shake", "handheld", "effect", "cinematic"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/camera-shake.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "drift-hold",
"kind": "component",
"href": "/catalog/components/drift-hold",
"title": "Drift Hold",
"tagline": "A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.",
"description": "A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.",
"group": "motion-effects",
"section": "Camera & 3D",
"tags": ["motion-primitive", "camera", "ambient", "drift", "hold", "loopable"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/drift-hold.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "focus-rack",
"kind": "component",
"href": "/catalog/components/focus-rack",
"title": "Focus Rack",
"tagline": "Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.",
"description": "Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.",
"group": "motion-effects",
"section": "Camera & 3D",
"tags": ["motion-primitive", "camera", "focus", "focus-rack", "depth", "parallax", "emphasize"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/focus-rack.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "pan-stations",
"kind": "component",
"href": "/catalog/components/pan-stations",
"title": "Pan Stations",
"tagline": "A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.",
"description": "A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.",
"group": "motion-effects",
"section": "Camera & 3D",
"tags": ["camera", "pan", "stations", "features", "exhibit", "agitate", "cross-shelved"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/pan-stations.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "pull-back-reveal",
"kind": "component",
"href": "/catalog/components/pull-back-reveal",
"title": "Pull Back Reveal",
"tagline": "A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.",
"description": "A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.",
"group": "motion-effects",
"section": "Camera & 3D",
"tags": ["motion-primitive", "camera", "pull-back", "reveal", "recontextualize"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/pull-back-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "push-in",
"kind": "component",
"href": "/catalog/components/push-in",
"title": "Push In",
"tagline": "A centered headline gains focus through one slow, continuous camera push and a gentle fade out.",
"description": "A centered headline gains focus through one slow, continuous camera push and a gentle fade out.",
"group": "motion-effects",
"section": "Camera & 3D",
"tags": ["motion-primitive", "camera", "push-in", "focus", "emphasize", "holdable"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/push-in.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "scroll-camera-story",
"kind": "component",
"href": "/catalog/components/scroll-camera-story",
"title": "Scroll Camera Story",
"tagline": "A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section.",
"description": "A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section.",
"group": "motion-effects",
"section": "Camera & 3D",
"tags": ["camera", "scroll", "parallax", "story", "sections", "slot", "servo"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/scroll-camera-story.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "ui-focus-zoom",
"kind": "component",
"href": "/catalog/components/ui-focus-zoom",
"title": "UI Focus Zoom",
"tagline": "A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default.",
"description": "A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default.",
"group": "motion-effects",
"section": "Camera & 3D",
"tags": ["camera", "product-demo", "zoom", "focus", "pan", "slot", "servo"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/ui-focus-zoom.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "yt-camera-move",
"kind": "component",
"href": "/catalog/components/yt-camera-move",
"title": "Camera Punch-In",
"tagline": "Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay",
"description": "Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay",
"group": "motion-effects",
"section": "Camera & 3D",
"tags": ["camera", "zoom", "effect", "creator"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/yt-camera-move.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "grain-field",
"kind": "component",
"href": "/catalog/components/grain-field",
"title": "Grain Field",
"tagline": "A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.",
"description": "A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.",
"group": "surfaces",
"section": "Texture",
"tags": ["motion-primitive", "background", "grain", "dots", "texture", "ambient", "loopable"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/grain-field.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "grain-overlay",
"kind": "component",
"href": "/catalog/components/grain-overlay",
"title": "Grain Overlay",
"tagline": "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition",
"description": "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition",
"group": "surfaces",
"section": "Texture",
"tags": ["texture", "grain", "overlay", "film"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/grain-overlay.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "halftone-field",
"kind": "block",
"href": "/catalog/blocks/halftone-field",
"title": "Halftone Field",
"tagline": "A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type.",
"description": "A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type.",
"group": "surfaces",
"section": "Texture",
"tags": ["webgl", "shader", "background", "texture", "halftone"],
"tech": [],
"duration": 10,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/halftone-field.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "ink-bleed-reveal",
"kind": "component",
"href": "/catalog/components/ink-bleed-reveal",
"title": "Ink Bleed Reveal",
"tagline": "Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result.",
"description": "Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result.",
"group": "surfaces",
"section": "Texture",
"tags": ["motion-primitive", "texture", "reveal", "gooey", "svg-filter", "deterministic", "experiment"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/ink-bleed-reveal.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "texture-mask-text",
"kind": "component",
"href": "/catalog/components/texture-mask-text",
"title": "Texture Mask Text",
"tagline": "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps",
"description": "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps",
"group": "surfaces",
"section": "Texture",
"tags": ["text", "text-effect", "effect", "texture", "mask"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text.png",
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/texture-mask-text.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "yt-lcd-background",
"kind": "block",
"href": "/catalog/blocks/yt-lcd-background",
"title": "Scanline Board Background",
"tagline": "Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title",
"description": "Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title",
"group": "surfaces",
"section": "Texture",
"tags": ["background", "texture", "creator"],
"tech": [],
"duration": 10,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/yt-lcd-background.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "yt-screen-warp",
"kind": "component",
"href": "/catalog/components/yt-screen-warp",
"title": "On-Screen Display Effect",
"tagline": "Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display",
"description": "Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display",
"group": "surfaces",
"section": "Texture",
"tags": ["effect", "overlay", "texture"],
"tech": [],
"duration": null,
"width": null,
"height": null,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/components/yt-screen-warp.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "ios26-liquid-glass",
"kind": "block",
"href": "/catalog/blocks/ios26-liquid-glass",
"title": "iOS 26 Liquid Glass Home Screen",
"tagline": "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.",
"description": "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["liquid-glass-html-in-canvas", "webgpu", "3d", "iphone", "ios26", "notifications", "gltf", "html-in-canvas"],
"tech": [],
"duration": 15,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4",
"preview": {
"mode": "video"
}
}, {
"id": "liquid-glass-context-menu",
"kind": "block",
"href": "/catalog/blocks/liquid-glass-context-menu",
"title": "Liquid Glass Context Menu",
"tagline": "Frosted glass context menu panel drifting over an aurora shader background",
"description": "Frosted glass context menu panel drifting over an aurora shader background",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["html-in-canvas", "liquid-glass-html-in-canvas", "webgpu"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/liquid-glass-context-menu.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "liquid-glass-media-controls",
"kind": "block",
"href": "/catalog/blocks/liquid-glass-media-controls",
"title": "Liquid Glass Media Controls",
"tagline": "Frosted glass media control panels spreading over an aurora shader background",
"description": "Frosted glass media control panels spreading over an aurora shader background",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["html-in-canvas", "liquid-glass-html-in-canvas", "webgpu"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/liquid-glass-media-controls.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "liquid-glass-notification",
"kind": "block",
"href": "/catalog/blocks/liquid-glass-notification",
"title": "Liquid Glass Notification",
"tagline": "Frosted glass notification cards floating over an aurora shader background",
"description": "Frosted glass notification cards floating over an aurora shader background",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["html-in-canvas", "liquid-glass-html-in-canvas", "webgpu"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/liquid-glass-notification.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "liquid-glass-widgets",
"kind": "block",
"href": "/catalog/blocks/liquid-glass-widgets",
"title": "Liquid Glass Widgets",
"tagline": "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background",
"description": "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["html-in-canvas", "liquid-glass-html-in-canvas", "webgpu"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/liquid-glass-widgets.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "macos-tahoe-liquid-glass",
"kind": "block",
"href": "/catalog/blocks/macos-tahoe-liquid-glass",
"title": "macOS Tahoe Liquid Glass Desktop",
"tagline": "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.",
"description": "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["html-in-canvas", "3d", "macos", "tahoe", "gltf"],
"tech": [],
"duration": 15,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4",
"preview": {
"mode": "video"
}
}, {
"id": "vfx-iphone-device",
"kind": "block",
"href": "/catalog/blocks/vfx-iphone-device",
"title": "iPhone & MacBook 3D Showcase",
"tagline": "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.",
"description": "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["html-in-canvas", "3d", "device", "iphone", "macbook", "gltf"],
"tech": [],
"duration": 15,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.mp4",
"preview": {
"mode": "video"
}
}, {
"id": "vfx-liquid-background",
"kind": "block",
"href": "/catalog/blocks/vfx-liquid-background",
"title": "Liquid Background",
"tagline": "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.",
"description": "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["html-in-canvas", "liquid", "webgl", "displacement", "background"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.mp4",
"preview": {
"mode": "video"
}
}, {
"id": "vfx-liquid-glass",
"kind": "block",
"href": "/catalog/blocks/vfx-liquid-glass",
"title": "Liquid Glass",
"tagline": "VFX composition block",
"description": "VFX composition block",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["html-in-canvas", "webgl"],
"tech": [],
"duration": 20,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.mp4",
"preview": {
"mode": "video"
}
}, {
"id": "vfx-magnetic",
"kind": "block",
"href": "/catalog/blocks/vfx-magnetic",
"title": "Magnetic",
"tagline": "VFX composition block",
"description": "VFX composition block",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["html-in-canvas", "webgl"],
"tech": [],
"duration": 15,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.mp4",
"preview": {
"mode": "video"
}
}, {
"id": "vfx-portal",
"kind": "block",
"href": "/catalog/blocks/vfx-portal",
"title": "Portal",
"tagline": "VFX composition block",
"description": "VFX composition block",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["html-in-canvas", "webgl"],
"tech": [],
"duration": 10,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.mp4",
"preview": {
"mode": "video"
}
}, {
"id": "vfx-shatter",
"kind": "block",
"href": "/catalog/blocks/vfx-shatter",
"title": "Shatter",
"tagline": "VFX composition block",
"description": "VFX composition block",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["html-in-canvas", "webgl"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.mp4",
"preview": {
"mode": "video"
}
}, {
"id": "vfx-text-cursor",
"kind": "block",
"href": "/catalog/blocks/vfx-text-cursor",
"title": "VFX Text Cursor",
"tagline": "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.",
"description": "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.",
"group": "surfaces",
"section": "HTML-in-Canvas",
"tags": ["html-in-canvas", "text", "shader", "cursor", "chromatic"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/vfx-text-cursor.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "flowchart",
"kind": "block",
"href": "/catalog/blocks/flowchart",
"title": "Flowchart",
"tagline": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
"description": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
"group": "blocks",
"section": "Blocks",
"tags": ["diagram", "flowchart", "interactive"],
"tech": [],
"duration": 12,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/flowchart.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "flowchart-vertical",
"kind": "block",
"href": "/catalog/blocks/flowchart-vertical",
"title": "Flowchart Vertical",
"tagline": "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
"description": "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
"group": "blocks",
"section": "Blocks",
"tags": ["diagram", "flowchart", "interactive", "portrait"],
"tech": [],
"duration": 12,
"width": 1440,
"height": 2560,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/flowchart-vertical.json",
"heavy": false,
"width": 1440,
"height": 2560
}
}, {
"id": "hw-frame",
"kind": "block",
"href": "/catalog/blocks/hw-frame",
"title": "Sketched Frame",
"tagline": "Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)",
"description": "Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)",
"group": "blocks",
"section": "Blocks",
"tags": ["handwritten", "frame", "media"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/hw-frame.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "hw-pipeline",
"kind": "block",
"href": "/catalog/blocks/hw-pipeline",
"title": "Hand-Drawn Flowchart",
"tagline": "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list",
"description": "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list",
"group": "blocks",
"section": "Blocks",
"tags": ["handwritten", "diagram", "data-viz", "overlay"],
"tech": [],
"duration": 7,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/hw-pipeline.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "hw-text-cloud",
"kind": "block",
"href": "/catalog/blocks/hw-text-cloud",
"title": "Speech Bubble",
"tagline": "Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils",
"description": "Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils",
"group": "blocks",
"section": "Blocks",
"tags": ["handwritten", "speech-bubble", "overlay"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/hw-text-cloud.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "logo-outro",
"kind": "block",
"href": "/catalog/blocks/logo-outro",
"title": "Logo Outro",
"tagline": "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill",
"description": "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill",
"group": "blocks",
"section": "Blocks",
"tags": ["branding", "outro", "logo"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png",
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.mp4",
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/logo-outro.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "mk-background",
"kind": "block",
"href": "/catalog/blocks/mk-background",
"title": "Minimal Gradient Background",
"tagline": "Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode",
"description": "Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode",
"group": "blocks",
"section": "Blocks",
"tags": ["background", "gradient", "minimal", "professional", "presentation"],
"tech": [],
"duration": 10,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/mk-background.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "mk-placeholder-grid",
"kind": "block",
"href": "/catalog/blocks/mk-placeholder-grid",
"title": "Rounded Media Grid",
"tagline": "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",
"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",
"group": "blocks",
"section": "Blocks",
"tags": ["placeholder", "media", "grid", "minimal"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/mk-placeholder-grid.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "mk-progress-stat",
"kind": "block",
"href": "/catalog/blocks/mk-progress-stat",
"title": "Count-Up Stat Card",
"tagline": "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes",
"description": "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes",
"group": "blocks",
"section": "Blocks",
"tags": ["data-viz", "stat", "minimal"],
"tech": [],
"duration": 7,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/mk-progress-stat.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "mk-specs-list",
"kind": "block",
"href": "/catalog/blocks/mk-specs-list",
"title": "Specs Checklist",
"tagline": "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes",
"description": "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes",
"group": "blocks",
"section": "Blocks",
"tags": ["data-viz", "list", "minimal", "professional"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/mk-specs-list.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "spiral-galaxy",
"kind": "block",
"href": "/catalog/blocks/spiral-galaxy",
"title": "Spiral Galaxy",
"tagline": "A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own.",
"description": "A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own.",
"group": "blocks",
"section": "Blocks",
"tags": ["hero", "space", "particles", "webgl", "background"],
"tech": [],
"duration": 10,
"width": 1920,
"height": 1080,
"status": "experimental",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/spiral-galaxy.json",
"heavy": true,
"width": 1920,
"height": 1080
}
}, {
"id": "yt-logo-intro",
"kind": "block",
"href": "/catalog/blocks/yt-logo-intro",
"title": "Logo Intro Sequence",
"tagline": "Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion",
"description": "Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion",
"group": "blocks",
"section": "Blocks",
"tags": ["logo", "intro", "creator"],
"tech": [],
"duration": 6,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/yt-logo-intro.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}, {
"id": "yt-vertical-fill",
"kind": "block",
"href": "/catalog/blocks/yt-vertical-fill",
"title": "Vertical Media Filler",
"tagline": "Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)",
"description": "Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)",
"group": "blocks",
"section": "Blocks",
"tags": ["placeholder", "vertical", "media"],
"tech": [],
"duration": 8,
"width": 1920,
"height": 1080,
"status": "published",
"featured": 1000,
"poster": null,
"video": null,
"preview": {
"mode": "player",
"source": "/public/catalog/blocks/yt-vertical-fill.json",
"heavy": false,
"width": 1920,
"height": 1080
}
}]
};
## Related topics
Drop a catalog block or component into a project from inside Studio.
Combine items, add your own motion, go past a single block.
Add a new block or component to this catalog.