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.
53 lines
1.6 KiB
Plaintext
53 lines
1.6 KiB
Plaintext
---
|
||
title: "Morph Text"
|
||
description: "Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect"
|
||
---
|
||
|
||
<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/components/morph-text.mp4" autoPlay muted loop playsInline />
|
||
|
||
## Install
|
||
|
||
```bash Terminal
|
||
npx hyperframes add morph-text
|
||
```
|
||
|
||
That writes one file: `compositions/components/morph-text.html`.
|
||
|
||
## Paste it into your composition
|
||
|
||
Open `compositions/components/morph-text.html` and copy what is inside into your own composition.
|
||
|
||
A component has no size or duration of its own. It takes both from the composition
|
||
you paste it into.
|
||
|
||
## Add it to a project
|
||
|
||
### Ask your agent
|
||
|
||
```text
|
||
Add the Morph Text component 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 morph-text
|
||
```
|
||
|
||
## Use it
|
||
|
||
Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
|
||
|
||
**Wiring it by hand.** Open `compositions/components/morph-text.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
|
||
|
||
## 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 `text` `text-effect` `typography` `morph` `gooey` `kinetic` `animation`.
|