ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-01 19:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(examples): add 1:1 recreate-any-video comparison block

Browse Source 
Two reverse-engineering campaigns (THE OBLIST, Srinika x Mercury), each
showing the reference original beside its frame-matched HyperFrames replica.
Assets on the docs CDN; kept separate from the '100% HyperFrames' grid since
the reference films are the originals.
This commit is contained in:
ukimsanov
2026-08-04 23:42:39 -07:00
parent ddbd547fad
commit 98ae45e066
1 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples.mdx
+35
View File
@@ -114,6 +114,41 @@ A PR, a Figma file, a design brief — turned into a finished film.
</div>
## Recreate any video, 1:1
Point HyperFrames at a finished video and it rebuilds the same film in editable HTML —
gestures, type, timing and all. Below, each **reference** (the original, on the left) sits
next to its **HyperFrames replica** (on the right), matched frame for frame.
<div className="not-prose my-6 space-y-8">
<div>
<div className="mb-3 flex items-baseline justify-between"><strong className="text-sm">THE OBLIST</strong><span className="text-xs text-zinc-500 dark:text-zinc-400">38.58s · 60fps</span></div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-oblist-reference.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-oblist-reference.jpg" autoPlay muted loop playsInline preload="none" />
<div className="p-3"><span className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Reference — original film</span></div>
</div>
<div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-oblist-replica.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-oblist-replica.jpg" autoPlay muted loop playsInline preload="none" />
<div className="p-3"><span className="text-xs font-semibold uppercase tracking-wide text-zinc-700 dark:text-zinc-300">HyperFrames replica</span></div>
</div>
</div>
</div>
<div>
<div className="mb-3 flex items-baseline justify-between"><strong className="text-sm">Srinika × Mercury</strong><span className="text-xs text-zinc-500 dark:text-zinc-400">30.56s · 25fps · avatar footage</span></div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-srinika-reference.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-srinika-reference.jpg" autoPlay muted loop playsInline preload="none" />
<div className="p-3"><span className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Reference — original film</span></div>
</div>
<div className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
<video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-srinika-replica.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-srinika-replica.jpg" autoPlay muted loop playsInline preload="none" />
<div className="p-3"><span className="text-xs font-semibold uppercase tracking-wide text-zinc-700 dark:text-zinc-300">HyperFrames replica</span></div>
</div>
</div>
</div>
</div>
## Start from a template
Create a project with a working example: