mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 14:50:02 +00:00
docs: light-theme videos on nine guides, plus two rewritten pages
**Nine guide videos rebuilt in the light house style.** They were dark — a reader clicking between sibling guides watched the theme flip. mcp, performance, rendering, skills, html-in-canvas and remove-background were restyled to the bone field; faceless-explainer, product-launch and voice-and-audio were re-narrated with River, the house voice the user-journey films use. Measured luma is 177-230, matching the journey films, and every one carries audio. The restyle also surfaced a real bug in the frame itself: the house coral #D96A4F is 2.95:1 on bone, under the WCAG large-text floor, and `hyperframes check` failed on it. Darkened to #B44E33 (4.43:1) before any of these rendered. **canary-rollouts trimmed from 2,443 words to 520.** The statistical-calibration essay — pre-registered experiment design, a probability formula, rejected hardware-fingerprinting alternatives — was never documentation for someone shipping a staged rollout. Cut to Add one / Override one / Remove one / Where it lives, the part that was already good. **thirty-days now shows the films.** It was 431 words and 30 links to x.com for a series entirely about videos, with no thumbnails. It now leads with real preview clips where a film exists and marks the rest with a visual placeholder rather than a dead off-site link.
This commit is contained in:
ukimsanov
@@ -11,8 +11,8 @@ Start from a topic, article, or notes. HyperFrames invents the typography, diagr
|
||||
|
||||
<DocsVideo
|
||||
title="One idea told four ways, with no footage to start from"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/faceless-explainer-demo-v1.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/faceless-explainer-demo-v1.jpg"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/faceless-explainer-demo-v2.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/faceless-explainer-demo-v2.jpg"
|
||||
/>
|
||||
|
||||
Kinetic type, an abstract graphic, a diagram, and a data-visualisation — all
|
||||
|
||||
@@ -11,8 +11,8 @@ Use it when the visual treatment depends on both real HTML and GPU effects—for
|
||||
|
||||
<DocsVideo
|
||||
title="Your dashboard, drawn as a live WebGL texture while its numbers keep updating"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/html-in-canvas-demo-v1.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/html-in-canvas-demo-v1.jpg"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/html-in-canvas-demo-v2.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/html-in-canvas-demo-v2.jpg"
|
||||
/>
|
||||
|
||||
The left panel is ordinary HTML and CSS. The right is the same pixels inside a
|
||||
|
||||
+2
-2
@@ -16,8 +16,8 @@ account without installing the local CLI.
|
||||
|
||||
<DocsVideo
|
||||
title="Making and revising a video inside an AI chat, then rendering it"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/mcp-flow-demo-v1.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/mcp-flow-demo-v1.jpg"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/mcp-flow-demo-v2.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/mcp-flow-demo-v2.jpg"
|
||||
/>
|
||||
|
||||
An illustration of the flow, labelled as such on screen — describe the video,
|
||||
|
||||
@@ -9,8 +9,8 @@ A finished render can be smooth even when preview stutters. Preview must draw ea
|
||||
|
||||
<DocsVideo
|
||||
title="The same composition built two ways, timed on this machine"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/render-performance-demo-v1.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/render-performance-demo-v1.jpg"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/render-performance-demo-v2.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/render-performance-demo-v2.jpg"
|
||||
/>
|
||||
|
||||
Real numbers, not estimates: 25.0s against 9.8s, taken as the median of three
|
||||
|
||||
@@ -10,8 +10,8 @@ Give HyperFrames the real URL when the product, website, or brand should appear
|
||||
|
||||
<DocsVideo
|
||||
title="A launch film built by this workflow from huly.io, end to end"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v4.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v4.jpg"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v5.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v5.jpg"
|
||||
/>
|
||||
|
||||
Built by running this workflow on a real site. The screens are captured from
|
||||
|
||||
@@ -19,7 +19,7 @@ model locally; it does not upload the source or require an API key.
|
||||
|
||||
<DocsVideo
|
||||
title="A presenter cut out of a real room, shown against the original and magnified at the hard edges"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/remove-background-demo-v2.mp4"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/remove-background-demo-v3.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/remove-background-demo-v1.jpg"
|
||||
/>
|
||||
|
||||
|
||||
@@ -9,8 +9,8 @@ Studio is the simplest place to export a project. Use the command line when an a
|
||||
|
||||
<DocsVideo
|
||||
title="One command turns the project into an MP4"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/render-loop-demo-v1.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/render-loop-demo-v1.jpg"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/render-loop-demo-v2.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/render-loop-demo-v2.jpg"
|
||||
/>
|
||||
|
||||
The whole loop: the project, the render command, progress, and the finished file
|
||||
|
||||
@@ -10,8 +10,8 @@ HyperFrames skills teach coding agents the project format, animation rules, medi
|
||||
|
||||
<DocsVideo
|
||||
title="One command installs the skills, and the router picks the workflow"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/skills-install-demo-v1.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/skills-install-demo-v1.jpg"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/skills-install-demo-v2.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/skills-install-demo-v2.jpg"
|
||||
/>
|
||||
|
||||
The terminal output is a real run of the command. Afterwards the router reads a
|
||||
|
||||
@@ -20,8 +20,8 @@ understand or feel the video.
|
||||
|
||||
<DocsVideo
|
||||
title="Narration, music ducking under it, and effects landing on the beat"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/voice-audio-demo-v1.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/voice-audio-demo-v1.jpg"
|
||||
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/voice-audio-demo-v2.mp4"
|
||||
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/voice-audio-demo-v2.jpg"
|
||||
/>
|
||||
|
||||
Turn the sound on for this one — the audio is the subject. You can watch the
|
||||
|
||||
Reference in New Issue
Block a user