mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +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.
106 lines
3.8 KiB
HTML
Vendored
106 lines
3.8 KiB
HTML
Vendored
<!doctype html>
|
|
<!--
|
|
toggle-flip -- demo. Standalone 1920x1080 composition that MOUNTS the
|
|
primitive at registry/components/toggle-flip/toggle-flip.html via
|
|
data-composition-src, instead of inlining it: dark token-themed stage,
|
|
hosting the toggle in a ~40%-of-frame card centered in the composition.
|
|
data-variable-values on the host clip carries deliberately non-default
|
|
overrides (size, label) so preview tooling proves every variable actually
|
|
flows through the mount into the primitive. This file passing lint +
|
|
validate + snapshot is the proof the mount contract holds: the primitive
|
|
has no data-width/data-height of its own, so it must size itself off the
|
|
box this demo gives it, with no bleed and no 2x oversize. Kept in sync
|
|
with toggle-flip.html by hand; not installed by `hyperframes add`.
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=1920, height=1080" />
|
|
<title>Toggle Flip - Demo</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: #05070d;
|
|
}
|
|
|
|
#root {
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: radial-gradient(ellipse at 50% 40%, #0d1526 0%, #05070d 70%);
|
|
}
|
|
|
|
/* The ~40%-of-frame card the primitive mounts into. A visibly distinct
|
|
panel (rounded, bordered, its own --bg tone) so the mount box reads
|
|
clearly against the page backdrop in a snapshot -- proof the toggle
|
|
stays inside it instead of bleeding past its edges.
|
|
|
|
Sized and centered with real percentages against #root's definite
|
|
1920x1080 box, not left to resolve from data-width/data-height
|
|
alone: the mounted primitive sizes its own internals off cqw
|
|
(container query units), and a host box with no definite CSS
|
|
width of its own forces the browser into shrink-to-fit sizing --
|
|
which, feeding back through a size-contained container, collapses
|
|
to the mounted content's tiny intrinsic size instead of the
|
|
intended box. An explicit width/height here sidesteps that
|
|
entirely. data-width/data-height stay in sync below for tooling
|
|
that reads them (lint, per-instance sizing metadata). */
|
|
.mount-card {
|
|
--bg: #131b2e;
|
|
width: 40%;
|
|
height: 40%;
|
|
left: 30%;
|
|
top: 30%;
|
|
border-radius: 28px;
|
|
border: 1px solid rgba(148, 163, 184, 0.25);
|
|
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="root"
|
|
data-composition-id="toggle-flip-demo"
|
|
data-start="0"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
data-duration="4"
|
|
data-fps="30"
|
|
>
|
|
<div
|
|
id="toggle-flip-mount"
|
|
class="mount-card clip"
|
|
data-composition-id="toggle-flip"
|
|
data-composition-src="./toggle-flip.html"
|
|
data-variable-values='{"direction":"on","label":"Dark mode","size":55}'
|
|
data-start="0"
|
|
data-duration="4"
|
|
data-track-index="0"
|
|
data-width="768"
|
|
data-height="432"
|
|
></div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<script>
|
|
// No motion of its own: this demo is a static host for the mounted
|
|
// primitive below, which owns and registers its own timeline. Register
|
|
// an empty paused timeline under this file's own composition id so the
|
|
// runtime's timeline-registry check is satisfied without inventing
|
|
// motion the demo doesn't need.
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines["toggle-flip-demo"] = gsap.timeline({ paused: true });
|
|
</script>
|
|
</body>
|
|
</html>
|