mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
feat(video): convert motion compositions from Remotion TSX to HyperFrames HTML
This commit is contained in:
Renn F
@@ -0,0 +1,13 @@
|
||||
// Default sample props for local preview (npx hyperframes preview). The
|
||||
// video-renderer sidecar OVERWRITES this file at render time with the real
|
||||
// per-release values + window.__ORIENTATION__.
|
||||
window.__PROPS__ = {
|
||||
script: "Ship day. Faster renders, sharper docs, one less thing to babysit.",
|
||||
version: "0.19.0",
|
||||
highlights: [
|
||||
"Fable-mode adopted fleet-wide",
|
||||
"FE/UX-UI design bar shipped",
|
||||
"Feature spotlight goes live on X",
|
||||
],
|
||||
};
|
||||
window.__ORIENTATION__ = "vertical";
|
||||
@@ -0,0 +1,55 @@
|
||||
import { readFileSync, existsSync } from "node:fs";
|
||||
import { dirname, join } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
// HTML-structure smoke test for the release-announcement composition. We
|
||||
// parse the HTML as text and assert structural invariants — no jsdom mount,
|
||||
// no rendering. The render-truth check lives on the sidecar; this test only
|
||||
// guards the authoring-side contract: dimensions, props.js wiring, theme
|
||||
// link, timed clips, and the offline-render constraint (no CDN scripts).
|
||||
|
||||
const here = dirname(fileURLToPath(import.meta.url));
|
||||
const dir = here;
|
||||
const read = (name) => readFileSync(join(dir, name), "utf8");
|
||||
|
||||
const orientations = [
|
||||
{ file: "vertical.html", height: "1920" },
|
||||
{ file: "square.html", height: "1080" },
|
||||
];
|
||||
|
||||
describe("release-announcement composition", () => {
|
||||
it("ships props.js (default preview values, sidecar overwrites at render)", () => {
|
||||
expect(existsSync(join(dir, "props.js"))).toBe(true);
|
||||
const src = read("props.js");
|
||||
expect(src).toContain("window.__PROPS__");
|
||||
expect(src).toContain("window.__ORIENTATION__");
|
||||
});
|
||||
|
||||
it("ships theme.css", () => {
|
||||
expect(existsSync(join(dir, "theme.css"))).toBe(true);
|
||||
});
|
||||
|
||||
it.each(orientations)("$file parses with correct dimensions and wiring", ({ file, height }) => {
|
||||
const html = read(file);
|
||||
|
||||
// HyperFrames render params on <html>.
|
||||
expect(html).toContain('data-width="1080"');
|
||||
expect(html).toContain(`data-height="${height}"`);
|
||||
expect(html).toMatch(/data-duration="\d+"/);
|
||||
expect(html).toMatch(/data-fps="\d+"/);
|
||||
|
||||
// props.js is loaded before the inline script reads window.__PROPS__.
|
||||
expect(html).toContain('<script src="props.js"></script>');
|
||||
|
||||
// theme.css is linked.
|
||||
expect(html).toContain('href="theme.css"');
|
||||
|
||||
// At least one timed clip element.
|
||||
expect(html).toMatch(/class="[^"]*clip[^"]*"/);
|
||||
|
||||
// No CDN scripts — the render is offline. Fonts load via @font-face from
|
||||
// ../../public/fonts/, never from a CDN.
|
||||
expect(html).not.toMatch(/<script[^>]+src="https?:\/\//);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,78 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,187 @@
|
||||
/* Shared visual language for the release-announcement composition. New
|
||||
* compositions should import these tokens instead of inventing their own —
|
||||
* that's what keeps the library coherent as more clips merge in over time.
|
||||
*
|
||||
* One accent color, a near-black (never pure #000) ink field, warm off-white
|
||||
* (never pure #fff) text. A display face for headlines paired with a body
|
||||
* face for everything else. See motion/README.md for the design-bar rationale.
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "Share Tech Mono";
|
||||
src: url("../../public/fonts/ShareTechMono-Regular.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url("../../public/fonts/Inter-Variable.woff2") format("woff2-variations");
|
||||
font-weight: 400 600;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-ink: #0B0B10;
|
||||
--color-ink-raised: #15151C;
|
||||
--color-paper: #F5F2EA;
|
||||
--color-muted: #9C9891;
|
||||
--color-accent: #FF5A1F;
|
||||
--color-hairline: rgba(245, 242, 234, 0.12);
|
||||
--font-display: "Share Tech Mono";
|
||||
--font-body: "Inter";
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--color-ink);
|
||||
color: var(--color-paper);
|
||||
font-family: var(--font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
#stage {
|
||||
position: relative;
|
||||
width: 1080px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--color-ink);
|
||||
}
|
||||
|
||||
/* Scan line — the one continuous ambient motion. A thin hairline near the
|
||||
* top with a small accent marker that travels left→right across the whole
|
||||
* clip, so the frame never goes fully static once entrances land. */
|
||||
.scan {
|
||||
position: absolute;
|
||||
left: 84px;
|
||||
right: 84px;
|
||||
height: 2px;
|
||||
background: var(--color-hairline);
|
||||
}
|
||||
.scan__marker {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: 0;
|
||||
width: 64px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--color-accent);
|
||||
box-shadow: 0 0 28px var(--color-accent);
|
||||
transform: translateX(-50%);
|
||||
animation: scan-travel 10s linear forwards;
|
||||
}
|
||||
@keyframes scan-travel {
|
||||
from { left: -12%; }
|
||||
to { left: 112%; }
|
||||
}
|
||||
|
||||
/* Content block anchored in the lower two-thirds, left-aligned. */
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 84px;
|
||||
right: 96px;
|
||||
bottom: var(--content-bottom, 148px);
|
||||
}
|
||||
|
||||
.kicker {
|
||||
font-family: var(--font-body);
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 6px;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: 20px;
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
animation: enter-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-family: var(--font-display);
|
||||
font-size: 148px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: var(--color-paper);
|
||||
margin-bottom: 28px;
|
||||
transform-origin: left bottom;
|
||||
opacity: 0;
|
||||
transform: translateY(22px) scale(0.94);
|
||||
animation: enter-rise-scale 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
animation-delay: 0.267s; /* ~8 frames @30fps */
|
||||
}
|
||||
|
||||
.script {
|
||||
font-family: var(--font-body);
|
||||
font-size: 44px;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
color: var(--color-paper);
|
||||
max-width: 820px;
|
||||
margin-bottom: 40px;
|
||||
opacity: 0;
|
||||
transform: translateY(22px);
|
||||
animation: enter-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
animation-delay: 0.8s; /* ~24 frames @30fps */
|
||||
}
|
||||
|
||||
.highlights {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.highlights__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: var(--font-body);
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
color: var(--color-paper);
|
||||
margin-bottom: 18px;
|
||||
opacity: 0;
|
||||
transform: translateX(-36px);
|
||||
animation: enter-slide 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
}
|
||||
.highlights__item:nth-child(1) { animation-delay: 1.667s; } /* ~50 frames */
|
||||
.highlights__item:nth-child(2) { animation-delay: 2.133s; } /* +14 frames */
|
||||
.highlights__item:nth-child(3) { animation-delay: 2.6s; } /* +14 frames */
|
||||
.highlights__item:nth-child(4) { animation-delay: 3.067s; } /* +14 frames */
|
||||
.highlights__tick {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 3px;
|
||||
margin-right: 18px;
|
||||
flex-shrink: 0;
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
.outro {
|
||||
position: absolute;
|
||||
left: 84px;
|
||||
bottom: 56px;
|
||||
font-family: var(--font-body);
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
color: var(--color-muted);
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
animation: enter-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
animation-delay: 7.667s; /* durationInFrames - 70 = 230 frames @30fps */
|
||||
}
|
||||
|
||||
@keyframes enter-rise {
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes enter-rise-scale {
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
@keyframes enter-slide {
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
<!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 — vertical (1080×1920)</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="1920" data-start="0" data-duration="10" data-fps="30">
|
||||
<!-- Scan line: thin hairline + travelling accent marker. The one
|
||||
continuous ambient motion so the frame never goes fully static. -->
|
||||
<div id="scan" class="scan clip" data-start="0" data-duration="10" data-track-index="0" style="top: 104px;">
|
||||
<div class="scan__marker"></div>
|
||||
</div>
|
||||
|
||||
<!-- Content anchored in the lower two-thirds, left-aligned. -->
|
||||
<div class="content" style="--content-bottom: 148px;">
|
||||
<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>
|
||||
Reference in New Issue
Block a user