Files
hyperframes/docs/catalog/blocks/apple-money-count.mdx
T

63 lines
2.2 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
title: "Apple Money Count"
description: "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound."
---
`showcase` `finance` `kinetic` `youtube` `sfx`
Created by [Stronkter](https://x.com/Stronkter).
## Source Prompt
```text
📷HyperFrames by HeyGen Make me a five-second video of, on a white background, of a Apple-style bold font counting from $0 to $10,000. Once it counts to $10,000, it changes to a green color and the screen also flashes green for a second, and then money icons come out of the $10,000 amount all over the screen and then disappear.
```
<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/apple-money-count.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" autoPlay muted loop playsInline />
## Add it to a project
### Ask your agent
```text
Add the Apple Money Count 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 apple-money-count
```
## Details
| Property | Value |
| --- | --- |
| Type | Block |
| Dimensions | 1920×1080 |
| Duration | 5s |
**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `apple-money-count.html` | `compositions/apple-money-count.html` | hyperframes:composition |
| `assets/sfx-production.wav` | `assets/sfx-production.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.
**Wiring it by hand.** The installed block can be added to a host composition with:
```html
<div data-composition-id="apple-money-count" data-composition-src="compositions/apple-money-count.html" data-start="0" data-duration="5" 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)