mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-15 13:58:20 +00:00
Miguel Angel Simon Sierra
bb912587b9
Adds the 25 video primitive compositions and their generated Mintlify pages. Each page embeds a live <hyperframes-player> preview with editable composition variables rather than a rendered MP4. Adds the catalog-browsing eval under evals/catalog-retrieval: a 424-entry shelf built from HEAD, nine retrieval conditions (no-catalog control, full read, lexical, semantic, and hybrid across several values of k), a brief generator that constructs each brief from a known target, a blind three-pass gold validation committee, and a mechanical scorer that keeps mountable and fit as two separate numbers. The eval vendors its own shelf, primitive sources, and preview list instead of reading them from an ignored working directory, so the shelf regenerates byte for byte from a clean checkout. Derived artifacts stay out: the embedding cache and the run checkpoints are regenerated rather than committed, so no run can score against a stale copy of either. Lint ignores now cover vendored minified player bundles by pattern instead of one path at a time.
421 lines
19 KiB
Plaintext
421 lines
19 KiB
Plaintext
---
|
|
title: "Video Primitives"
|
|
description: "An index of the certified video primitives and their live previews"
|
|
---
|
|
|
|
import { PrimitivePlayer } from "/snippets/PrimitivePlayer.jsx";
|
|
|
|
<div className="not-prose hf-primitive-hero">
|
|
<span className="hf-primitive-eyebrow">Motion catalog</span>
|
|
<p>Explore 25 production-ready motion patterns. Each preview is live, seekable, and ready to tune.</p>
|
|
</div>
|
|
|
|
<div className="not-prose hf-primitive-sections">
|
|
|
|
<section className="hf-primitive-section">
|
|
<header className="hf-primitive-section-header">
|
|
<span className="hf-primitive-section-index">01</span>
|
|
<div>
|
|
<h2>Annotation</h2>
|
|
<p>4 primitives</p>
|
|
</div>
|
|
</header>
|
|
<div className="hf-primitive-grid">
|
|
|
|
<a href="/primitives/caliper-caption-rail" className="hf-primitive-card" data-orientation="portrait">
|
|
<PrimitivePlayer name="caliper-caption-rail" width={1080} height={1920} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Caliper Caption Rail</span>
|
|
<span className="hf-primitive-card-aspect">9:16</span>
|
|
</div>
|
|
<p>A specification callout opens along a measurement rail, then the instrument rotates 90 degrees onto a long object axis and locks the type against it.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/marker-highlight" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="marker-highlight" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Marker Highlight</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>A short display line settles in, then one SVG marker stroke draws over the first matched word or phrase.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/plan-room-audit" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="plan-room-audit" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Plan Room Audit</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>A floor plan sheet rotates clockwise into square while its walls draw, then five rooms fill and receive leader tags in reading order.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/whiteboard-ink" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="whiteboard-ink" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Whiteboard Ink</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>SVG paths draw one stroke at a time while a pen nib follows each active path tip and hops between strokes.</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section className="hf-primitive-section">
|
|
<header className="hf-primitive-section-header">
|
|
<span className="hf-primitive-section-index">02</span>
|
|
<div>
|
|
<h2>Camera moves</h2>
|
|
<p>4 primitives</p>
|
|
</div>
|
|
</header>
|
|
<div className="hf-primitive-grid">
|
|
|
|
<a href="/primitives/caption-camera-follow" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="caption-camera-follow" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Caption Camera Follow</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>New words stay fixed on an expanding page while the camera pulls back exponentially until the complete sentence is readable.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/depth-rack-focus" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="depth-rack-focus" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Depth Rack Focus</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>A sharp foreground dissolves into bokeh as a blurred message behind it resolves while the whole stack creeps forward.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/focus-rack" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="focus-rack" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Focus Rack</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>Focus moves exactly once from a sharp near card to a blurred, dim far card as blur, scale, and parallax change together.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/orbit-ring-camera" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="orbit-ring-camera" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Orbit Ring Camera</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>A camera tracks a lit head around a tilted ring, then dollies out to reveal the full ellipse, eight stations, and three rotating inner rails.</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section className="hf-primitive-section">
|
|
<header className="hf-primitive-section-header">
|
|
<span className="hf-primitive-section-index">03</span>
|
|
<div>
|
|
<h2>Interface morphs</h2>
|
|
<p>1 primitive</p>
|
|
</div>
|
|
</header>
|
|
<div className="hf-primitive-grid">
|
|
|
|
<a href="/primitives/chevron-pill-card-morph" className="hf-primitive-card" data-orientation="portrait">
|
|
<PrimitivePlayer name="chevron-pill-card-morph" width={1080} height={1920} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Chevron Pill Card Morph</span>
|
|
<span className="hf-primitive-card-aspect">9:16</span>
|
|
</div>
|
|
<p>One surface changes from a circle to a pill to a card while one accent element stretches from a chevron disc into the card action bar.</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section className="hf-primitive-section">
|
|
<header className="hf-primitive-section-header">
|
|
<span className="hf-primitive-section-index">04</span>
|
|
<div>
|
|
<h2>Motion trails</h2>
|
|
<p>1 primitive</p>
|
|
</div>
|
|
</header>
|
|
<div className="hf-primitive-grid">
|
|
|
|
<a href="/primitives/echo-trail" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="echo-trail" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Echo Trail</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>A slotted subject travels along an authored path with lagged ghost copies that collapse into it and disappear at rest.</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section className="hf-primitive-section">
|
|
<header className="hf-primitive-section-header">
|
|
<span className="hf-primitive-section-index">05</span>
|
|
<div>
|
|
<h2>Text effects</h2>
|
|
<p>4 primitives</p>
|
|
</div>
|
|
</header>
|
|
<div className="hf-primitive-grid">
|
|
|
|
<a href="/primitives/glyph-ring-assemble" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="glyph-ring-assemble" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Glyph Ring Assemble</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>Arc-set letters leave a wordmark in reverse reading order, each completes one full orbit around a shared ring, and the letters close back into the word.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/kinetic-type-swap" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="kinetic-type-swap" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Kinetic Type Swap</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>A fixed sentence rolls one masked word slot vertically through a list of options without changing the sentence layout.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/particle-text-dissolve" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="particle-text-dissolve" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Particle Text Dissolve</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>Seeded particles either assemble into a crisp text line or depart from that line into a fading cloud.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/version-plate-type" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="version-plate-type" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Version Plate Type</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>Oversized glyph plates stamp into a cluster, hard-cut to fitted words inside a selection box, then the box widens, shortens, closes on the letters, and pushes off frame.</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section className="hf-primitive-section">
|
|
<header className="hf-primitive-section-header">
|
|
<span className="hf-primitive-section-index">06</span>
|
|
<div>
|
|
<h2>Transitions</h2>
|
|
<p>4 primitives</p>
|
|
</div>
|
|
</header>
|
|
<div className="hf-primitive-grid">
|
|
|
|
<a href="/primitives/grade-split-reveal" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="grade-split-reveal" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Grade Split Reveal</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>A hard vertical edge sweeps left to right across two aligned copies of one plate, pauses at the midpoint for comparison, then reveals the graded copy across the full frame.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/halftone-dissolve" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="halftone-dissolve" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Halftone Dissolve</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>Accent dots appear on a fixed grid, open into windows onto scene B, and merge until scene B replaces scene A.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/match-cut" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="match-cut" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Match Cut</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>Scene A drives a circle into center-frame geometry, a hard single-frame swap reveals scene B with a matching circle, and that circle immediately shrinks as scene B settles.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/z-punch-through" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="z-punch-through" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Z Punch Through</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>The camera moves through an opening in a front wall as that wall passes the lens and the back plane advances into its settled state.</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section className="hf-primitive-section">
|
|
<header className="hf-primitive-section-header">
|
|
<span className="hf-primitive-section-index">07</span>
|
|
<div>
|
|
<h2>Card assembly</h2>
|
|
<p>2 primitives</p>
|
|
</div>
|
|
</header>
|
|
<div className="hf-primitive-grid">
|
|
|
|
<a href="/primitives/persona-card-fan" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="persona-card-fan" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Persona Card Fan</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>Four portrait cards deal onto the right side one at a time while displaced cards scale and rotate into a fixed outer wedge that tightens as it fills.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/receipt-card" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="receipt-card" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Receipt Card</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>A tilted quote card flies in from the right, settles flat, pushes in slowly, then fills selection boxes behind one phrase while the marked words turn white.</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section className="hf-primitive-section">
|
|
<header className="hf-primitive-section-header">
|
|
<span className="hf-primitive-section-index">08</span>
|
|
<div>
|
|
<h2>Process sequences</h2>
|
|
<p>2 primitives</p>
|
|
</div>
|
|
</header>
|
|
<div className="hf-primitive-grid">
|
|
|
|
<a href="/primitives/pill-row-collapse" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="pill-row-collapse" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Pill Row Collapse</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>Five labeled pills build left to right, hold for reading, then pills two through five spread and clear while the first pill glides to center and becomes active.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/state-chip-rail" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="state-chip-rail" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">State Chip Rail</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>A row of status chips snaps through ordered states on scheduled cues while active, completed, and pending chips take distinct appearances.</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section className="hf-primitive-section">
|
|
<header className="hf-primitive-section-header">
|
|
<span className="hf-primitive-section-index">09</span>
|
|
<div>
|
|
<h2>Interaction</h2>
|
|
<p>1 primitive</p>
|
|
</div>
|
|
</header>
|
|
<div className="hf-primitive-grid">
|
|
|
|
<a href="/primitives/press-ripple" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="press-ripple" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Press Ripple</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>A cursor decelerates onto a positioned target, compresses with it, releases two ripple rings, and exits while the pressed state remains.</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section className="hf-primitive-section">
|
|
<header className="hf-primitive-section-header">
|
|
<span className="hf-primitive-section-index">10</span>
|
|
<div>
|
|
<h2>List assembly</h2>
|
|
<p>2 primitives</p>
|
|
</div>
|
|
</header>
|
|
<div className="hf-primitive-grid">
|
|
|
|
<a href="/primitives/rank-list-settle" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="rank-list-settle" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Rank List Settle</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>A ranked list rolls upward under a fixed focus line, washes out passing rows, and stops with the final winning row fully lit on that line.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/primitives/thread-message-stack" className="hf-primitive-card" data-orientation="landscape">
|
|
<PrimitivePlayer name="thread-message-stack" width={1920} height={1080} preview />
|
|
<div className="hf-primitive-card-body">
|
|
<div className="hf-primitive-card-heading">
|
|
<span className="hf-primitive-card-title">Thread Message Stack</span>
|
|
<span className="hf-primitive-card-aspect">16:9</span>
|
|
</div>
|
|
<p>Message bubbles land on the bottom line over a moving background, push older messages upward under a mask, and show a typing pill before each incoming message.</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|