ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-02 12:08:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "feat(registry): the video-primitive moves, documented and customisable (#3090)" (#3162)

Browse Source 
This reverts commit 3b53bfd2f7.
This commit is contained in:
Miguel Ángel
2026-08-10 14:47:47 -04:00
committed by GitHub
parent 3b53bfd2f7
commit c86d4013f5
2328 changed files with 5906 additions and 458525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/catalog/blocks/camcorder-hud.mdx
+4 -176
View File
@@ -3,13 +3,13 @@ title: "Camcorder HUD"
description: "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
---
import { InstallCommand } from "/snippets/install-command.jsx";
<iframe src="/public/catalog/preview/blocks/camcorder-hud.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Camcorder HUD preview" />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png" autoPlay muted loop playsInline />
## Install
<InstallCommand command="npx hyperframes add camcorder-hud" />
```bash Terminal
npx hyperframes add camcorder-hud
```
That writes one file: `compositions/camcorder-hud.html`.
@@ -32,178 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
## Source
<Accordion title={`camcorder-hud.html`}>
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
width: 1920px;
height: 1080px;
margin: 0;
overflow: hidden;
background: transparent;
}
#ch-hud {
--hf-camcorder-color: #fff;
--hf-camcorder-accent: #f12c2c;
--hf-camcorder-inset: 5vmin;
--hf-camcorder-font-size: 3.7vmin;
position: absolute;
inset: 0;
color: var(--hf-camcorder-color);
font-family: monospace;
font-size: var(--hf-camcorder-font-size);
font-weight: 700;
line-height: 1.25;
pointer-events: none;
-webkit-text-stroke: 0.12vmin rgb(0 0 0 / 92%);
text-shadow: 0 0.2vmin 0.6vmin rgb(0 0 0 / 90%);
}
#ch-hud .ch-corner {
position: absolute;
}
#ch-hud .ch-record {
top: var(--hf-camcorder-inset);
left: var(--hf-camcorder-inset);
display: flex;
align-items: center;
gap: 1.8vmin;
}
#ch-hud .ch-record-dot {
width: 2.2vmin;
height: 2.2vmin;
border-radius: 50%;
background: var(--hf-camcorder-accent);
box-shadow: 0 0 0.9vmin color-mix(in srgb, var(--hf-camcorder-accent) 55%, transparent);
}
#ch-hud .ch-battery {
top: var(--hf-camcorder-inset);
right: var(--hf-camcorder-inset);
width: 7vmin;
height: 3.5vmin;
border: 0.35vmin solid currentcolor;
}
#ch-hud .ch-battery::before {
position: absolute;
top: 0.7vmin;
left: 0.7vmin;
width: 4.7vmin;
height: 1.4vmin;
background: currentcolor;
content: "";
}
#ch-hud .ch-battery::after {
position: absolute;
top: 0.7vmin;
right: -1vmin;
width: 0.7vmin;
height: 1.4vmin;
background: currentcolor;
content: "";
}
#ch-hud .ch-date {
bottom: var(--hf-camcorder-inset);
left: var(--hf-camcorder-inset);
}
#ch-hud .ch-counter {
right: var(--hf-camcorder-inset);
bottom: var(--hf-camcorder-inset);
text-align: right;
}
#ch-hud .ch-mode {
display: block;
margin-bottom: 0.7vmin;
font-size: 2.6vmin;
}
</style>
</head>
<body>
<div
id="camcorder-hud"
data-composition-id="camcorder-hud"
data-start="0"
data-duration="4"
data-width="1920"
data-height="1080"
>
<div id="ch-hud" data-hf-counter-start="0" aria-hidden="true">
<div class="ch-corner ch-record"><span class="ch-record-dot"></span><span>REC</span></div>
<div class="ch-corner ch-battery"></div>
<div class="ch-corner ch-date">JAN 01 2000<br />12:00 AM</div>
<div class="ch-corner ch-counter">
<span class="ch-mode">SP · 16:9</span><span class="ch-counter-value">00:00:00</span>
</div>
</div>
</div>
<script>
window.__timelines = window.__timelines || {};
var hud = document.getElementById("ch-hud");
var counter = hud && hud.querySelector(".ch-counter-value");
var recordDot = hud && hud.querySelector(".ch-record-dot");
var host = hud && hud.closest("[data-composition-id]");
if (!hud || !counter || !recordDot || !host) {
throw new Error("Camcorder HUD could not find its composition host");
}
var compositionId = host.getAttribute("data-composition-id");
var duration = Number(host.getAttribute("data-duration")) || 4;
var counterStart = Number(hud.getAttribute("data-hf-counter-start")) || 0;
var state = { seconds: 0 };
function formatCounter(value) {
var seconds = Math.max(0, Math.floor(value));
var hours = Math.floor(seconds / 3600);
var minutes = Math.floor((seconds % 3600) / 60);
var remainder = seconds % 60;
return [hours, minutes, remainder]
.map(function (part) {
return String(part).padStart(2, "0");
})
.join(":");
}
function updateHud() {
counter.textContent = formatCounter(counterStart + state.seconds);
recordDot.style.opacity = Math.floor(state.seconds / 0.55) % 2 === 0 ? "1" : "0.25";
}
var tl = gsap.timeline({ paused: true });
tl.to(state, { seconds: duration, duration: duration, ease: "none", onUpdate: updateHud }, 0);
updateHud();
window.__timelines[compositionId] = tl;
</script>
</body>
</html>
```
</Accordion>
{/* hf:generated-footer */}
Tagged `camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatment-overlay`.