ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-02 12:08:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: rebuild the catalog generator, and show what background removal and HDR do

Browse Source 
**The catalog generator destroys hand-written documentation on every run.** It
does `rmSync(dir, { recursive: true })` on both catalog folders before
regenerating, so any section a human added to a generated page is deleted the
next time anyone runs it. There is now a carry-forward pass that reads those
sections off the existing pages first and re-emits any heading the template does
not own. Note this prevents future loss only — the earlier regeneration in this
stack already removed what was there, and it is recoverable from git if wanted.

It was also clobbering `docs.json`: rebuilding the Catalog tab dropped its icon
and unlinked `catalog/index.mdx` from the sidebar entirely.

And 27 of 36 component pages told the reader to "see the comment header in the
file" when no such header exists. The generator reads the file now and only says
it when true.

On presentation: 1,365 table rows across 168 pages became 0. `## Details` was a
table whose rows were "Type: Block" and the duration; `## Files` was three
columns where most items have exactly one file. Both are one sentence now. The
preview leads the page instead of sitting under title, description, tags, a
warning and a credit — four of which Mintlify already renders from frontmatter.

**Two guides that showed nothing now show the thing.** Background removal plays a
real cutout with the matte magnified at the hair edge and at a shoulder a plant
overlapped, because those are where matting fails. HDR is the honest one: you
cannot show HDR brightness on an SDR page, so it shows the `ffprobe` verdict and
a measured round-trip — 4000 nits authored, 4012 back out — and says on screen
for all 26 seconds that it is not simulating anything.

Both films were checked before publishing: no black or frozen stretches, and read
at the real 590px docs column width rather than full size. Nav after regeneration:
307 pages, 0 dangling, 0 redirect collisions.
This commit is contained in:
ukimsanov
2026-08-04 03:08:04 -07:00
parent 72d4016f5f
commit 2a7d9bd0ad
178 changed files with 5434 additions and 3009 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/catalog/blocks/nyc-paris-flight.mdx
+38 -23
View File
@@ -3,17 +3,34 @@ title: "NYC Paris Flight"
description: "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects."
---
`showcase` `travel` `map` `youtube` `sfx`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" autoPlay muted loop playsInline />
Created by [Stronkter](https://x.com/Stronkter).
## Install
## Source Prompt
```text
📷HyperFrames by HeyGen Make a six-second Apple-style font bold video of a plane going from New York to Paris. A map animation, and then it shows the plane going from New York to Paris. Make the fonts Apple-style bold and make the map actual realistic, actually realistic. Before it lands in Paris, do a doodle circle in red around Paris, and then it lands in the doodle circle, and the video basically cuts to a white screen at the end. Also add sound effects for everything as well. Every nice motion, every the plane for pop-ups, bubble, pop-up effect, everything you want.
```bash Terminal
npx hyperframes add nyc-paris-flight
```
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" autoPlay muted loop playsInline />
That writes `compositions/nyc-paris-flight.html`, plus 2 supporting files under `assets/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
```html index.html
<div
data-composition-id="nyc-paris-flight"
data-composition-src="compositions/nyc-paris-flight.html"
data-start="0"
data-duration="6"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
```
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
## Add it to a project
@@ -30,22 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add nyc-paris-flight
```
## Details
| Property | Value |
| --- | --- |
| Type | Block |
| Dimensions | 1920×1080 |
| Duration | 6s |
**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `nyc-paris-flight.html` | `compositions/nyc-paris-flight.html` | hyperframes:composition |
| `assets/map-nyc-paris.png` | `assets/map-nyc-paris.png` | hyperframes:asset |
| `assets/sfx-mix.wav` | `assets/sfx-mix.wav` | hyperframes:asset |
## Use it
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
@@ -61,3 +62,17 @@ Ask your agent to replace the example content, match the project style, and plac
- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)
{/* hf:generated-footer */}
Tagged `showcase` `travel` `map` `youtube` `sfx`.
Created by [Stronkter](https://x.com/Stronkter).
<Accordion title="The prompt this was built from">
```text
📷HyperFrames by HeyGen Make a six-second Apple-style font bold video of a plane going from New York to Paris. A map animation, and then it shows the plane going from New York to Paris. Make the fonts Apple-style bold and make the map actual realistic, actually realistic. Before it lands in Paris, do a doodle circle in red around Paris, and then it lands in the doodle circle, and the video basically cuts to a white screen at the end. Also add sound effects for everything as well. Every nice motion, every the plane for pop-ups, bubble, pop-up effect, everything you want.
```
</Accordion>