mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-13 07:40:06 +00:00
Miguel Ángel
9734578e60
Restores the 208 catalog items reverted after their previews 404'd in production, this time on the payload mechanism rather than the .html files that caused the outage. The generator no longer writes a preview document to docs/public. That writer, and the machinery under it, existed only to produce files the docs host discards, so it is gone rather than bypassed. Items now embed the composition itself via a payload, which is what the previous change already does for the items that were already in the catalog. The variables explorer is parked, not restored: it drove its preview through the same unpublished .html path, so it would have shown an empty frame. Items that declare variables get the live player plus the static variables table, and reconnecting the explorer to payloads is a follow-up.
511 lines
16 KiB
Plaintext
511 lines
16 KiB
Plaintext
---
|
||
title: "Data Chart"
|
||
description: "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels"
|
||
---
|
||
|
||
import { InstallCommand } from "/snippets/install-command.jsx";
|
||
|
||
<iframe
|
||
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
|
||
title="data-chart preview"
|
||
loading="lazy"
|
||
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/data-chart.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png");document.body.appendChild(p)});<\/script></body></html>`}
|
||
/>
|
||
|
||
## Install
|
||
|
||
<InstallCommand command="npx hyperframes add data-chart" />
|
||
|
||
That writes one file: `compositions/data-chart.html`.
|
||
|
||
## Change the colors
|
||
|
||
Set these CSS variables on the block:
|
||
|
||
- `--bg-color` — Background. Defaults to `#faf9f6`.
|
||
- `--text-color` — Text color. Defaults to `#333333`.
|
||
|
||
## Source
|
||
|
||
<Accordion title={`data-chart.html`}>
|
||
|
||
```html
|
||
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=1920, height=1080" />
|
||
<title>Data Chart</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@300;400;600&display=block"
|
||
rel="stylesheet"
|
||
/>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
overflow: hidden;
|
||
background-color: #faf9f6;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div
|
||
id="data-chart"
|
||
data-composition-id="data-chart"
|
||
data-width="1920"
|
||
data-height="1080"
|
||
data-start="0"
|
||
data-duration="15"
|
||
>
|
||
<div class="chart-container">
|
||
<!-- Header Section -->
|
||
<div class="header">
|
||
<h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
|
||
<p class="subtitle">Jan–Jun 2024, in thousands</p>
|
||
<div class="key">
|
||
<div class="key-item">
|
||
<div class="key-box revenue-box"></div>
|
||
<span class="key-text">Revenue</span>
|
||
</div>
|
||
<div class="key-item">
|
||
<div class="key-line conversion-line"></div>
|
||
<span class="key-text">Conversion Rate</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SVG Chart Area -->
|
||
<svg class="chart-svg" viewBox="0 0 1600 700" preserveAspectRatio="xMidYMid meet">
|
||
<!-- Gridlines Group -->
|
||
<g class="gridlines"></g>
|
||
|
||
<!-- X-Axis Labels -->
|
||
<g class="x-axis-labels"></g>
|
||
|
||
<!-- Bars Group (Revenue) -->
|
||
<g class="bars-group"></g>
|
||
|
||
<!-- Bar Labels Group -->
|
||
<g class="bar-labels-group"></g>
|
||
|
||
<!-- Line Group (Conversion Rate) -->
|
||
<g class="line-group">
|
||
<path class="conversion-path" fill="none" stroke="#326FA8" stroke-width="1.5" />
|
||
<circle class="line-dot" r="5" fill="#326FA8" style="opacity: 0" />
|
||
</g>
|
||
|
||
<!-- Line Labels Group -->
|
||
<g class="line-labels-group"></g>
|
||
|
||
<!-- Baseline -->
|
||
<line x1="100" y1="600" x2="1500" y2="600" stroke="black" stroke-width="1" />
|
||
</svg>
|
||
|
||
<!-- Source Line -->
|
||
<div class="source">Source: Internal analytics</div>
|
||
</div>
|
||
|
||
<style>
|
||
[data-composition-id="data-chart"] {
|
||
width: 1920px;
|
||
height: 1080px;
|
||
background-color: #faf9f6;
|
||
font-family: "Libre Franklin", sans-serif;
|
||
color: #333;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .chart-container {
|
||
width: 1600px;
|
||
height: 900px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
transform: scale(1.15);
|
||
transform-origin: center center;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .header {
|
||
margin-bottom: 40px;
|
||
text-align: left;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .headline {
|
||
font-family: "Libre Baskerville", serif;
|
||
font-size: 42px;
|
||
margin: 0;
|
||
padding: 0;
|
||
clip-path: inset(0 100% 0 0);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .subtitle {
|
||
font-size: 16px;
|
||
color: #666;
|
||
margin: 8px 0 16px 0;
|
||
clip-path: inset(0 100% 0 0);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .key {
|
||
display: flex;
|
||
gap: 24px;
|
||
opacity: 0;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .key-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .key-box {
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color: #5c5c5c;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .key-line {
|
||
width: 16px;
|
||
height: 1.5px;
|
||
background-color: #326fa8;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .key-text {
|
||
font-size: 13px;
|
||
color: #666;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .chart-svg {
|
||
width: 100%;
|
||
height: 600px;
|
||
overflow: visible;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .source {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
font-size: 11px;
|
||
color: #999;
|
||
opacity: 0;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .grid-line {
|
||
stroke: #e8e8e8;
|
||
stroke-width: 0.5px;
|
||
opacity: 0;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .axis-label {
|
||
font-size: 14px;
|
||
fill: #666;
|
||
text-anchor: middle;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .bar {
|
||
fill: #5c5c5c;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .bar-label {
|
||
font-size: 14px;
|
||
fill: #333;
|
||
text-anchor: middle;
|
||
opacity: 0;
|
||
}
|
||
|
||
[data-composition-id="data-chart"] .line-label {
|
||
font-size: 14px;
|
||
fill: #326fa8;
|
||
font-weight: 600;
|
||
text-anchor: middle;
|
||
opacity: 0;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
(function () {
|
||
const svg = document.querySelector('[data-composition-id="data-chart"] .chart-svg');
|
||
const tl = gsap.timeline({ paused: true });
|
||
|
||
// Data
|
||
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
|
||
const revenueData = [8, 12, 15, 11, 18, 22];
|
||
const conversionData = [2.1, 2.8, 3.2, 2.9, 3.8, 4.2];
|
||
|
||
// Chart Dimensions
|
||
const chartWidth = 1400;
|
||
const chartHeight = 500;
|
||
const startX = 100;
|
||
const startY = 600;
|
||
const barWidth = 80;
|
||
const spacing = (chartWidth - barWidth * months.length) / (months.length + 1);
|
||
|
||
// Scales
|
||
const maxRevenue = 25;
|
||
const maxConversion = 5;
|
||
|
||
const getBarY = (val) => startY - (val / maxRevenue) * chartHeight;
|
||
const getLineY = (val) => startY - (val / maxConversion) * chartHeight;
|
||
const getX = (i) => startX + spacing + i * (barWidth + spacing) + barWidth / 2;
|
||
|
||
// Setup Elements
|
||
const gridGroup = svg.querySelector(".gridlines");
|
||
const xAxisGroup = svg.querySelector(".x-axis-labels");
|
||
const barsGroup = svg.querySelector(".bars-group");
|
||
const barLabelsGroup = svg.querySelector(".bar-labels-group");
|
||
const lineLabelsGroup = svg.querySelector(".line-labels-group");
|
||
const conversionPath = svg.querySelector(".conversion-path");
|
||
const lineDot = svg.querySelector(".line-dot");
|
||
|
||
// Create Gridlines
|
||
for (let i = 1; i <= 5; i++) {
|
||
const y = startY - i * (chartHeight / 5);
|
||
const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
|
||
line.setAttribute("x1", startX);
|
||
line.setAttribute("y1", y);
|
||
line.setAttribute("x2", startX + chartWidth);
|
||
line.setAttribute("y2", y);
|
||
line.setAttribute("class", "grid-line");
|
||
gridGroup.appendChild(line);
|
||
}
|
||
|
||
// Create X-Axis Labels & Bars & Bar Labels
|
||
const linePoints = [];
|
||
months.forEach((month, i) => {
|
||
const x = getX(i);
|
||
|
||
const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
||
label.setAttribute("x", x);
|
||
label.setAttribute("y", startY + 30);
|
||
label.setAttribute("class", "axis-label");
|
||
label.textContent = month;
|
||
xAxisGroup.appendChild(label);
|
||
|
||
const barHeight = (revenueData[i] / maxRevenue) * chartHeight;
|
||
const bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||
bar.setAttribute("x", x - barWidth / 2);
|
||
bar.setAttribute("y", startY);
|
||
bar.setAttribute("width", barWidth);
|
||
bar.setAttribute("height", 0);
|
||
bar.setAttribute("class", "bar");
|
||
barsGroup.appendChild(bar);
|
||
|
||
const barLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
||
barLabel.setAttribute("x", x);
|
||
barLabel.setAttribute("y", getBarY(revenueData[i]) - 10);
|
||
barLabel.setAttribute("class", "bar-label");
|
||
barLabel.textContent = `$${revenueData[i]}K`;
|
||
barLabelsGroup.appendChild(barLabel);
|
||
|
||
linePoints.push(`${x},${getLineY(conversionData[i])}`);
|
||
|
||
const lineLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
||
lineLabel.setAttribute("x", x);
|
||
lineLabel.setAttribute("y", getLineY(conversionData[i]) - 15);
|
||
lineLabel.setAttribute("class", "line-label");
|
||
lineLabel.textContent = `${conversionData[i]}%`;
|
||
lineLabelsGroup.appendChild(lineLabel);
|
||
});
|
||
|
||
// Set Path Data
|
||
conversionPath.setAttribute("d", `M ${linePoints.join(" L ")}`);
|
||
const pathLength = conversionPath.getTotalLength();
|
||
conversionPath.style.strokeDasharray = pathLength;
|
||
conversionPath.style.strokeDashoffset = pathLength;
|
||
|
||
// --- ANIMATION TIMELINE ---
|
||
|
||
tl.to(
|
||
'[data-composition-id="data-chart"] .headline',
|
||
{
|
||
clipPath: "inset(0 0% 0 0)",
|
||
duration: 1.2,
|
||
ease: "power1.inOut",
|
||
},
|
||
0,
|
||
);
|
||
|
||
tl.to(
|
||
'[data-composition-id="data-chart"] .subtitle',
|
||
{
|
||
clipPath: "inset(0 0% 0 0)",
|
||
duration: 1.2,
|
||
ease: "power1.inOut",
|
||
},
|
||
0.2,
|
||
);
|
||
|
||
tl.to(
|
||
'[data-composition-id="data-chart"] .key',
|
||
{
|
||
opacity: 1,
|
||
duration: 0.4,
|
||
ease: "power2.out",
|
||
},
|
||
1.0,
|
||
);
|
||
|
||
tl.to(
|
||
'[data-composition-id="data-chart"] .grid-line',
|
||
{
|
||
opacity: 1,
|
||
duration: 0.5,
|
||
stagger: 0.25,
|
||
ease: "power2.out",
|
||
},
|
||
0.5,
|
||
);
|
||
|
||
// Bars
|
||
const bars = barsGroup.querySelectorAll(".bar");
|
||
const barLabels = barLabelsGroup.querySelectorAll(".bar-label");
|
||
|
||
bars.forEach((bar, i) => {
|
||
const barHeight = (revenueData[i] / maxRevenue) * chartHeight;
|
||
const startTime = 1.5 + i * 0.5;
|
||
|
||
tl.to(
|
||
bar,
|
||
{
|
||
attr: { height: barHeight, y: startY - barHeight },
|
||
duration: 0.8,
|
||
ease: "power2.out",
|
||
},
|
||
startTime,
|
||
);
|
||
|
||
tl.to(
|
||
barLabels[i],
|
||
{
|
||
opacity: 1,
|
||
duration: 0.3,
|
||
ease: "power2.out",
|
||
},
|
||
startTime + 0.8,
|
||
);
|
||
});
|
||
|
||
// Line
|
||
const lastBarStartTime = 1.5 + (months.length - 1) * 0.5;
|
||
const lineStartTime = lastBarStartTime + 0.5;
|
||
|
||
tl.to(
|
||
conversionPath,
|
||
{
|
||
strokeDashoffset: 0,
|
||
duration: 3,
|
||
ease: "none",
|
||
},
|
||
lineStartTime,
|
||
);
|
||
|
||
// Line Dot & Labels
|
||
tl.set(
|
||
lineDot,
|
||
{
|
||
opacity: 1,
|
||
attr: { cx: getX(0), cy: getLineY(conversionData[0]) },
|
||
},
|
||
lineStartTime,
|
||
);
|
||
|
||
const lineLabels = lineLabelsGroup.querySelectorAll(".line-label");
|
||
months.forEach((_, i) => {
|
||
if (i > 0) {
|
||
const x = getX(i);
|
||
const y = getLineY(conversionData[i]);
|
||
tl.to(
|
||
lineDot,
|
||
{
|
||
attr: { cx: x, cy: y },
|
||
duration: 3 / (months.length - 1),
|
||
ease: "none",
|
||
},
|
||
lineStartTime + ((i - 1) / (months.length - 1)) * 3,
|
||
);
|
||
}
|
||
|
||
const labelTime = lineStartTime + (i / (months.length - 1)) * 3 + 0.2;
|
||
|
||
lineLabels[i].textContent = "0.0%";
|
||
|
||
tl.to(
|
||
lineLabels[i],
|
||
{
|
||
opacity: 1,
|
||
duration: 0.1,
|
||
ease: "power2.out",
|
||
},
|
||
labelTime,
|
||
);
|
||
|
||
const dummy = { val: 0 };
|
||
tl.to(
|
||
dummy,
|
||
{
|
||
val: conversionData[i],
|
||
duration: 0.8,
|
||
ease: "power2.out",
|
||
onUpdate: () => {
|
||
lineLabels[i].textContent = dummy.val.toFixed(1) + "%";
|
||
},
|
||
},
|
||
labelTime,
|
||
);
|
||
});
|
||
|
||
// Source Line
|
||
tl.to(
|
||
'[data-composition-id="data-chart"] .source',
|
||
{
|
||
opacity: 1,
|
||
duration: 0.5,
|
||
ease: "power2.out",
|
||
},
|
||
">+0.5",
|
||
);
|
||
|
||
window.__timelines = window.__timelines || {};
|
||
window.__timelines["data-chart"] = tl;
|
||
})();
|
||
</script>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
</Accordion>
|
||
|
||
## Usage
|
||
|
||
After installing, add the block to your host composition:
|
||
|
||
```html
|
||
<div data-composition-id="data-chart" data-composition-src="compositions/data-chart.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||
```
|
||
|
||
{/* hf:generated-footer */}
|
||
|
||
Tagged `data` `chart` `statistics`.
|
||
|
||
## Related topics
|
||
|
||
- [Browse the complete Catalog](/catalog)
|
||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||
- [Build a richer composition](/go-further)
|