mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-14 13:27:13 +00:00
569 lines
54 KiB
HTML
569 lines
54 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Video primitive QA gallery</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; padding: 32px; background: #0a0a0b; color: #f2f2f4; font-family: system-ui, sans-serif; }
|
|
header { max-width: 1480px; margin: 0 auto 36px; }
|
|
h1 { margin: 0 0 8px; font-size: clamp(24px, 4vw, 42px); letter-spacing: -0.03em; }
|
|
header p { margin: 0; color: #8a8a92; }
|
|
section { max-width: 1480px; margin: 0 auto 40px; }
|
|
h2 { margin: 0 0 14px; color: #e5484d; font: 600 14px ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
|
|
.card { overflow: hidden; background: #141416; border: 1px solid #26262b; border-radius: 10px; }
|
|
.label { min-height: 46px; padding: 10px 12px; border-top: 1px solid #26262b; color: #8a8a92; font: 12px/1.45 ui-monospace, monospace; }
|
|
.empty { display: grid; aspect-ratio: 16/9; place-items: center; background: #101012; color: #8a8a92; }
|
|
.empty span { padding: 8px 12px; border: 1px dashed #26262b; border-radius: 999px; }
|
|
.placeholder { border-style: dashed; }
|
|
@media (max-width: 520px) { body { padding: 20px; } .grid { grid-template-columns: 1fr; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Video primitive QA gallery</h1>
|
|
<p>95 candidate cards, organized into groups. Scrub live previews and adjust available variables.</p>
|
|
</header>
|
|
<section>
|
|
<h2>Product demo</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="oversized-cursor">
|
|
<div data-hf-player="true" data-src="/public/qa/oversized-cursor.html" data-width="1920" data-height="1080" data-knobs='[{"name":"cursor_variant","value":"light","options":["light","dark"]},{"name":"target_x","value":55},{"name":"target_y","value":55},{"name":"click_label","value":"Generate"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">oversized-cursor - Product demo - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="touch-indicator">
|
|
<div data-hf-player="true" data-src="/public/qa/touch-indicator.html" data-width="1920" data-height="1080" data-knobs='[{"name":"gesture","value":"tap","options":["tap","swipe"]},{"name":"polarity","value":"light","options":["light","dark"]},{"name":"targetX","value":50},{"name":"targetY","value":55}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">touch-indicator - Product demo - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="cursor-click-control">
|
|
<div data-hf-player="true" data-src="/public/qa/cursor-click-control.html" data-width="1920" data-height="1080" data-knobs='[{"name":"cursor_variant","value":"light","options":["light","dark"]},{"name":"target_x","value":55},{"name":"target_y","value":55},{"name":"click_label","value":"Generate"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">cursor-click-control - Product demo - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="gesture-tap">
|
|
<div data-hf-player="true" data-src="/public/qa/gesture-tap.html" data-width="1920" data-height="1080" data-knobs='[{"name":"tap_label","value":"Follow"},{"name":"response_label","value":"Following"},{"name":"accent","value":"green","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">gesture-tap - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="swipe-rail">
|
|
<div data-hf-player="true" data-src="/public/qa/swipe-rail.html" data-width="1920" data-height="1080" data-knobs='[{"name":"card_count","value":4},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"card_label_prefix","value":"Feature"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">swipe-rail - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="pull-to-refresh">
|
|
<div data-hf-player="true" data-src="/public/qa/pull-to-refresh.html" data-width="1920" data-height="1080" data-knobs='[{"name":"pullDistance","value":120},{"name":"spinnerStyle","value":"ring","options":["arrow","dots","ring"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">pull-to-refresh - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="toggle-flip">
|
|
<div data-hf-player="true" data-src="/public/qa/toggle-flip.html" data-width="1920" data-height="1080" data-knobs='[{"name":"direction","value":"on","options":["on","off"]},{"name":"label","value":"Auto-save"},{"name":"size","value":40}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">toggle-flip - Product demo - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="terminal-run">
|
|
<div data-hf-player="true" data-src="/public/qa/terminal-run.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">terminal-run - Product demo - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="device-frame-stage">
|
|
<div data-hf-player="true" data-src="/public/qa/device-frame-stage.html" data-width="1920" data-height="1080" data-knobs='[{"name":"device","value":"phone","options":["phone","tablet"]},{"name":"cutout","value":"none","options":["none","island","notch"]},{"name":"body","value":"graphite","options":["graphite","silver"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">device-frame-stage - Product demo - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="code-diff-pane">
|
|
<div data-hf-player="true" data-src="/public/qa/code-diff-pane.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">code-diff-pane - Product demo - PARTIAL - differs: no optional inline-comment callout; it is also a standalone block that needs contract adaptation.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="camera-scan-gate">
|
|
<div data-hf-player="true" data-src="/public/qa/camera-scan-gate.html" data-width="1920" data-height="1080" data-knobs='[{"name":"scanColor","value":"var(--brand)"},{"name":"targetLabel","value":"Verified"},{"name":"sweepSpeed","value":1}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">camera-scan-gate - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="vector-editor-rig">
|
|
<div data-hf-player="true" data-src="/public/qa/vector-editor-rig.html" data-width="1920" data-height="1080" data-knobs='[{"name":"tool","value":"pen","options":["pen","shape","type"]},{"name":"pathLabel","value":"Logo"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">vector-editor-rig - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="OffsetPathTraveler">
|
|
<div data-hf-player="true" data-src="/public/qa/OffsetPathTraveler.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">OffsetPathTraveler - Product demo - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="focus-swap">
|
|
<div data-hf-player="true" data-src="/public/qa/focus-swap.html" data-width="1920" data-height="1080" data-knobs='[{"name":"focus","value":"b","options":["a","b"]},{"name":"blurPx","value":6},{"name":"dim","value":0.5}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">focus-swap - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="device-idle-float">
|
|
<div data-hf-player="true" data-src="/public/qa/device-idle-float.html" data-width="1920" data-height="1080" data-knobs='[{"name":"device","value":"phone","options":["phone","tablet"]},{"name":"cutout","value":"none","options":["none","island","notch"]},{"name":"body","value":"graphite","options":["graphite","silver"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">device-idle-float - Product demo - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="sticky-mock-swap">
|
|
<div data-hf-player="true" data-src="/public/qa/sticky-mock-swap.html" data-width="1920" data-height="1080" data-knobs='[{"name":"captions","value":"Instant previews,Zero config,Ship on Friday"},{"name":"accent","value":"violet","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">sticky-mock-swap - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="icon-morph-beat">
|
|
<div data-hf-player="true" data-src="/public/qa/icon-morph-beat.html" data-width="1920" data-height="1080" data-knobs='[{"name":"pair","value":"mic-check","options":["mic-check","play-check","lock-unlock"]},{"name":"accent","value":"green","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">icon-morph-beat - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="tracing-beam">
|
|
<div data-hf-player="true" data-src="/public/qa/tracing-beam.html" data-width="1920" data-height="1080" data-knobs='[{"name":"labels","value":"Search,Preview,Export"},{"name":"accent","value":"cyan","options":["cyan","violet","amber"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">tracing-beam - Product demo - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Text effects</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="headline-slam">
|
|
<div data-hf-player="true" data-src="/public/qa/headline-slam.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"Ship it today"},{"name":"accent_word_index","value":1},{"name":"accent","value":"green","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">headline-slam - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="kinetic-type-swap">
|
|
<div data-hf-player="true" data-src="/public/qa/kinetic-type-swap.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">kinetic-type-swap - Text effects - PARTIAL - differs: owns the whole display and does not preserve a fixed surrounding phrase.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="typewriter-line">
|
|
<div data-hf-player="true" data-src="/public/qa/typewriter-line.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">typewriter-line - Text effects - PARTIAL - differs: its uniform steps(28) timing has no punctuation-aware cadence.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="per-word-rise">
|
|
<div data-hf-player="true" data-src="/public/qa/per-word-rise.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">per-word-rise - Text effects - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="marker-highlight">
|
|
<div data-hf-player="true" data-src="/public/qa/marker-highlight.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">marker-highlight - Text effects - PARTIAL - differs: animates a clean rectangular highlight block behind text; it lacks a hand-drawn under/through stroke and imperfect ink geometry.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="titlecard-calm">
|
|
<div data-hf-player="true" data-src="/public/qa/titlecard-calm.html" data-width="1920" data-height="1080" data-knobs='[{"name":"headline","value":"Less, but better"},{"name":"kicker","value":"DESIGN PRINCIPLE"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">titlecard-calm - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="push-in">
|
|
<div data-hf-player="true" data-src="/public/qa/push-in.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"Focus"},{"name":"intensity","value":"standard","options":["subtle","standard","bold"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">push-in - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="beat-accent">
|
|
<div data-hf-player="true" data-src="/public/qa/beat-accent.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"BOOM"},{"name":"flashColor","value":"accent","options":["accent","soft","bright"]},{"name":"intensity","value":1}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">beat-accent - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="scan-band">
|
|
<div data-hf-player="true" data-src="/public/qa/scan-band.html" data-width="1920" data-height="1080" data-knobs='[{"name":"wordmark","value":"HYPERFRAMES"},{"name":"band_angle","value":12}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">scan-band - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="VariableAxisType">
|
|
<div data-hf-player="true" data-src="/public/qa/VariableAxisType.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"IMPACT"},{"name":"axis","value":"wght","options":["wght","wdth"]},{"name":"fromValue","value":200},{"name":"toValue","value":900}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">VariableAxisType - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="SplitTypeReveal">
|
|
<div data-hf-player="true" data-src="/public/qa/SplitTypeReveal.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">SplitTypeReveal - Text effects - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="text-shimmer">
|
|
<div data-hf-player="true" data-src="/public/qa/text-shimmer.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"Effortless"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"sweep_at","value":1.2}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">text-shimmer - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="char-slam-explode">
|
|
<div data-hf-player="true" data-src="/public/qa/char-slam-explode.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"Impact"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"spread","value":"tight","options":["tight","wild"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">char-slam-explode - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="scramble-reveal">
|
|
<div data-hf-player="true" data-src="/public/qa/scramble-reveal.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"HYPERFRAMES"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"style","value":"terminal","options":["terminal","clean"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">scramble-reveal - Text effects - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Intros & reveals</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="ticker-takeover">
|
|
<div data-hf-player="true" data-src="/public/qa/ticker-takeover.html" data-width="1920" data-height="1080" data-knobs='[{"name":"options","value":"faster,smarter,together,everywhere"},{"name":"final_word","value":"together"},{"name":"accent","value":"green","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">ticker-takeover - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="mask-reveal">
|
|
<div data-hf-player="true" data-src="/public/qa/mask-reveal.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">mask-reveal - Intros & reveals - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="spring-pop">
|
|
<div data-hf-player="true" data-src="/public/qa/spring-pop.html" data-width="1920" data-height="1080" data-knobs='[{"name":"overshoot","value":1.7},{"name":"fromScale","value":0.9},{"name":"text","value":"New"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">spring-pop - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="device-rise">
|
|
<div data-hf-player="true" data-src="/public/qa/device-rise.html" data-width="1920" data-height="1080" data-knobs='[{"name":"device","value":"phone","options":["phone","tablet"]},{"name":"cutout","value":"none","options":["none","island","notch"]},{"name":"body","value":"graphite","options":["graphite","silver"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">device-rise - Intros & reveals - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="parallax-device-dive">
|
|
<div data-hf-player="true" data-src="/public/qa/parallax-device-dive.html" data-width="1920" data-height="1080" data-knobs='[{"name":"accent","value":"blue","options":["green","blue","violet"]},{"name":"app_title","value":"Dashboard"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">parallax-device-dive - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="logo-assemble">
|
|
<div data-hf-player="true" data-src="/public/qa/logo-assemble.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">logo-assemble - Intros & reveals - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="wordmark-tiles">
|
|
<div data-hf-player="true" data-src="/public/qa/wordmark-tiles.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"LAUNCH"},{"name":"columns","value":12},{"name":"waveStagger","value":40}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">wordmark-tiles - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="SvgStrokeTrace">
|
|
<div data-hf-player="true" data-src="/public/qa/SvgStrokeTrace.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">SvgStrokeTrace - Intros & reveals - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="GradientMaskReveal">
|
|
<div data-hf-player="true" data-src="/public/qa/GradientMaskReveal.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">GradientMaskReveal - Intros & reveals - PARTIAL - differs: and components/caption-clip-wipe/ perform directional hard clip-path wipes; neither implements a soft gradient mask edge.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="SvgMaskReveal">
|
|
<div data-hf-player="true" data-src="/public/qa/SvgMaskReveal.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"REVEAL"},{"name":"revealProgress","value":100},{"name":"featherPx","value":24}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">SvgMaskReveal - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="ascii-trail-reveal">
|
|
<div data-hf-player="true" data-src="/public/qa/ascii-trail-reveal.html" data-width="1920" data-height="1080" data-knobs='[{"name":"label","value":"The reveal"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"trail_width","value":"narrow","options":["narrow","wide"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">ascii-trail-reveal - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="locked-nucleus-orbit">
|
|
<div data-hf-player="true" data-src="/public/qa/locked-nucleus-orbit.html" data-width="1920" data-height="1080" data-knobs='[{"name":"label","value":"core"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"satellites","value":4}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">locked-nucleus-orbit - Intros & reveals - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Problem setup</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="overwhelm-surround">
|
|
<div data-hf-player="true" data-src="/public/qa/overwhelm-surround.html" data-width="1920" data-height="1080" data-knobs='[{"name":"count","value":16},{"name":"centerLabel","value":"You"},{"name":"intensity","value":1}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">overwhelm-surround - Problem setup - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="notification-pileup">
|
|
<div data-hf-player="true" data-src="/public/qa/notification-pileup.html" data-width="1920" data-height="1080" data-knobs='[{"name":"count","value":7},{"name":"speed","value":1},{"name":"showBadges","value":"yes","options":["yes","no"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">notification-pileup - Problem setup - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="scroll-feed">
|
|
<div data-hf-player="true" data-src="/public/qa/scroll-feed.html" data-width="1920" data-height="1080" data-knobs='[{"name":"speed","value":"doom","options":["doom","frantic"]},{"name":"card_count","value":6}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">scroll-feed - Problem setup - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="decline-chart">
|
|
<div data-hf-player="true" data-src="/public/qa/decline-chart.html" data-width="1920" data-height="1080" data-knobs='[{"name":"label","value":"Retention"},{"name":"start_value","value":82},{"name":"end_value","value":34}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">decline-chart - Problem setup - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="pan-stations">
|
|
<div data-hf-player="true" data-src="/public/qa/pan-stations.html" data-width="1920" data-height="1080" data-knobs='[{"name":"stationCount","value":4},{"name":"labels","value":"Capture,Edit,Render,Share"},{"name":"dwell","value":0.6}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">pan-stations - Problem setup - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Proof & stats</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="logo-wall">
|
|
<div data-hf-player="true" data-src="/public/qa/logo-wall.html" data-width="1920" data-height="1080" data-knobs='[{"name":"rows","value":3},{"name":"cols","value":5},{"name":"stagger","value":45}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">logo-wall - Proof & stats - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="count-up">
|
|
<div data-hf-player="true" data-src="/public/qa/count-up.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">count-up - Proof & stats - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="social-post-card">
|
|
<div data-hf-player="true" data-src="/public/qa/social-post-card.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">social-post-card - Proof & stats - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="avatar-cloud">
|
|
<div data-hf-player="true" data-src="/public/qa/avatar-cloud.html" data-width="1920" data-height="1080" data-knobs='[{"name":"avatarCount","value":10},{"name":"showLinks","value":"yes","options":["yes","no"]},{"name":"label","value":"50k builders"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">avatar-cloud - Proof & stats - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="testimonial-card">
|
|
<div data-hf-player="true" data-src="/public/qa/testimonial-card.html" data-width="1920" data-height="1080" data-knobs='[{"name":"quote","value":"This changed how we ship."},{"name":"author","value":"Ken Tanaka"},{"name":"handle","value":"@ken"},{"name":"rating","value":5}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">testimonial-card - Proof & stats - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="star-rating-fill">
|
|
<div data-hf-player="true" data-src="/public/qa/star-rating-fill.html" data-width="1920" data-height="1080" data-knobs='[{"name":"rating","value":4.8},{"name":"starCount","value":5},{"name":"showValue","value":"yes","options":["yes","no"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">star-rating-fill - Proof & stats - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="multiplayer-cursors">
|
|
<div data-hf-player="true" data-src="/public/qa/multiplayer-cursors.html" data-width="1920" data-height="1080" data-knobs='[{"name":"cursorCount","value":4},{"name":"labels","value":"Ana,Ken,Wen,Mia"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">multiplayer-cursors - Proof & stats - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="OutlineDraw">
|
|
<div data-hf-player="true" data-src="/public/qa/OutlineDraw.html" data-width="1920" data-height="1080" data-knobs='[{"name":"progress","value":100},{"name":"thickness","value":6},{"name":"radius","value":24}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">OutlineDraw - Proof & stats - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="ConicProgressRing">
|
|
<div data-hf-player="true" data-src="/public/qa/ConicProgressRing.html" data-width="1920" data-height="1080" data-knobs='[{"name":"progress","value":100},{"name":"thickness","value":12},{"name":"label","value":"100"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">ConicProgressRing - Proof & stats - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Before / after</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="comparison-split">
|
|
<div data-hf-player="true" data-src="/public/qa/comparison-split.html" data-width="1920" data-height="1080" data-knobs='[{"name":"split","value":50},{"name":"orientation","value":"horizontal","options":["horizontal","vertical"]},{"name":"labelA","value":"Before"},{"name":"labelB","value":"After"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">comparison-split - Before / after - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="benchmark-chart">
|
|
<div data-hf-player="true" data-src="/public/qa/benchmark-chart.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">benchmark-chart - Before / after - PARTIAL - differs: neither sequences competitor-first growth, an overtake, or the pass-point accent pulse.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="CompositeAperture">
|
|
<div data-hf-player="true" data-src="/public/qa/CompositeAperture.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">CompositeAperture - Before / after - PARTIAL - differs: is not a movable subtractive aperture over coexisting treated/original layers.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="FlipStage3D">
|
|
<div data-hf-player="true" data-src="/public/qa/FlipStage3D.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">FlipStage3D - Before / after - EXISTS</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Feature tour</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="grid-card-assemble">
|
|
<div data-hf-player="true" data-src="/public/qa/grid-card-assemble.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">grid-card-assemble - Feature tour - PARTIAL - differs: ships anonymous cells rather than feature cards and uses a one-way power2.out landing without a settle.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="constellation-hub">
|
|
<div data-hf-player="true" data-src="/public/qa/constellation-hub.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">constellation-hub - Feature tour - PARTIAL - differs: its paths are static rather than drawn connectors and nodes do not brighten in narration order. ecosystem-constellation metadata is not backed by matching HTML.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="multi-device-splay">
|
|
<div data-hf-player="true" data-src="/public/qa/multi-device-splay.html" data-width="1920" data-height="1080" data-knobs='[{"name":"accent","value":"blue","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">multi-device-splay - Feature tour - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="pan-stations">
|
|
<div data-hf-player="true" data-src="/public/qa/pan-stations.html" data-width="1920" data-height="1080" data-knobs='[{"name":"stationCount","value":4},{"name":"labels","value":"Capture,Edit,Render,Share"},{"name":"dwell","value":0.6}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">pan-stations - Feature tour - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="card-field-drift">
|
|
<div data-hf-player="true" data-src="/public/qa/card-field-drift.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">card-field-drift - Feature tour - PARTIAL - differs: uses Three.js/WebGL and only three orbiting cards rather than a CSS perspective field.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="ProceduralField">
|
|
<div data-hf-player="true" data-src="/public/qa/ProceduralField.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">ProceduralField - Feature tour - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="stagger-cascade">
|
|
<div data-hf-player="true" data-src="/public/qa/stagger-cascade.html" data-width="1920" data-height="1080" data-knobs='[{"name":"itemCount","value":6},{"name":"stagger","value":60},{"name":"direction","value":"up","options":["up","down","left","right"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">stagger-cascade - Feature tour - PARTIAL - differs: its shipped grid delay is 18ms from center rather than the specified fixed 30-80ms cascade.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="velocity-throw-snap">
|
|
<div data-hf-player="true" data-src="/public/qa/velocity-throw-snap.html" data-width="1920" data-height="1080" data-knobs='[{"name":"hero_index","value":2},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"card_label_prefix","value":"Shot"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">velocity-throw-snap - Feature tour - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Celebrations</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="confetti-burst">
|
|
<div data-hf-player="true" data-src="/public/qa/confetti-burst.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">confetti-burst - Celebrations - PARTIAL - differs: the primitive HTML only sends them outward/upward; it has no gravity/drag fall phase and hard-codes colors.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="success-check">
|
|
<div data-hf-player="true" data-src="/public/qa/success-check.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">success-check - Celebrations - PARTIAL - differs: has no outward radial pulse.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="badge-pop">
|
|
<div data-hf-player="true" data-src="/public/qa/badge-pop.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">badge-pop - Celebrations - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="gloss-sweep">
|
|
<div data-hf-player="true" data-src="/public/qa/gloss-sweep.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"Pro"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"sweep_angle","value":25}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">gloss-sweep - Celebrations - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Transitions</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="crash-shove">
|
|
<div data-hf-player="true" data-src="/public/qa/crash-shove.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">crash-shove - Transitions - PARTIAL - differs: use clean translation/clip motion with no reactive impact displacement.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="match-cut">
|
|
<div data-hf-player="true" data-src="/public/qa/match-cut.html" data-width="1920" data-height="1080" data-knobs='[{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"label_a","value":"Start"},{"name":"label_b","value":"Done"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">match-cut - Transitions - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="shader-wipe">
|
|
<div data-hf-player="true" data-src="/public/qa/shader-wipe.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">shader-wipe - Transitions - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="whip-pan">
|
|
<div data-hf-player="true" data-src="/public/qa/whip-pan.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">whip-pan - Transitions - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="physical-exit">
|
|
<div data-hf-player="true" data-src="/public/qa/physical-exit.html" data-width="1920" data-height="1080" data-knobs='[{"name":"mode","value":"toss","options":["toss","drop","slide"]},{"name":"text","value":"Later"},{"name":"accent","value":"green","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">physical-exit - Transitions - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="DeterministicDissolve">
|
|
<div data-hf-player="true" data-src="/public/qa/DeterministicDissolve.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">DeterministicDissolve - Transitions - PARTIAL - differs: is GPU fractal domain-warping rather than fixed-seed SVG noise thresholding.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="cut-the-curve">
|
|
<div data-hf-player="true" data-src="/public/qa/cut-the-curve.html" data-width="1920" data-height="1080" data-knobs='[{"name":"subject","value":"cursor","options":["cursor","card","scene"]},{"name":"direction","value":"left","options":["left","right","up","down"]},{"name":"cutFraction","value":0.33},{"name":"blurPx","value":12}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">cut-the-curve - Transitions - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="crossfade-swap">
|
|
<div data-hf-player="true" data-src="/public/qa/crossfade-swap.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">crossfade-swap - Transitions - EXISTS</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="beat-timeline">
|
|
<div data-hf-player="true" data-src="/public/qa/beat-timeline.html" data-width="1920" data-height="1080" data-knobs='[{"name":"beatCount","value":4},{"name":"interval","value":0.6},{"name":"labels","value":"One,Two,Three,Four"}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">beat-timeline - Transitions - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="type-match-cut">
|
|
<div data-hf-player="true" data-src="/public/qa/type-match-cut.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"Meet the new editor"},{"name":"accent","value":"green","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">type-match-cut - Transitions - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="rubber-band-bumper">
|
|
<div data-hf-player="true" data-src="/public/qa/rubber-band-bumper.html" data-width="1920" data-height="1080" data-knobs='[{"name":"direction","value":"up","options":["up","left"]},{"name":"accent","value":"green","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">rubber-band-bumper - Transitions - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Call to action</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="cta-lockup">
|
|
<div data-hf-player="true" data-src="/public/qa/cta-lockup.html" data-width="1920" data-height="1080" data-knobs='[{"name":"action_line","value":"Start building today"},{"name":"button_label","value":"Get HyperFrames"},{"name":"microcopy","value":"Free while in beta"},{"name":"accent","value":"green","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">cta-lockup - Call to action - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="url-rail">
|
|
<div data-hf-player="true" data-src="/public/qa/url-rail.html" data-width="1920" data-height="1080" style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">url-rail - Call to action - PARTIAL - differs: types arbitrary text with a caret, while blocks/logo-outro/ holds a URL pill; no single implementation types a URL on a quiet rail and holds it.</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="logo-sting">
|
|
<div data-hf-player="true" data-src="/public/qa/logo-sting.html" data-width="1920" data-height="1080" data-knobs='[{"name":"wordmark","value":"HYPERFRAMES"},{"name":"accent","value":"green","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">logo-sting - Call to action - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="store-badge-lockup">
|
|
<div data-hf-player="true" data-src="/public/qa/store-badge-lockup.html" data-width="1920" data-height="1080" data-knobs='[{"name":"headline","value":"Get the app"},{"name":"showApple","value":"yes","options":["yes","no"]},{"name":"showGoogle","value":"yes","options":["yes","no"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">store-badge-lockup - Call to action - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Camera moves</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="pull-back-reveal">
|
|
<div data-hf-player="true" data-src="/public/qa/pull-back-reveal.html" data-width="1920" data-height="1080" data-knobs='[{"name":"detail_text","value":"+312%"},{"name":"headline","value":"Growth compounds"},{"name":"accent","value":"green","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">pull-back-reveal - Camera moves - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="focus-rack">
|
|
<div data-hf-player="true" data-src="/public/qa/focus-rack.html" data-width="1920" data-height="1080" data-knobs='[{"name":"label_a","value":"Draft"},{"name":"label_b","value":"Published"},{"name":"accent","value":"blue","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">focus-rack - Camera moves - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="drift-hold">
|
|
<div data-hf-player="true" data-src="/public/qa/drift-hold.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"Always alive"},{"name":"intensity","value":"standard","options":["whisper","standard"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">drift-hold - Camera moves - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Backgrounds</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="aurora-drift">
|
|
<div data-hf-player="true" data-src="/public/qa/aurora-drift.html" data-width="1920" data-height="1080" data-knobs='[{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"mood","value":"deep","options":["deep","bright"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">aurora-drift - Backgrounds - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="grain-field">
|
|
<div data-hf-player="true" data-src="/public/qa/grain-field.html" data-width="1920" data-height="1080" data-knobs='[{"name":"density","value":"fine","options":["fine","coarse"]},{"name":"accent","value":"green","options":["green","blue","violet"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">grain-field - Backgrounds - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="beat-pulse-background">
|
|
<div data-hf-player="true" data-src="/public/qa/beat-pulse-background.html" data-width="1920" data-height="1080" data-knobs='[{"name":"beats","value":"0.5,1.0,1.5,2.0,2.5,3.0,3.5"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"intensity","value":"subtle","options":["subtle","club"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">beat-pulse-background - Backgrounds - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
<script src="/hyperframes-player.global.js"></script>
|
|
<script src="/hyperframes-player-embed.js"></script>
|
|
<script src="/qa-autoplay.js"></script>
|
|
<script src="/qa-rate.js"></script>
|
|
</body>
|
|
</html>
|