mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
78 lines
4.0 KiB
HTML
78 lines
4.0 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en" data-composition-id="release-announcement" data-composition-duration="10" data-fps="30">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<title>Release Announcement — square (1080×1080)</title>
|
|||
|
|
<link rel="stylesheet" href="theme.css" />
|
|||
|
|
<script src="props.js"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="stage" data-composition-id="release-announcement" data-width="1080" data-height="1080" data-start="0" data-duration="10" data-fps="30">
|
|||
|
|
<!-- Scan line: thin hairline + travelling accent marker. Square cut
|
|||
|
|
uses a tighter scan top (72) than the vertical cut (104). -->
|
|||
|
|
<div id="scan" class="scan clip" data-start="0" data-duration="10" data-track-index="0" style="top: 72px;">
|
|||
|
|
<div class="scan__marker"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Content anchored in the lower two-thirds, left-aligned. Square cut
|
|||
|
|
uses a tighter bottom pad (72) than the vertical cut (148). -->
|
|||
|
|
<div class="content" style="--content-bottom: 72px;">
|
|||
|
|
<div id="kicker" class="kicker clip" data-start="0" data-duration="10" data-track-index="1">New release</div>
|
|||
|
|
<h1 id="headline" class="headline clip" data-start="0.267" data-duration="9.733" data-track-index="2">v0.19.0</h1>
|
|||
|
|
<p id="script" class="script clip" data-start="0.8" data-duration="9.2" data-track-index="3">Ship day. Faster renders, sharper docs, one less thing to babysit.</p>
|
|||
|
|
<ul id="highlights" class="highlights clip" data-start="1.667" data-duration="8.333" data-track-index="4">
|
|||
|
|
<li class="highlights__item"><span class="highlights__tick"></span><span class="highlights__text">Fable-mode adopted fleet-wide</span></li>
|
|||
|
|
<li class="highlights__item"><span class="highlights__tick"></span><span class="highlights__text">FE/UX-UI design bar shipped</span></li>
|
|||
|
|
<li class="highlights__item"><span class="highlights__tick"></span><span class="highlights__text">Feature spotlight goes live on X</span></li>
|
|||
|
|
<li class="highlights__item"><span class="highlights__tick"></span><span class="highlights__text"></span></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="outro" class="outro clip" data-start="7.667" data-duration="2.333" data-track-index="5">roboco.tech</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// Register the composition timeline metadata. Motion is driven by CSS
|
|||
|
|
// keyframes (no GSAP — the render is offline, no CDN), but HyperFrames
|
|||
|
|
// requires the registry entry to consider the composition valid.
|
|||
|
|
window.__timelines = window.__timelines || {};
|
|||
|
|
window.__timelines["release-announcement"] = {
|
|||
|
|
id: "release-announcement",
|
|||
|
|
duration: 10,
|
|||
|
|
fps: 30,
|
|||
|
|
animations: []
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Read sidecar-supplied props (props.js is overwritten at render time)
|
|||
|
|
// and populate the DOM. Defensive: a missing prop leaves the placeholder
|
|||
|
|
// text intact rather than throwing — a missing prop never crashes a render.
|
|||
|
|
(function () {
|
|||
|
|
var props = (window.__PROPS__ && typeof window.__PROPS__ === "object") ? window.__PROPS__ : {};
|
|||
|
|
|
|||
|
|
var version = props.version ? String(props.version) : "";
|
|||
|
|
if (version && !version.startsWith("v")) version = "v" + version;
|
|||
|
|
if (version) {
|
|||
|
|
var headline = document.getElementById("headline");
|
|||
|
|
if (headline) headline.textContent = version;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (typeof props.script === "string" && props.script) {
|
|||
|
|
var scriptEl = document.getElementById("script");
|
|||
|
|
if (scriptEl) scriptEl.textContent = props.script;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var highlights = Array.isArray(props.highlights) ? props.highlights.slice(0, 4) : [];
|
|||
|
|
var items = document.querySelectorAll(".highlights__item");
|
|||
|
|
for (var i = 0; i < items.length; i++) {
|
|||
|
|
var textEl = items[i].querySelector(".highlights__text");
|
|||
|
|
if (!textEl) continue;
|
|||
|
|
if (i < highlights.length && highlights[i]) {
|
|||
|
|
textEl.textContent = String(highlights[i]);
|
|||
|
|
} else {
|
|||
|
|
items[i].style.display = "none";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|