mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
Miguel Angel Simon Sierra
bb912587b9
Adds the 25 video primitive compositions and their generated Mintlify pages. Each page embeds a live <hyperframes-player> preview with editable composition variables rather than a rendered MP4. Adds the catalog-browsing eval under evals/catalog-retrieval: a 424-entry shelf built from HEAD, nine retrieval conditions (no-catalog control, full read, lexical, semantic, and hybrid across several values of k), a brief generator that constructs each brief from a known target, a blind three-pass gold validation committee, and a mechanical scorer that keeps mountable and fit as two separate numbers. The eval vendors its own shelf, primitive sources, and preview list instead of reading them from an ignored working directory, so the shelf regenerates byte for byte from a clean checkout. Derived artifacts stay out: the embedding cache and the run checkpoints are regenerated rather than committed, so no run can score against a stale copy of either. Lint ignores now cover vendored minified player bundles by pattern instead of one path at a time.
789 lines
100 KiB
HTML
789 lines
100 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>139 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"},{"name":"exit","value":"none","options":["none","fade","up"]}]' 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='[{"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"},{"name":"exit","value":"none","options":["none","fade","up"]}]' 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="offset-path-traveler">
|
|
<div data-hf-player="true" data-src="/public/qa/offset-path-traveler.html" data-width="1920" data-height="1080" data-knobs='[{"name":"path","value":"M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35"},{"name":"traveler_label","value":"Live preview"},{"name":"accent","value":"green","options":["green","blue","violet"]}]' 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='[{"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="press-ripple">
|
|
<div data-hf-player="true" data-src="/public/qa/press-ripple.html" data-width="1920" data-height="1080" data-knobs='[{"name":"label","value":"Get started"},{"name":"target_x","value":50},{"name":"target_y","value":50},{"name":"press_at","value":1.4},{"name":"cursor","value":"light","options":["light","dark"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">press-ripple - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="typed-prompt">
|
|
<div data-hf-player="true" data-src="/public/qa/typed-prompt.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"Generate a product launch video"},{"name":"prompt_glyph","value":">"},{"name":"cadence","value":"human","options":["uniform","human"]},{"name":"caret","value":"blink","options":["blink","solid"]},{"name":"correction","value":""},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">typed-prompt - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="browser-device-stage">
|
|
<div data-hf-player="true" data-src="/public/qa/browser-device-stage.html" data-width="1920" data-height="1080" data-knobs='[{"name":"chrome","value":"browser","options":["browser","window","phone"]},{"name":"title","value":"app.example.com"},{"name":"swap_at","value":0},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">browser-device-stage - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="ui-focus-zoom">
|
|
<div data-hf-player="true" data-src="/public/qa/ui-focus-zoom.html" data-width="1920" data-height="1080" data-knobs='[{"name":"anchor_x","value":64},{"name":"anchor_y","value":36},{"name":"zoom","value":1.6},{"name":"zoom_at","value":1.4},{"name":"halo","value":"show","options":["show","hide"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">ui-focus-zoom - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="state-chip-rail">
|
|
<div data-hf-player="true" data-src="/public/qa/state-chip-rail.html" data-width="1920" data-height="1080" data-knobs='[{"name":"states","value":"Queued,Reading,Drafting,Done"},{"name":"times","value":""},{"name":"badge_state","value":1},{"name":"badges","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">state-chip-rail - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="code-terminal-run">
|
|
<div data-hf-player="true" data-src="/public/qa/code-terminal-run.html" data-width="1920" data-height="1080" data-knobs='[{"name":"prompt_glyph","value":"$"},{"name":"cadence","value":"human","options":["uniform","human"]},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">code-terminal-run - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="notification-stack">
|
|
<div data-hf-player="true" data-src="/public/qa/notification-stack.html" data-width="1920" data-height="1080" data-knobs='[{"name":"titles","value":"Build queued,Checks passed,Deploy live"},{"name":"bodies","value":"Pipeline started for main,All 42 checks green,Now serving version 2.4"},{"name":"expand","value":-1},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">notification-stack - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="telemetry-hud">
|
|
<div data-hf-player="true" data-src="/public/qa/telemetry-hud.html" data-width="1920" data-height="1080" data-knobs='[{"name":"readouts","value":"fps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB"},{"name":"emphasize","value":0},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">telemetry-hud - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="native-notification-pop">
|
|
<div data-hf-player="true" data-src="/public/qa/native-notification-pop.html" data-width="1920" data-height="1080" data-knobs='[{"name":"title","value":"Render complete"},{"name":"body","value":"launch-cut.mp4 is ready to preview"},{"name":"app_label","value":"HyperFrames"},{"name":"os","value":"ios","options":["ios","macos"]},{"name":"at","value":0.3},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">native-notification-pop - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="spring-stack-shuffle">
|
|
<div data-hf-player="true" data-src="/public/qa/spring-stack-shuffle.html" data-width="1920" data-height="1080" data-knobs='[{"name":"cards","value":4},{"name":"cues","value":"0.9, 1.7, 1.95"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">spring-stack-shuffle - 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>
|
|
|
|
<article class="card" data-candidate="cursor-glyph-trail">
|
|
<div data-hf-player="true" data-src="/public/qa/cursor-glyph-trail.html" data-width="1920" data-height="1080" data-knobs='[{"name":"glyphs","value":"░▒▓+·×"},{"name":"density","value":"med","options":["low","med","high"]},{"name":"path","value":"sweep","options":["sweep","arc","zigzag"]},{"name":"fade","value":0.8},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">cursor-glyph-trail - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="echo-trail">
|
|
<div data-hf-player="true" data-src="/public/qa/echo-trail.html" data-width="1920" data-height="1080" data-knobs='[{"name":"echoes","value":4},{"name":"delta","value":0.09},{"name":"path","value":"sweep","options":["sweep","rise","arc"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">echo-trail - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="soft-blob-touch">
|
|
<div data-hf-player="true" data-src="/public/qa/soft-blob-touch.html" data-width="1920" data-height="1080" data-knobs='[{"name":"touch_x","value":66},{"name":"touch_y","value":38},{"name":"touch_at","value":1.6},{"name":"grain","value":"fine","options":["fine","coarse"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">soft-blob-touch - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="segmentation-flood">
|
|
<div data-hf-player="true" data-src="/public/qa/segmentation-flood.html" data-width="1920" data-height="1080" data-knobs='[{"name":"regions","value":"Figure, Signal, Ground"},{"name":"flood_at","value":0.8},{"name":"flicker","value":"on","options":["on","off"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">segmentation-flood - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="modal-morph">
|
|
<div data-hf-player="true" data-src="/public/qa/modal-morph.html" data-width="1920" data-height="1080" data-knobs='[{"name":"from_scale","value":1},{"name":"expand_at","value":1.2},{"name":"register","value":"calm","options":["calm","snappy"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">modal-morph - Product demo - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="stop-motion-cadence">
|
|
<div data-hf-player="true" data-src="/public/qa/stop-motion-cadence.html" data-width="1920" data-height="1080" data-knobs='[{"name":"fps","value":"10","options":["8","10","12"]},{"name":"boil","value":"on","options":["on","off"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">stop-motion-cadence - 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" data-knobs='[{"name":"prefix","value":"Ship"},{"name":"options","value":"faster,smarter,together"},{"name":"suffix","value":""},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' 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='[{"name":"text","value":"WORDS IN MOTION"},{"name":"split","value":"word","options":["word","char"]},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' 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" data-knobs='[{"name":"text","value":"Ship it with confidence"},{"name":"emphasis_word","value":"confidence"},{"name":"style","value":"highlight","options":["highlight","circle","underline","scribble"]},{"name":"draw_at","value":0.9},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">marker-highlight - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="line-swap">
|
|
<div data-hf-player="true" data-src="/public/qa/line-swap.html" data-width="1920" data-height="1080" data-knobs='[{"name":"line_a","value":"Everyone promised you AI."},{"name":"line_b","value":"Almost nobody promised you control."},{"name":"swap_at","value":1.5},{"name":"underline_word","value":"control"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">line-swap - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="vox-annotate">
|
|
<div data-hf-player="true" data-src="/public/qa/vox-annotate.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"Ship the story, not the spec"},{"name":"keyword","value":"story"},{"name":"note","value":"the annotate beat"},{"name":"style","value":"highlight","options":["highlight","circle","underline","scribble"]},{"name":"draw_at","value":0.9},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">vox-annotate - Text effects - BUILT</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="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"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">scramble-reveal - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="variable-font-flex">
|
|
<div data-hf-player="true" data-src="/public/qa/variable-font-flex.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"FLEX"},{"name":"axis","value":"both","options":["weight","width","both"]},{"name":"stagger","value":0.06},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">variable-font-flex - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="stitched-text-draw">
|
|
<div data-hf-player="true" data-src="/public/qa/stitched-text-draw.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"STITCH"},{"name":"stitch","value":"fine","options":["fine","coarse"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">stitched-text-draw - Text effects - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="particle-text-dissolve">
|
|
<div data-hf-player="true" data-src="/public/qa/particle-text-dissolve.html" data-width="1920" data-height="1080" data-knobs='[{"name":"text","value":"Dissolve"},{"name":"direction","value":"in","options":["in","out"]},{"name":"density","value":"med","options":["low","med","high"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">particle-text-dissolve - Text effects - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Intros & reveals</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="titlecard-lockup">
|
|
<div data-hf-player="true" data-src="/public/qa/titlecard-lockup.html" data-width="1920" data-height="1080" data-knobs='[{"name":"wordmark","value":"HYPERFRAMES"},{"name":"label","value":"WRITE HTML. RENDER VIDEO."},{"name":"kicker","value":"INTRODUCING"},{"name":"rule","value":"show","options":["show","hide"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">titlecard-lockup - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="particle-image-reveal">
|
|
<div data-hf-player="true" data-src="/public/qa/particle-image-reveal.html" data-width="1920" data-height="1080" data-knobs='[{"name":"density","value":"med","options":["low","med","high"]},{"name":"direction","value":"ltr","options":["ltr","center"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">particle-image-reveal - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<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="svg-stroke-trace">
|
|
<div data-hf-player="true" data-src="/public/qa/svg-stroke-trace.html" data-width="1920" data-height="1080" data-knobs='[{"name":"path","value":"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"},{"name":"stroke_width","value":12},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">svg-stroke-trace - Intros & 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 & 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>
|
|
|
|
<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='[{"name":"sketch","value":"bulb","options":["bulb","flow","rocket"]},{"name":"caption","value":"Draw the idea"},{"name":"pen","value":"show","options":["show","hide"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">whiteboard-ink - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="facet-morph">
|
|
<div data-hf-player="true" data-src="/public/qa/facet-morph.html" data-width="1920" data-height="1080" data-knobs='[{"name":"forms","value":"blob,mark,badge"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">facet-morph - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="light-sweep-pass">
|
|
<div data-hf-player="true" data-src="/public/qa/light-sweep-pass.html" data-width="1920" data-height="1080" data-knobs='[{"name":"angle","value":115},{"name":"sweep_at","value":0.9},{"name":"strength","value":"standard","options":["subtle","standard"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">light-sweep-pass - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="ascii-render-pass">
|
|
<div data-hf-player="true" data-src="/public/qa/ascii-render-pass.html" data-width="1920" data-height="1080" data-knobs='[{"name":"charset","value":" .:-=+*#%@"},{"name":"grid","value":"med","options":["coarse","med","fine"]},{"name":"resolve_at","value":1.4},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">ascii-render-pass - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="slit-scan-reveal">
|
|
<div data-hf-player="true" data-src="/public/qa/slit-scan-reveal.html" data-width="1920" data-height="1080" data-knobs='[{"name":"axis","value":"rows","options":["rows","cols"]},{"name":"spread","value":0.45},{"name":"resolve_at","value":2.2},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">slit-scan-reveal - Intros & reveals - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="ink-bleed-reveal">
|
|
<div data-hf-player="true" data-src="/public/qa/ink-bleed-reveal.html" data-width="1920" data-height="1080" data-knobs='[{"name":"blobs","value":5},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">ink-bleed-reveal - Intros & reveals - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Problem setup</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="radial-surround">
|
|
<div data-hf-player="true" data-src="/public/qa/radial-surround.html" data-width="1920" data-height="1080" data-knobs='[{"name":"center_label","value":"Your team"},{"name":"chips","value":"Docs,Tickets,Dashboards,Inbox,Chat,Sheets"},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">radial-surround - Problem setup - BUILT</div>
|
|
</article>
|
|
|
|
<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},{"name":"cues","value":""},{"name":"exit","value":"none","options":["none","fade","up"]}]' 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="chart-story">
|
|
<div data-hf-player="true" data-src="/public/qa/chart-story.html" data-width="1920" data-height="1080" data-knobs='[{"name":"type","value":"bars","options":["bars","line","donut","progress"]},{"name":"data","value":"12, 28, 45, 64"},{"name":"labels","value":"Q1, Q2, Q3, Q4"},{"name":"emphasize","value":3},{"name":"unit","value":"%"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">chart-story - Proof & stats - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="trust-strip">
|
|
<div data-hf-player="true" data-src="/public/qa/trust-strip.html" data-width="1920" data-height="1080" data-knobs='[{"name":"marks","value":"Northwind, Acme Corp, Globex, Initech, Umbra"},{"name":"tone","value":"muted","options":["muted","ink"]},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">trust-strip - Proof & stats - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="testimonial-proof-card">
|
|
<div data-hf-player="true" data-src="/public/qa/testimonial-proof-card.html" data-width="1920" data-height="1080" data-knobs='[{"name":"quote","value":"We shipped our launch video in a single afternoon"},{"name":"name","value":"Maya Chen"},{"name":"role","value":"Head of Product"},{"name":"company","value":"NORTHWIND"},{"name":"emphasis","value":"single afternoon"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">testimonial-proof-card - Proof & stats - BUILT</div>
|
|
</article>
|
|
|
|
<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" data-knobs='[{"name":"start","value":0},{"name":"end","value":100},{"name":"prefix","value":""},{"name":"suffix","value":"%"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">count-up - Proof & 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 & 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="before-after-wipe">
|
|
<div data-hf-player="true" data-src="/public/qa/before-after-wipe.html" data-width="1920" data-height="1080" data-knobs='[{"name":"label_a","value":"Before"},{"name":"label_b","value":"After"},{"name":"rest_split","value":50},{"name":"wipe_at","value":0.25},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">before-after-wipe - Before / after - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="split-tilt-cards">
|
|
<div data-hf-player="true" data-src="/public/qa/split-tilt-cards.html" data-width="1920" data-height="1080" data-knobs='[{"name":"label_a","value":"Before"},{"name":"label_b","value":"After"},{"name":"badge_a","value":"v1"},{"name":"badge_b","value":"v2"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">split-tilt-cards - Before / after - BUILT</div>
|
|
</article>
|
|
|
|
<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" data-knobs='[{"name":"items","value":"Capture,Compose,Render,Publish"},{"name":"layout","value":"grid","options":["grid","list"]},{"name":"columns","value":0},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">grid-card-assemble - Feature tour - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="screen-flow-carousel">
|
|
<div data-hf-player="true" data-src="/public/qa/screen-flow-carousel.html" data-width="1920" data-height="1080" data-knobs='[{"name":"screens","value":3},{"name":"captions","value":""},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">screen-flow-carousel - Feature tour - BUILT</div>
|
|
</article>
|
|
|
|
<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" data-knobs='[{"name":"items","value":"Capture,Compose,Render,Publish"},{"name":"layout","value":"grid","options":["grid","list"]},{"name":"columns","value":0},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' 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='[{"name":"hub_label","value":"Product"},{"name":"nodes","value":"Capture,Compose,Render,Share"},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' 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='[{"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="morph-swap">
|
|
<div data-hf-player="true" data-src="/public/qa/morph-swap.html" data-width="1920" data-height="1080" data-knobs='[{"name":"swap_at","value":1.4},{"name":"register","value":"condense","options":["condense","reshape"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">morph-swap - Transitions - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="iris-reveal">
|
|
<div data-hf-player="true" data-src="/public/qa/iris-reveal.html" data-width="1920" data-height="1080" data-knobs='[{"name":"iris_x","value":50},{"name":"iris_y","value":50},{"name":"open_at","value":0.35},{"name":"register","value":"color","options":["color","plain"]},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">iris-reveal - Transitions - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="whip-pan-cut">
|
|
<div data-hf-player="true" data-src="/public/qa/whip-pan-cut.html" data-width="1920" data-height="1080" data-knobs='[{"name":"direction","value":"left","options":["left","right"]},{"name":"whip_at","value":0.25},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">whip-pan-cut - Transitions - BUILT</div>
|
|
</article>
|
|
|
|
<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},{"name":"exit","value":"none","options":["none","fade","up"]}]' 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>
|
|
|
|
<article class="card" data-candidate="halftone-dissolve">
|
|
<div data-hf-player="true" data-src="/public/qa/halftone-dissolve.html" data-width="1920" data-height="1080" data-knobs='[{"name":"dot_size","value":"medium","options":["small","medium","large"]},{"name":"direction","value":"ltr","options":["ltr","center","noise"]},{"name":"dissolve_at","value":1.1},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">halftone-dissolve - Transitions - BUILT</div>
|
|
</article>
|
|
|
|
<article class="card" data-candidate="ordered-dither-pass">
|
|
<div data-hf-player="true" data-src="/public/qa/ordered-dither-pass.html" data-width="1920" data-height="1080" data-knobs='[{"name":"matrix","value":"4","options":["2","4","8"]},{"name":"direction","value":"in","options":["in","out"]},{"name":"levels","value":2},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">ordered-dither-pass - Transitions - BUILT</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Call to action</h2>
|
|
<div class="grid">
|
|
<article class="card" data-candidate="logo-brand-close">
|
|
<div data-hf-player="true" data-src="/public/qa/logo-brand-close.html" data-width="1920" data-height="1080" data-knobs='[{"name":"wordmark","value":"HYPERFRAMES"},{"name":"tagline","value":"Write HTML. Render video."},{"name":"url","value":"hyperframes.heygen.com"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">logo-brand-close - Call to action - BUILT</div>
|
|
</article>
|
|
|
|
<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>
|
|
|
|
<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='[{"name":"action_line","value":"Make it happen"},{"name":"button_label","value":"Start now"},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' 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="scroll-camera-story">
|
|
<div data-hf-player="true" data-src="/public/qa/scroll-camera-story.html" data-width="1920" data-height="1080" data-knobs='[{"name":"sections","value":3},{"name":"travel","value":220},{"name":"cues","value":""},{"name":"accent","value":"green","options":["green","blue","violet"]},{"name":"exit","value":"none","options":["none","fade","up"]}]' style="aspect-ratio: 16/9; background: #0b0c0e;"></div>
|
|
<div class="label">scroll-camera-story - Camera moves - BUILT</div>
|
|
</article>
|
|
|
|
<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>
|