fix(scripts): drop the catalog poster instead of guarding it, and cut the encode pass down

**The poster guard I added twice was unworkable and I never ran it.** It called
existsSync on docs/images/catalog/<name>.png. That directory is gitignored —
previews are generated locally, uploaded to the CDN and never committed — so the
check is false on every clean checkout and in CI. It would have stripped the
poster from all 168 pages, not the 13 with a missing file. It also referenced
REPO_ROOT, which does not exist in that file, so the script crashed on the first
item. I described this guard in two commit messages without once executing the
generator.

The poster is now gone entirely, which is the smaller and more honest fix. These
previews are autoPlay muted loop, so the poster is visible for a few hundred
milliseconds; 13 of the 168 files do not exist and the browser fetches the poster
before the video. Removing the attribute kills 13 x 403 and 168 needless image
requests, and there is nothing to keep in sync.

Also applied a complexity pass to the delivery encode:
- hasAudio() deleted. 17 lines and a spawnSync per item to choose between
  "-c:a aac" and "-an". ffmpeg ignores -c:a when the input has no audio stream;
  checked, exit 0, output carries no audio track.
- The 40-line spawn + Promise wrapper is execFileSync. Everything around it in
  that script is already synchronous.
- The duplicated poster lookup is gone with the poster itself.

Net 76 lines lighter. Generator runs clean, emits 168 pages, carry-forward intact.
This commit is contained in:
ukimsanov
2026-08-04 12:52:26 -07:00
parent fffc56c33b
commit 592301248e
176 changed files with 1275 additions and 6393 deletions
+1 -32
View File
@@ -3,7 +3,7 @@ title: "Specs Checklist"
description: "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes"
---
<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/mk-specs-list.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.png" autoPlay muted loop playsInline />
<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/mk-specs-list.mp4" autoPlay muted loop playsInline />
## Install
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
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
### Ask your agent
```text
Add the Specs Checklist block from the HyperFrames Catalog to this project.
Replace the demo content with mine and match the existing design and timing.
```
### Install from the terminal
```bash
npx hyperframes add mk-specs-list
```
## 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.
**Wiring it by hand.** The installed block can be added to a host composition with:
```html
<div data-composition-id="mk-specs-list" data-composition-src="compositions/mk-specs-list.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
```
## Related topics
- [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 `data-viz` `list` `minimal` `professional`.