mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-14 13:27:13 +00:00
ukimsanov
a6217f5ed1
My catalog rebuild added `poster="<name>.png"` to every preview. Thirteen items have an .mp4 but no .png, so the page asked for an image that does not exist — and a browser fetches the poster before the video, so those were thirteen 403s on load. The merged version did not have this; I introduced it. The generator checks the file now, the same way it already checks before telling a reader to read a comment header that may not be there. Thirteen pages lose the attribute; the videos are unaffected. Also uploads the three weekly changelog re-encodes to the path they are actually served from — hyperframes/changelog-videos/, not the docs image tree — which I had got wrong, leaving three dead links in the previous commit. All 597 media URLs on this branch now return 200.
69 lines
2.1 KiB
Plaintext
69 lines
2.1 KiB
Plaintext
---
|
||
title: "Code Snippet - Apple Terminal Basic"
|
||
description: "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session."
|
||
---
|
||
|
||
<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/code-snippet-apple-terminal-basic.mp4" autoPlay muted loop playsInline />
|
||
|
||
## Install
|
||
|
||
```bash Terminal
|
||
npx hyperframes add code-snippet-apple-terminal-basic
|
||
```
|
||
|
||
That writes one file: `compositions/code-snippet-apple-terminal-basic.html`.
|
||
|
||
## Add it to your video
|
||
|
||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||
|
||
```html index.html
|
||
<div
|
||
data-composition-id="code-snippet-apple-terminal-basic"
|
||
data-composition-src="compositions/code-snippet-apple-terminal-basic.html"
|
||
data-start="0"
|
||
data-duration="12"
|
||
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
|
||
|
||
### Ask your agent
|
||
|
||
```text
|
||
Add the Code Snippet - Apple Terminal Basic 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 code-snippet-apple-terminal-basic
|
||
```
|
||
|
||
## 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="code-snippet-apple-terminal-basic" data-composition-src="compositions/code-snippet-apple-terminal-basic.html" data-start="0" data-duration="12" 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 `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|