Files
hyperframes/docs/qa-gallery.html
T

574 lines
57 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>96 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='[{&quot;name&quot;:&quot;cursor_variant&quot;,&quot;value&quot;:&quot;light&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;]},{&quot;name&quot;:&quot;target_x&quot;,&quot;value&quot;:55},{&quot;name&quot;:&quot;target_y&quot;,&quot;value&quot;:55},{&quot;name&quot;:&quot;click_label&quot;,&quot;value&quot;:&quot;Generate&quot;}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">oversized-cursor - Product demo - BUILT</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='[{&quot;name&quot;:&quot;gesture&quot;,&quot;value&quot;:&quot;tap&quot;,&quot;options&quot;:[&quot;tap&quot;,&quot;swipe&quot;]},{&quot;name&quot;:&quot;polarity&quot;,&quot;value&quot;:&quot;light&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;]},{&quot;name&quot;:&quot;targetX&quot;,&quot;value&quot;:50},{&quot;name&quot;:&quot;targetY&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;cursor_variant&quot;,&quot;value&quot;:&quot;light&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;]},{&quot;name&quot;:&quot;target_x&quot;,&quot;value&quot;:55},{&quot;name&quot;:&quot;target_y&quot;,&quot;value&quot;:55},{&quot;name&quot;:&quot;click_label&quot;,&quot;value&quot;:&quot;Generate&quot;}]' 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='[{&quot;name&quot;:&quot;tap_label&quot;,&quot;value&quot;:&quot;Follow&quot;},{&quot;name&quot;:&quot;response_label&quot;,&quot;value&quot;:&quot;Following&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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='[{&quot;name&quot;:&quot;card_count&quot;,&quot;value&quot;:4},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]},{&quot;name&quot;:&quot;card_label_prefix&quot;,&quot;value&quot;:&quot;Feature&quot;}]' 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='[{&quot;name&quot;:&quot;pullDistance&quot;,&quot;value&quot;:120},{&quot;name&quot;:&quot;spinnerStyle&quot;,&quot;value&quot;:&quot;ring&quot;,&quot;options&quot;:[&quot;arrow&quot;,&quot;dots&quot;,&quot;ring&quot;]}]' 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='[{&quot;name&quot;:&quot;direction&quot;,&quot;value&quot;:&quot;on&quot;,&quot;options&quot;:[&quot;on&quot;,&quot;off&quot;]},{&quot;name&quot;:&quot;label&quot;,&quot;value&quot;:&quot;Auto-save&quot;},{&quot;name&quot;:&quot;size&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;device&quot;,&quot;value&quot;:&quot;phone&quot;,&quot;options&quot;:[&quot;phone&quot;,&quot;tablet&quot;]},{&quot;name&quot;:&quot;cutout&quot;,&quot;value&quot;:&quot;none&quot;,&quot;options&quot;:[&quot;none&quot;,&quot;island&quot;,&quot;notch&quot;]},{&quot;name&quot;:&quot;body&quot;,&quot;value&quot;:&quot;graphite&quot;,&quot;options&quot;:[&quot;graphite&quot;,&quot;silver&quot;]}]' 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='[{&quot;name&quot;:&quot;scanColor&quot;,&quot;value&quot;:&quot;var(--brand)&quot;},{&quot;name&quot;:&quot;targetLabel&quot;,&quot;value&quot;:&quot;Verified&quot;},{&quot;name&quot;:&quot;sweepSpeed&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;tool&quot;,&quot;value&quot;:&quot;pen&quot;,&quot;options&quot;:[&quot;pen&quot;,&quot;shape&quot;,&quot;type&quot;]},{&quot;name&quot;:&quot;pathLabel&quot;,&quot;value&quot;:&quot;Logo&quot;}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">vector-editor-rig - Product demo - BUILT</div>
</article>
<article class="card" data-candidate="offset-path-traveler">
<div data-hf-player="true" data-src="/public/qa/offset-path-traveler.html" data-width="1920" data-height="1080" data-knobs='[{&quot;name&quot;:&quot;path&quot;,&quot;value&quot;:&quot;M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35&quot;},{&quot;name&quot;:&quot;traveler_label&quot;,&quot;value&quot;:&quot;Live preview&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">offset-path-traveler - Product demo - BUILT</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='[{&quot;name&quot;:&quot;focus&quot;,&quot;value&quot;:&quot;b&quot;,&quot;options&quot;:[&quot;a&quot;,&quot;b&quot;]},{&quot;name&quot;:&quot;blurPx&quot;,&quot;value&quot;:6},{&quot;name&quot;:&quot;dim&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;device&quot;,&quot;value&quot;:&quot;phone&quot;,&quot;options&quot;:[&quot;phone&quot;,&quot;tablet&quot;]},{&quot;name&quot;:&quot;cutout&quot;,&quot;value&quot;:&quot;none&quot;,&quot;options&quot;:[&quot;none&quot;,&quot;island&quot;,&quot;notch&quot;]},{&quot;name&quot;:&quot;body&quot;,&quot;value&quot;:&quot;graphite&quot;,&quot;options&quot;:[&quot;graphite&quot;,&quot;silver&quot;]}]' 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='[{&quot;name&quot;:&quot;captions&quot;,&quot;value&quot;:&quot;Instant previews,Zero config,Ship on Friday&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;violet&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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='[{&quot;name&quot;:&quot;pair&quot;,&quot;value&quot;:&quot;mic-check&quot;,&quot;options&quot;:[&quot;mic-check&quot;,&quot;play-check&quot;,&quot;lock-unlock&quot;]},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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='[{&quot;name&quot;:&quot;labels&quot;,&quot;value&quot;:&quot;Search,Preview,Export&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;cyan&quot;,&quot;options&quot;:[&quot;cyan&quot;,&quot;violet&quot;,&quot;amber&quot;]}]' 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='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;Ship it today&quot;},{&quot;name&quot;:&quot;accent_word_index&quot;,&quot;value&quot;:1},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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" data-knobs='[{&quot;name&quot;:&quot;prefix&quot;,&quot;value&quot;:&quot;Ship&quot;},{&quot;name&quot;:&quot;options&quot;,&quot;value&quot;:&quot;faster,smarter,together&quot;},{&quot;name&quot;:&quot;suffix&quot;,&quot;value&quot;:&quot;&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">kinetic-type-swap - Text effects - BUILT</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" data-knobs='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;WORDS IN MOTION&quot;},{&quot;name&quot;:&quot;split&quot;,&quot;value&quot;:&quot;word&quot;,&quot;options&quot;:[&quot;word&quot;,&quot;char&quot;]},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">per-word-rise - Text effects - BUILT</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='[{&quot;name&quot;:&quot;headline&quot;,&quot;value&quot;:&quot;Less, but better&quot;},{&quot;name&quot;:&quot;kicker&quot;,&quot;value&quot;:&quot;DESIGN PRINCIPLE&quot;}]' 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='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;Focus&quot;},{&quot;name&quot;:&quot;intensity&quot;,&quot;value&quot;:&quot;standard&quot;,&quot;options&quot;:[&quot;subtle&quot;,&quot;standard&quot;,&quot;bold&quot;]}]' 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='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;BOOM&quot;},{&quot;name&quot;:&quot;flashColor&quot;,&quot;value&quot;:&quot;accent&quot;,&quot;options&quot;:[&quot;accent&quot;,&quot;soft&quot;,&quot;bright&quot;]},{&quot;name&quot;:&quot;intensity&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;wordmark&quot;,&quot;value&quot;:&quot;HYPERFRAMES&quot;},{&quot;name&quot;:&quot;band_angle&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;IMPACT&quot;},{&quot;name&quot;:&quot;axis&quot;,&quot;value&quot;:&quot;wght&quot;,&quot;options&quot;:[&quot;wght&quot;,&quot;wdth&quot;]},{&quot;name&quot;:&quot;fromValue&quot;,&quot;value&quot;:200},{&quot;name&quot;:&quot;toValue&quot;,&quot;value&quot;:900}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">VariableAxisType - Text effects - BUILT</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='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;Effortless&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]},{&quot;name&quot;:&quot;sweep_at&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;Impact&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]},{&quot;name&quot;:&quot;spread&quot;,&quot;value&quot;:&quot;tight&quot;,&quot;options&quot;:[&quot;tight&quot;,&quot;wild&quot;]}]' 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='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;HYPERFRAMES&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]},{&quot;name&quot;:&quot;style&quot;,&quot;value&quot;:&quot;terminal&quot;,&quot;options&quot;:[&quot;terminal&quot;,&quot;clean&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">scramble-reveal - Text effects - BUILT</div>
</article>
</div>
</section>
<section>
<h2>Intros &amp; 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='[{&quot;name&quot;:&quot;options&quot;,&quot;value&quot;:&quot;faster,smarter,together,everywhere&quot;},{&quot;name&quot;:&quot;final_word&quot;,&quot;value&quot;:&quot;together&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">ticker-takeover - Intros &amp; 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 &amp; 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='[{&quot;name&quot;:&quot;overshoot&quot;,&quot;value&quot;:1.7},{&quot;name&quot;:&quot;fromScale&quot;,&quot;value&quot;:0.9},{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;New&quot;}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">spring-pop - Intros &amp; 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='[{&quot;name&quot;:&quot;device&quot;,&quot;value&quot;:&quot;phone&quot;,&quot;options&quot;:[&quot;phone&quot;,&quot;tablet&quot;]},{&quot;name&quot;:&quot;cutout&quot;,&quot;value&quot;:&quot;none&quot;,&quot;options&quot;:[&quot;none&quot;,&quot;island&quot;,&quot;notch&quot;]},{&quot;name&quot;:&quot;body&quot;,&quot;value&quot;:&quot;graphite&quot;,&quot;options&quot;:[&quot;graphite&quot;,&quot;silver&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">device-rise - Intros &amp; 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='[{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;blue&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]},{&quot;name&quot;:&quot;app_title&quot;,&quot;value&quot;:&quot;Dashboard&quot;}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">parallax-device-dive - Intros &amp; 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 &amp; 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='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;LAUNCH&quot;},{&quot;name&quot;:&quot;columns&quot;,&quot;value&quot;:12},{&quot;name&quot;:&quot;waveStagger&quot;,&quot;value&quot;:40}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">wordmark-tiles - Intros &amp; reveals - BUILT</div>
</article>
<article class="card" data-candidate="svg-stroke-trace">
<div data-hf-player="true" data-src="/public/qa/svg-stroke-trace.html" data-width="1920" data-height="1080" data-knobs='[{&quot;name&quot;:&quot;path&quot;,&quot;value&quot;:&quot;M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194&quot;},{&quot;name&quot;:&quot;stroke_width&quot;,&quot;value&quot;:12},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">svg-stroke-trace - Intros &amp; reveals - BUILT</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 &amp; 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='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;REVEAL&quot;},{&quot;name&quot;:&quot;revealProgress&quot;,&quot;value&quot;:100},{&quot;name&quot;:&quot;featherPx&quot;,&quot;value&quot;:24}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">SvgMaskReveal - Intros &amp; 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='[{&quot;name&quot;:&quot;label&quot;,&quot;value&quot;:&quot;The reveal&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]},{&quot;name&quot;:&quot;trail_width&quot;,&quot;value&quot;:&quot;narrow&quot;,&quot;options&quot;:[&quot;narrow&quot;,&quot;wide&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">ascii-trail-reveal - Intros &amp; 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='[{&quot;name&quot;:&quot;label&quot;,&quot;value&quot;:&quot;core&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]},{&quot;name&quot;:&quot;satellites&quot;,&quot;value&quot;:4}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">locked-nucleus-orbit - Intros &amp; reveals - BUILT</div>
</article>
<article class="card" data-candidate="whiteboard-ink">
<div data-hf-player="true" data-src="/public/qa/whiteboard-ink.html" data-width="1920" data-height="1080" data-knobs='[{&quot;name&quot;:&quot;sketch&quot;,&quot;value&quot;:&quot;bulb&quot;,&quot;options&quot;:[&quot;bulb&quot;,&quot;flow&quot;,&quot;rocket&quot;]},{&quot;name&quot;:&quot;caption&quot;,&quot;value&quot;:&quot;Draw the idea&quot;},{&quot;name&quot;:&quot;pen&quot;,&quot;value&quot;:&quot;show&quot;,&quot;options&quot;:[&quot;show&quot;,&quot;hide&quot;]},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">whiteboard-ink - Intros &amp; 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='[{&quot;name&quot;:&quot;count&quot;,&quot;value&quot;:16},{&quot;name&quot;:&quot;centerLabel&quot;,&quot;value&quot;:&quot;You&quot;},{&quot;name&quot;:&quot;intensity&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;count&quot;,&quot;value&quot;:7},{&quot;name&quot;:&quot;speed&quot;,&quot;value&quot;:1},{&quot;name&quot;:&quot;showBadges&quot;,&quot;value&quot;:&quot;yes&quot;,&quot;options&quot;:[&quot;yes&quot;,&quot;no&quot;]}]' 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='[{&quot;name&quot;:&quot;speed&quot;,&quot;value&quot;:&quot;doom&quot;,&quot;options&quot;:[&quot;doom&quot;,&quot;frantic&quot;]},{&quot;name&quot;:&quot;card_count&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;label&quot;,&quot;value&quot;:&quot;Retention&quot;},{&quot;name&quot;:&quot;start_value&quot;,&quot;value&quot;:82},{&quot;name&quot;:&quot;end_value&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;stationCount&quot;,&quot;value&quot;:4},{&quot;name&quot;:&quot;labels&quot;,&quot;value&quot;:&quot;Capture,Edit,Render,Share&quot;},{&quot;name&quot;:&quot;dwell&quot;,&quot;value&quot;: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 &amp; 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='[{&quot;name&quot;:&quot;rows&quot;,&quot;value&quot;:3},{&quot;name&quot;:&quot;cols&quot;,&quot;value&quot;:5},{&quot;name&quot;:&quot;stagger&quot;,&quot;value&quot;:45}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">logo-wall - Proof &amp; 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" data-knobs='[{&quot;name&quot;:&quot;start&quot;,&quot;value&quot;:0},{&quot;name&quot;:&quot;end&quot;,&quot;value&quot;:100},{&quot;name&quot;:&quot;prefix&quot;,&quot;value&quot;:&quot;&quot;},{&quot;name&quot;:&quot;suffix&quot;,&quot;value&quot;:&quot;%&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">count-up - Proof &amp; stats - BUILT</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 &amp; 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='[{&quot;name&quot;:&quot;avatarCount&quot;,&quot;value&quot;:10},{&quot;name&quot;:&quot;showLinks&quot;,&quot;value&quot;:&quot;yes&quot;,&quot;options&quot;:[&quot;yes&quot;,&quot;no&quot;]},{&quot;name&quot;:&quot;label&quot;,&quot;value&quot;:&quot;50k builders&quot;}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">avatar-cloud - Proof &amp; 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='[{&quot;name&quot;:&quot;quote&quot;,&quot;value&quot;:&quot;This changed how we ship.&quot;},{&quot;name&quot;:&quot;author&quot;,&quot;value&quot;:&quot;Ken Tanaka&quot;},{&quot;name&quot;:&quot;handle&quot;,&quot;value&quot;:&quot;@ken&quot;},{&quot;name&quot;:&quot;rating&quot;,&quot;value&quot;:5}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">testimonial-card - Proof &amp; 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='[{&quot;name&quot;:&quot;rating&quot;,&quot;value&quot;:4.8},{&quot;name&quot;:&quot;starCount&quot;,&quot;value&quot;:5},{&quot;name&quot;:&quot;showValue&quot;,&quot;value&quot;:&quot;yes&quot;,&quot;options&quot;:[&quot;yes&quot;,&quot;no&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">star-rating-fill - Proof &amp; 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='[{&quot;name&quot;:&quot;cursorCount&quot;,&quot;value&quot;:4},{&quot;name&quot;:&quot;labels&quot;,&quot;value&quot;:&quot;Ana,Ken,Wen,Mia&quot;}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">multiplayer-cursors - Proof &amp; 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='[{&quot;name&quot;:&quot;progress&quot;,&quot;value&quot;:100},{&quot;name&quot;:&quot;thickness&quot;,&quot;value&quot;:6},{&quot;name&quot;:&quot;radius&quot;,&quot;value&quot;:24}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">OutlineDraw - Proof &amp; 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='[{&quot;name&quot;:&quot;progress&quot;,&quot;value&quot;:100},{&quot;name&quot;:&quot;thickness&quot;,&quot;value&quot;:12},{&quot;name&quot;:&quot;label&quot;,&quot;value&quot;:&quot;100&quot;}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">ConicProgressRing - Proof &amp; 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='[{&quot;name&quot;:&quot;split&quot;,&quot;value&quot;:50},{&quot;name&quot;:&quot;orientation&quot;,&quot;value&quot;:&quot;horizontal&quot;,&quot;options&quot;:[&quot;horizontal&quot;,&quot;vertical&quot;]},{&quot;name&quot;:&quot;labelA&quot;,&quot;value&quot;:&quot;Before&quot;},{&quot;name&quot;:&quot;labelB&quot;,&quot;value&quot;:&quot;After&quot;}]' 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" data-knobs='[{&quot;name&quot;:&quot;hub_label&quot;,&quot;value&quot;:&quot;Product&quot;},{&quot;name&quot;:&quot;nodes&quot;,&quot;value&quot;:&quot;Capture,Compose,Render,Share&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">constellation-hub - Feature tour - BUILT</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='[{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;blue&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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='[{&quot;name&quot;:&quot;stationCount&quot;,&quot;value&quot;:4},{&quot;name&quot;:&quot;labels&quot;,&quot;value&quot;:&quot;Capture,Edit,Render,Share&quot;},{&quot;name&quot;:&quot;dwell&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;itemCount&quot;,&quot;value&quot;:6},{&quot;name&quot;:&quot;stagger&quot;,&quot;value&quot;:60},{&quot;name&quot;:&quot;direction&quot;,&quot;value&quot;:&quot;up&quot;,&quot;options&quot;:[&quot;up&quot;,&quot;down&quot;,&quot;left&quot;,&quot;right&quot;]}]' 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='[{&quot;name&quot;:&quot;hero_index&quot;,&quot;value&quot;:2},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]},{&quot;name&quot;:&quot;card_label_prefix&quot;,&quot;value&quot;:&quot;Shot&quot;}]' 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='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;Pro&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]},{&quot;name&quot;:&quot;sweep_angle&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]},{&quot;name&quot;:&quot;label_a&quot;,&quot;value&quot;:&quot;Start&quot;},{&quot;name&quot;:&quot;label_b&quot;,&quot;value&quot;:&quot;Done&quot;}]' 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='[{&quot;name&quot;:&quot;mode&quot;,&quot;value&quot;:&quot;toss&quot;,&quot;options&quot;:[&quot;toss&quot;,&quot;drop&quot;,&quot;slide&quot;]},{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;Later&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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='[{&quot;name&quot;:&quot;subject&quot;,&quot;value&quot;:&quot;cursor&quot;,&quot;options&quot;:[&quot;cursor&quot;,&quot;card&quot;,&quot;scene&quot;]},{&quot;name&quot;:&quot;direction&quot;,&quot;value&quot;:&quot;left&quot;,&quot;options&quot;:[&quot;left&quot;,&quot;right&quot;,&quot;up&quot;,&quot;down&quot;]},{&quot;name&quot;:&quot;cutFraction&quot;,&quot;value&quot;:0.33},{&quot;name&quot;:&quot;blurPx&quot;,&quot;value&quot;: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='[{&quot;name&quot;:&quot;beatCount&quot;,&quot;value&quot;:4},{&quot;name&quot;:&quot;interval&quot;,&quot;value&quot;:0.6},{&quot;name&quot;:&quot;labels&quot;,&quot;value&quot;:&quot;One,Two,Three,Four&quot;}]' 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='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;Meet the new editor&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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='[{&quot;name&quot;:&quot;direction&quot;,&quot;value&quot;:&quot;up&quot;,&quot;options&quot;:[&quot;up&quot;,&quot;left&quot;]},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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='[{&quot;name&quot;:&quot;action_line&quot;,&quot;value&quot;:&quot;Start building today&quot;},{&quot;name&quot;:&quot;button_label&quot;,&quot;value&quot;:&quot;Get HyperFrames&quot;},{&quot;name&quot;:&quot;microcopy&quot;,&quot;value&quot;:&quot;Free while in beta&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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='[{&quot;name&quot;:&quot;wordmark&quot;,&quot;value&quot;:&quot;HYPERFRAMES&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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='[{&quot;name&quot;:&quot;headline&quot;,&quot;value&quot;:&quot;Get the app&quot;},{&quot;name&quot;:&quot;showApple&quot;,&quot;value&quot;:&quot;yes&quot;,&quot;options&quot;:[&quot;yes&quot;,&quot;no&quot;]},{&quot;name&quot;:&quot;showGoogle&quot;,&quot;value&quot;:&quot;yes&quot;,&quot;options&quot;:[&quot;yes&quot;,&quot;no&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">store-badge-lockup - Call to action - BUILT</div>
</article>
<article class="card" data-candidate="cta-close">
<div data-hf-player="true" data-src="/public/qa/cta-close.html" data-width="1920" data-height="1080" data-knobs='[{&quot;name&quot;:&quot;action_line&quot;,&quot;value&quot;:&quot;Make it happen&quot;},{&quot;name&quot;:&quot;button_label&quot;,&quot;value&quot;:&quot;Start now&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
<div class="label">cta-close - 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='[{&quot;name&quot;:&quot;detail_text&quot;,&quot;value&quot;:&quot;+312%&quot;},{&quot;name&quot;:&quot;headline&quot;,&quot;value&quot;:&quot;Growth compounds&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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='[{&quot;name&quot;:&quot;label_a&quot;,&quot;value&quot;:&quot;Draft&quot;},{&quot;name&quot;:&quot;label_b&quot;,&quot;value&quot;:&quot;Published&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;blue&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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='[{&quot;name&quot;:&quot;text&quot;,&quot;value&quot;:&quot;Always alive&quot;},{&quot;name&quot;:&quot;intensity&quot;,&quot;value&quot;:&quot;standard&quot;,&quot;options&quot;:[&quot;whisper&quot;,&quot;standard&quot;]}]' 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='[{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]},{&quot;name&quot;:&quot;mood&quot;,&quot;value&quot;:&quot;deep&quot;,&quot;options&quot;:[&quot;deep&quot;,&quot;bright&quot;]}]' 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='[{&quot;name&quot;:&quot;density&quot;,&quot;value&quot;:&quot;fine&quot;,&quot;options&quot;:[&quot;fine&quot;,&quot;coarse&quot;]},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]}]' 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='[{&quot;name&quot;:&quot;beats&quot;,&quot;value&quot;:&quot;0.5,1.0,1.5,2.0,2.5,3.0,3.5&quot;},{&quot;name&quot;:&quot;accent&quot;,&quot;value&quot;:&quot;green&quot;,&quot;options&quot;:[&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]},{&quot;name&quot;:&quot;intensity&quot;,&quot;value&quot;:&quot;subtle&quot;,&quot;options&quot;:[&quot;subtle&quot;,&quot;club&quot;]}]' 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>