mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-02 12:08:50 +00:00
feat(registry): add lower thirds catalog blocks (#1134)
Adds news ticker from #1134, the podcast/interview lower-thirds pack from #1689, and the BILD-style lower third from #1276. Also adds generated catalog pages for flowchart-vertical and vfx-liquid-glass from #1525, plus a Lower Thirds catalog group for discovery. Co-authored-by: Miguel Ángel <miguel.sierra@heygen.com> Co-authored-by: Kiyeon Jeon <kiyeonjeon21@users.noreply.github.com> Co-authored-by: sunlesshalo <198846711+sunlesshalo@users.noreply.github.com> Co-authored-by: Moritz <moritz.wedel@axelspringer.com> Co-authored-by: Claude Sonnet <noreply@anthropic.com> Co-authored-by: Dashsoap <42135402+Dashsoap@users.noreply.github.com>
This commit is contained in:
Kiyeon Jeon
co-authored by
Miguel Ángel
Kiyeon Jeon
sunlesshalo
Moritz
Claude Sonnet
Dashsoap
Miguel Ángel
Kiyeon Jeon
sunlesshalo
Moritz
Claude Sonnet
Dashsoap
parent
0c05025c04
commit
ab818a2f1d
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Flowchart Vertical"
|
||||
description: "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
|
||||
---
|
||||
|
||||
# Flowchart Vertical
|
||||
|
||||
Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
|
||||
|
||||
`diagram` `flowchart` `interactive` `portrait`
|
||||
|
||||
<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/flowchart-vertical.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add flowchart-vertical
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1440×2560 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `flowchart-vertical.html` | `compositions/flowchart-vertical.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="flowchart-vertical" data-composition-src="compositions/flowchart-vertical.html" data-start="0" data-duration="12" data-track-index="1" data-width="1440" data-height="2560"></div>
|
||||
```
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: "Lower Third — BILD Style"
|
||||
description: "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow."
|
||||
---
|
||||
|
||||
# Lower Third — BILD Style
|
||||
|
||||
News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.
|
||||
|
||||
`broadcast` `lower-third` `news` `overlay`
|
||||
|
||||
<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/lower-third-bild.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lower-third-bild
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lower-third-bild.html` | `compositions/lower-third-bild.html` | hyperframes:composition |
|
||||
| `assets/fonts/BarlowCondensed-Bold.woff2` | `compositions/assets/fonts/BarlowCondensed-Bold.woff2` | hyperframes:asset |
|
||||
| `assets/fonts/BarlowCondensed-ExtraBold.woff2` | `compositions/assets/fonts/BarlowCondensed-ExtraBold.woff2` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lower-third-bild" data-composition-src="compositions/lower-third-bild.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Lower Third — Accent Underline"
|
||||
description: "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility"
|
||||
---
|
||||
|
||||
# Lower Third — Accent Underline
|
||||
|
||||
Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `minimal`
|
||||
|
||||
<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/lt-accent-underline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-accent-underline
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-accent-underline.html` | `compositions/lt-accent-underline.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-accent-underline" data-composition-src="compositions/lt-accent-underline.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Lower Third — Bold Block"
|
||||
description: "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops"
|
||||
---
|
||||
|
||||
# Lower Third — Bold Block
|
||||
|
||||
High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<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/lt-bold-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-bold-block
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-bold-block.html` | `compositions/lt-bold-block.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-bold-block" data-composition-src="compositions/lt-bold-block.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Lower Third — Clean Bar"
|
||||
description: "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance"
|
||||
---
|
||||
|
||||
# Lower Third — Clean Bar
|
||||
|
||||
Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview`
|
||||
|
||||
<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/lt-clean-bar.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-clean-bar
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-clean-bar.html` | `compositions/lt-clean-bar.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-clean-bar" data-composition-src="compositions/lt-clean-bar.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Lower Third — Color Block"
|
||||
description: "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role"
|
||||
---
|
||||
|
||||
# Lower Third — Color Block
|
||||
|
||||
High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<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/lt-color-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-color-block
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-color-block.html` | `compositions/lt-color-block.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-color-block" data-composition-src="compositions/lt-color-block.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Lower Third — Dark Card"
|
||||
description: "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance"
|
||||
---
|
||||
|
||||
# Lower Third — Dark Card
|
||||
|
||||
Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `dark`
|
||||
|
||||
<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/lt-dark-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-dark-card
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-dark-card.html` | `compositions/lt-dark-card.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-dark-card" data-composition-src="compositions/lt-dark-card.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Lower Third — Kicker Name"
|
||||
description: "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage"
|
||||
---
|
||||
|
||||
# Lower Third — Kicker Name
|
||||
|
||||
Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<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/lt-kicker-name.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-kicker-name
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-kicker-name.html` | `compositions/lt-kicker-name.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-kicker-name" data-composition-src="compositions/lt-kicker-name.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Lower Third — Mask Reveal"
|
||||
description: "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage"
|
||||
---
|
||||
|
||||
# Lower Third — Mask Reveal
|
||||
|
||||
Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<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/lt-mask-reveal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-mask-reveal
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-mask-reveal.html` | `compositions/lt-mask-reveal.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-mask-reveal" data-composition-src="compositions/lt-mask-reveal.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Lower Third — Side Rule"
|
||||
description: "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage"
|
||||
---
|
||||
|
||||
# Lower Third — Side Rule
|
||||
|
||||
Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `minimal`
|
||||
|
||||
<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/lt-side-rule.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-side-rule
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-side-rule.html` | `compositions/lt-side-rule.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-side-rule" data-composition-src="compositions/lt-side-rule.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Lower Third — Soft Pill"
|
||||
description: "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance"
|
||||
---
|
||||
|
||||
# Lower Third — Soft Pill
|
||||
|
||||
Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `minimal`
|
||||
|
||||
<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/lt-soft-pill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-soft-pill
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-soft-pill.html` | `compositions/lt-soft-pill.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-soft-pill" data-composition-src="compositions/lt-soft-pill.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Lower Third — Stack Bars"
|
||||
description: "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right"
|
||||
---
|
||||
|
||||
# Lower Third — Stack Bars
|
||||
|
||||
Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<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/lt-stack-bars.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-stack-bars
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-stack-bars.html` | `compositions/lt-stack-bars.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-stack-bars" data-composition-src="compositions/lt-stack-bars.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "News Ticker"
|
||||
description: "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl."
|
||||
---
|
||||
|
||||
# News Ticker
|
||||
|
||||
Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.
|
||||
|
||||
`lower-third` `overlay` `news` `ticker`
|
||||
|
||||
<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/news-ticker.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add news-ticker
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `news-ticker.html` | `compositions/news-ticker.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="news-ticker" data-composition-src="compositions/news-ticker.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: "Liquid Glass"
|
||||
description: "VFX composition block"
|
||||
---
|
||||
|
||||
# Liquid Glass
|
||||
|
||||
VFX composition block
|
||||
|
||||
`html-in-canvas` `webgl`
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<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/vfx-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add vfx-liquid-glass
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 20s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `vfx-liquid-glass.html` | `compositions/vfx-liquid-glass.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="vfx-liquid-glass" data-composition-src="compositions/vfx-liquid-glass.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -161,6 +161,7 @@
|
||||
"catalog/blocks/macos-tahoe-liquid-glass",
|
||||
"catalog/blocks/vfx-iphone-device",
|
||||
"catalog/blocks/vfx-liquid-background",
|
||||
"catalog/blocks/vfx-liquid-glass",
|
||||
"catalog/blocks/vfx-magnetic",
|
||||
"catalog/blocks/vfx-portal",
|
||||
"catalog/blocks/vfx-shatter",
|
||||
@@ -179,6 +180,23 @@
|
||||
"catalog/blocks/yt-lower-third"
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Lower Thirds",
|
||||
"pages": [
|
||||
"catalog/blocks/lower-third-bild",
|
||||
"catalog/blocks/lt-accent-underline",
|
||||
"catalog/blocks/lt-bold-block",
|
||||
"catalog/blocks/lt-clean-bar",
|
||||
"catalog/blocks/lt-color-block",
|
||||
"catalog/blocks/lt-dark-card",
|
||||
"catalog/blocks/lt-kicker-name",
|
||||
"catalog/blocks/lt-mask-reveal",
|
||||
"catalog/blocks/lt-side-rule",
|
||||
"catalog/blocks/lt-soft-pill",
|
||||
"catalog/blocks/lt-stack-bars",
|
||||
"catalog/blocks/news-ticker"
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Shader Transitions",
|
||||
"pages": [
|
||||
@@ -263,6 +281,7 @@
|
||||
"group": "Blocks",
|
||||
"pages": [
|
||||
"catalog/blocks/flowchart",
|
||||
"catalog/blocks/flowchart-vertical",
|
||||
"catalog/blocks/logo-outro"
|
||||
]
|
||||
},
|
||||
|
||||
@@ -362,6 +362,20 @@
|
||||
"href": "/catalog/blocks/flowchart",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
|
||||
},
|
||||
{
|
||||
"name": "flowchart-vertical",
|
||||
"type": "block",
|
||||
"title": "Flowchart Vertical",
|
||||
"description": "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
|
||||
"tags": [
|
||||
"diagram",
|
||||
"flowchart",
|
||||
"interactive",
|
||||
"portrait"
|
||||
],
|
||||
"href": "/catalog/blocks/flowchart-vertical",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png"
|
||||
},
|
||||
{
|
||||
"name": "glitch",
|
||||
"type": "block",
|
||||
@@ -537,6 +551,169 @@
|
||||
"href": "/catalog/blocks/logo-outro",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png"
|
||||
},
|
||||
{
|
||||
"name": "lower-third-bild",
|
||||
"type": "block",
|
||||
"title": "Lower Third — BILD Style",
|
||||
"description": "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.",
|
||||
"tags": [
|
||||
"broadcast",
|
||||
"lower-third",
|
||||
"news",
|
||||
"overlay"
|
||||
],
|
||||
"href": "/catalog/blocks/lower-third-bild",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png"
|
||||
},
|
||||
{
|
||||
"name": "lt-accent-underline",
|
||||
"type": "block",
|
||||
"title": "Lower Third — Accent Underline",
|
||||
"description": "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility",
|
||||
"tags": [
|
||||
"lower-third",
|
||||
"overlay",
|
||||
"podcast",
|
||||
"interview",
|
||||
"minimal"
|
||||
],
|
||||
"href": "/catalog/blocks/lt-accent-underline",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png"
|
||||
},
|
||||
{
|
||||
"name": "lt-bold-block",
|
||||
"type": "block",
|
||||
"title": "Lower Third — Bold Block",
|
||||
"description": "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops",
|
||||
"tags": [
|
||||
"lower-third",
|
||||
"overlay",
|
||||
"podcast",
|
||||
"interview",
|
||||
"bold"
|
||||
],
|
||||
"href": "/catalog/blocks/lt-bold-block",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png"
|
||||
},
|
||||
{
|
||||
"name": "lt-clean-bar",
|
||||
"type": "block",
|
||||
"title": "Lower Third — Clean Bar",
|
||||
"description": "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance",
|
||||
"tags": [
|
||||
"lower-third",
|
||||
"overlay",
|
||||
"podcast",
|
||||
"interview"
|
||||
],
|
||||
"href": "/catalog/blocks/lt-clean-bar",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png"
|
||||
},
|
||||
{
|
||||
"name": "lt-color-block",
|
||||
"type": "block",
|
||||
"title": "Lower Third — Color Block",
|
||||
"description": "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role",
|
||||
"tags": [
|
||||
"lower-third",
|
||||
"overlay",
|
||||
"podcast",
|
||||
"interview",
|
||||
"bold"
|
||||
],
|
||||
"href": "/catalog/blocks/lt-color-block",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png"
|
||||
},
|
||||
{
|
||||
"name": "lt-dark-card",
|
||||
"type": "block",
|
||||
"title": "Lower Third — Dark Card",
|
||||
"description": "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance",
|
||||
"tags": [
|
||||
"lower-third",
|
||||
"overlay",
|
||||
"podcast",
|
||||
"interview",
|
||||
"dark"
|
||||
],
|
||||
"href": "/catalog/blocks/lt-dark-card",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png"
|
||||
},
|
||||
{
|
||||
"name": "lt-kicker-name",
|
||||
"type": "block",
|
||||
"title": "Lower Third — Kicker Name",
|
||||
"description": "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage",
|
||||
"tags": [
|
||||
"lower-third",
|
||||
"overlay",
|
||||
"podcast",
|
||||
"interview",
|
||||
"bold"
|
||||
],
|
||||
"href": "/catalog/blocks/lt-kicker-name",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png"
|
||||
},
|
||||
{
|
||||
"name": "lt-mask-reveal",
|
||||
"type": "block",
|
||||
"title": "Lower Third — Mask Reveal",
|
||||
"description": "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage",
|
||||
"tags": [
|
||||
"lower-third",
|
||||
"overlay",
|
||||
"podcast",
|
||||
"interview",
|
||||
"bold"
|
||||
],
|
||||
"href": "/catalog/blocks/lt-mask-reveal",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png"
|
||||
},
|
||||
{
|
||||
"name": "lt-side-rule",
|
||||
"type": "block",
|
||||
"title": "Lower Third — Side Rule",
|
||||
"description": "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage",
|
||||
"tags": [
|
||||
"lower-third",
|
||||
"overlay",
|
||||
"podcast",
|
||||
"interview",
|
||||
"minimal"
|
||||
],
|
||||
"href": "/catalog/blocks/lt-side-rule",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png"
|
||||
},
|
||||
{
|
||||
"name": "lt-soft-pill",
|
||||
"type": "block",
|
||||
"title": "Lower Third — Soft Pill",
|
||||
"description": "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance",
|
||||
"tags": [
|
||||
"lower-third",
|
||||
"overlay",
|
||||
"podcast",
|
||||
"interview",
|
||||
"minimal"
|
||||
],
|
||||
"href": "/catalog/blocks/lt-soft-pill",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png"
|
||||
},
|
||||
{
|
||||
"name": "lt-stack-bars",
|
||||
"type": "block",
|
||||
"title": "Lower Third — Stack Bars",
|
||||
"description": "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right",
|
||||
"tags": [
|
||||
"lower-third",
|
||||
"overlay",
|
||||
"podcast",
|
||||
"interview",
|
||||
"bold"
|
||||
],
|
||||
"href": "/catalog/blocks/lt-stack-bars",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png"
|
||||
},
|
||||
{
|
||||
"name": "macos-notification",
|
||||
"type": "block",
|
||||
@@ -565,6 +742,20 @@
|
||||
"href": "/catalog/blocks/macos-tahoe-liquid-glass",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png"
|
||||
},
|
||||
{
|
||||
"name": "news-ticker",
|
||||
"type": "block",
|
||||
"title": "News Ticker",
|
||||
"description": "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.",
|
||||
"tags": [
|
||||
"lower-third",
|
||||
"overlay",
|
||||
"news",
|
||||
"ticker"
|
||||
],
|
||||
"href": "/catalog/blocks/news-ticker",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png"
|
||||
},
|
||||
{
|
||||
"name": "north-korea-locked-down",
|
||||
"type": "block",
|
||||
@@ -1033,6 +1224,18 @@
|
||||
"href": "/catalog/blocks/vfx-liquid-background",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png"
|
||||
},
|
||||
{
|
||||
"name": "vfx-liquid-glass",
|
||||
"type": "block",
|
||||
"title": "Liquid Glass",
|
||||
"description": "VFX composition block",
|
||||
"tags": [
|
||||
"html-in-canvas",
|
||||
"webgl"
|
||||
],
|
||||
"href": "/catalog/blocks/vfx-liquid-glass",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png"
|
||||
},
|
||||
{
|
||||
"name": "vfx-magnetic",
|
||||
"type": "block",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,151 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Barlow Condensed";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: block;
|
||||
src: url("assets/fonts/BarlowCondensed-Bold.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Barlow Condensed";
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: block;
|
||||
src: url("assets/fonts/BarlowCondensed-ExtraBold.woff2") format("woff2");
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
|
||||
#lb-root {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#lb-main-outer {
|
||||
position: absolute;
|
||||
bottom: 215px;
|
||||
left: 80px;
|
||||
padding-right: 14px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
#lb-main-text {
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 88px;
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
color: #212529;
|
||||
background: #ffffff;
|
||||
padding: 10px 22px 8px;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
box-shadow: 12px 12px 0 0 #dd0000;
|
||||
}
|
||||
|
||||
#lb-sub-outer {
|
||||
position: absolute;
|
||||
bottom: 135px;
|
||||
left: 80px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#lb-sub-text {
|
||||
font-family: "Barlow Condensed", sans-serif;
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
color: #ffffff;
|
||||
background: #dd0000;
|
||||
padding: 6px 18px 5px;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
box-shadow: 8px 8px 0 0 #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="lb-root"
|
||||
data-composition-id="lower-third-bild"
|
||||
data-composition-variables='{"TXT_MAIN_1_Line":{"type":"string","default":"BILD EXKLUSIV"},"TXT_SUB":{"type":"string","default":"Sonderbericht"}}'
|
||||
data-start="0"
|
||||
data-duration="8"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="lb-drv"
|
||||
class="clip"
|
||||
data-start="0"
|
||||
data-duration="8"
|
||||
data-track-index="0"
|
||||
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
|
||||
></div>
|
||||
|
||||
<div id="lb-main-outer">
|
||||
<div id="lb-main-text"></div>
|
||||
</div>
|
||||
|
||||
<div id="lb-sub-outer">
|
||||
<div id="lb-sub-text"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
window.__timelines = window.__timelines || {};
|
||||
|
||||
var vars =
|
||||
window.__hyperframes && window.__hyperframes.getVariables
|
||||
? window.__hyperframes.getVariables()
|
||||
: {};
|
||||
|
||||
var mainText = (vars.TXT_MAIN_1_Line || "BILD EXKLUSIV").trim();
|
||||
var subText = (vars.TXT_SUB || "Sonderbericht").trim();
|
||||
|
||||
var dur = parseFloat(document.getElementById("lb-drv").dataset.duration) || 8;
|
||||
|
||||
document.getElementById("lb-main-text").textContent = mainText;
|
||||
document.getElementById("lb-sub-text").textContent = subText || " ";
|
||||
|
||||
var mainOuter = document.getElementById("lb-main-outer");
|
||||
var subOuter = document.getElementById("lb-sub-outer");
|
||||
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
gsap.set([mainOuter, subOuter], { opacity: 1 });
|
||||
|
||||
tl.set([mainOuter, subOuter], { opacity: 0, visibility: "hidden" }, dur);
|
||||
|
||||
window.__timelines["lower-third-bild"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "lower-third-bild",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Lower Third — BILD Style",
|
||||
"description": "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.",
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 8,
|
||||
"tags": ["broadcast", "lower-third", "news", "overlay"],
|
||||
"files": [
|
||||
{
|
||||
"path": "lower-third-bild.html",
|
||||
"target": "compositions/lower-third-bild.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "assets/fonts/BarlowCondensed-Bold.woff2",
|
||||
"target": "compositions/assets/fonts/BarlowCondensed-Bold.woff2",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/fonts/BarlowCondensed-ExtraBold.woff2",
|
||||
"target": "compositions/assets/fonts/BarlowCondensed-ExtraBold.woff2",
|
||||
"type": "hyperframes:asset"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
|
||||
#root .lt {
|
||||
position: absolute;
|
||||
left: 130px;
|
||||
bottom: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
}
|
||||
#root .lt-name {
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-size: 76px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 0.96;
|
||||
letter-spacing: 0.005em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
#root .lt-rule {
|
||||
height: 6px;
|
||||
width: 100%;
|
||||
background: #46e5b7;
|
||||
border-radius: 3px;
|
||||
transform-origin: 0% 50%;
|
||||
}
|
||||
#root .lt-role {
|
||||
font-family: "Space Mono", monospace;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #e7eaf0;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="lt-accent-underline"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="4.8"
|
||||
>
|
||||
<div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
|
||||
<div id="lt" class="lt">
|
||||
<div id="lt-name" class="lt-name">Dr. Maya Chen</div>
|
||||
<div id="lt-rule" class="lt-rule"></div>
|
||||
<div id="lt-role" class="lt-role">Host · Neuroscientist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
var wrap = document.getElementById("lt");
|
||||
var nameEl = document.getElementById("lt-name");
|
||||
var rule = document.getElementById("lt-rule");
|
||||
var role = document.getElementById("lt-role");
|
||||
|
||||
// Name slides up, accent rule draws left→right, role fades up under it.
|
||||
gsap.set(nameEl, { y: 28, opacity: 0 });
|
||||
gsap.set(rule, { scaleX: 0 });
|
||||
gsap.set(role, { y: 16, opacity: 0 });
|
||||
|
||||
tl.to(nameEl, { y: 0, opacity: 1, duration: 0.55, ease: "power3.out" }, 0.1);
|
||||
tl.to(rule, { scaleX: 1, duration: 0.5, ease: "power4.out" }, 0.3);
|
||||
tl.to(role, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.46);
|
||||
|
||||
// Exit: role fades, rule retracts, name lifts, then hard kill.
|
||||
tl.to(role, { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.25);
|
||||
tl.to(rule, { scaleX: 0, duration: 0.3, ease: "power2.in" }, 4.3);
|
||||
tl.to(nameEl, { y: -16, opacity: 0, duration: 0.32, ease: "power2.in" }, 4.35);
|
||||
tl.set(wrap, { visibility: "hidden" }, 4.75);
|
||||
|
||||
window.__timelines["lt-accent-underline"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "lt-accent-underline",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Lower Third — Accent Underline",
|
||||
"description": "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility",
|
||||
"tags": ["lower-third", "overlay", "podcast", "interview", "minimal"],
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 4.8,
|
||||
"files": [
|
||||
{
|
||||
"path": "lt-accent-underline.html",
|
||||
"target": "compositions/lt-accent-underline.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+108
@@ -0,0 +1,108 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
|
||||
#root .lt {
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
bottom: 116px;
|
||||
}
|
||||
#root .lt-block {
|
||||
background: #141518;
|
||||
padding: 18px 34px 22px 30px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
will-change: clip-path;
|
||||
}
|
||||
#root .lt-name {
|
||||
font-family: "Archivo Black", sans-serif;
|
||||
font-size: 58px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 0.98;
|
||||
letter-spacing: -0.015em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#root .lt-tagwrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
#root .lt-tag {
|
||||
display: inline-block;
|
||||
background: #ffd23f;
|
||||
color: #141518;
|
||||
font-family: "Space Mono", monospace;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
padding: 7px 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="lt-bold-block"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="4.8"
|
||||
>
|
||||
<div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
|
||||
<div id="lt" class="lt">
|
||||
<div id="lt-block" class="lt-block">
|
||||
<div id="lt-name" class="lt-name">Maya Chen</div>
|
||||
<div class="lt-tagwrap">
|
||||
<span id="lt-tag" class="lt-tag">Host · Neuroscientist</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
var wrap = document.getElementById("lt");
|
||||
var block = document.getElementById("lt-block");
|
||||
var nameEl = document.getElementById("lt-name");
|
||||
var tag = document.getElementById("lt-tag");
|
||||
|
||||
// Solid block wipes in from the left, name slams up inside it, tag pops up after.
|
||||
gsap.set(block, { clipPath: "inset(0 100% 0 0)" });
|
||||
gsap.set(nameEl, { y: 30, opacity: 0 });
|
||||
gsap.set(tag, { y: 40 });
|
||||
|
||||
tl.to(block, { clipPath: "inset(0 0% 0 0)", duration: 0.5, ease: "power4.out" }, 0.1);
|
||||
tl.to(nameEl, { y: 0, opacity: 1, duration: 0.42, ease: "back.out(1.6)" }, 0.26);
|
||||
tl.to(tag, { y: 0, duration: 0.45, ease: "back.out(2)" }, 0.5);
|
||||
|
||||
// Exit: block wipes out to the left, then hard kill.
|
||||
tl.to(block, { clipPath: "inset(0 0 0 100%)", duration: 0.4, ease: "power3.in" }, 4.3);
|
||||
tl.set(wrap, { visibility: "hidden" }, 4.75);
|
||||
|
||||
window.__timelines["lt-bold-block"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "lt-bold-block",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Lower Third — Bold Block",
|
||||
"description": "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops",
|
||||
"tags": ["lower-third", "overlay", "podcast", "interview", "bold"],
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 4.8,
|
||||
"files": [
|
||||
{
|
||||
"path": "lt-bold-block.html",
|
||||
"target": "compositions/lt-bold-block.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
#root .lt {
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
bottom: 110px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 14px 44px rgba(15, 17, 21, 0.18);
|
||||
will-change: clip-path;
|
||||
}
|
||||
#root .lt-tab {
|
||||
width: 12px;
|
||||
background: #ff5a36;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#root .lt-body {
|
||||
background: #ffffff;
|
||||
padding: 22px 40px 24px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
#root .lt-name {
|
||||
font-size: 52px;
|
||||
font-weight: 700;
|
||||
color: #0f1115;
|
||||
line-height: 1.06;
|
||||
letter-spacing: -0.015em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#root .lt-role {
|
||||
font-size: 27px;
|
||||
font-weight: 400;
|
||||
color: #5a6170;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.01em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="lt-clean-bar"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="4.8"
|
||||
>
|
||||
<div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
|
||||
<div id="lt" class="lt">
|
||||
<div id="lt-tab" class="lt-tab"></div>
|
||||
<div class="lt-body">
|
||||
<div id="lt-name" class="lt-name">Dr. Maya Chen</div>
|
||||
<div id="lt-role" class="lt-role">Host · Neuroscientist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
var card = document.getElementById("lt");
|
||||
var tab = document.getElementById("lt-tab");
|
||||
var nameEl = document.getElementById("lt-name");
|
||||
var role = document.getElementById("lt-role");
|
||||
|
||||
// Card wipes in from the left (clip-path), accent tab grows, text rises with a small stagger.
|
||||
gsap.set(card, { clipPath: "inset(0 100% 0 0)" });
|
||||
gsap.set(tab, { scaleY: 0, transformOrigin: "50% 0%" });
|
||||
gsap.set(nameEl, { y: 22, opacity: 0 });
|
||||
gsap.set(role, { y: 22, opacity: 0 });
|
||||
|
||||
tl.to(card, { clipPath: "inset(0 0% 0 0)", duration: 0.55, ease: "power3.out" }, 0.1);
|
||||
tl.to(tab, { scaleY: 1, duration: 0.45, ease: "power2.out" }, 0.28);
|
||||
tl.to(nameEl, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.34);
|
||||
tl.to(role, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.44);
|
||||
|
||||
// Exit: settle out, then hard kill the inner element.
|
||||
tl.to(card, { y: 18, opacity: 0, duration: 0.35, ease: "power2.in" }, 4.3);
|
||||
tl.set(card, { visibility: "hidden" }, 4.75);
|
||||
|
||||
window.__timelines["lt-clean-bar"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "lt-clean-bar",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Lower Third — Clean Bar",
|
||||
"description": "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance",
|
||||
"tags": ["lower-third", "overlay", "podcast", "interview"],
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 4.8,
|
||||
"files": [
|
||||
{
|
||||
"path": "lt-clean-bar.html",
|
||||
"target": "compositions/lt-clean-bar.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
|
||||
#root .lt {
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
bottom: 116px;
|
||||
}
|
||||
#root .lt-block {
|
||||
background: #2756ff;
|
||||
padding: 20px 36px 24px 32px;
|
||||
box-shadow: 0 16px 44px rgba(39, 86, 255, 0.34);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
#root .lt-name {
|
||||
font-family: "League Gothic", sans-serif;
|
||||
font-size: 84px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 0.86;
|
||||
letter-spacing: 0.01em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#root .lt-role {
|
||||
font-family: "Space Mono", monospace;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.05em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="lt-color-block"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="4.8"
|
||||
>
|
||||
<div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
|
||||
<div id="lt" class="lt">
|
||||
<div id="lt-block" class="lt-block">
|
||||
<div id="lt-name" class="lt-name">Dr. Maya Chen</div>
|
||||
<div id="lt-role" class="lt-role">Host · Neuroscientist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
var wrap = document.getElementById("lt");
|
||||
var block = document.getElementById("lt-block");
|
||||
var nameEl = document.getElementById("lt-name");
|
||||
var role = document.getElementById("lt-role");
|
||||
|
||||
// Color block slides in from the left and overshoots slightly; name and role rise inside it.
|
||||
gsap.set(block, { x: -80, opacity: 0 });
|
||||
gsap.set(nameEl, { y: 24, opacity: 0 });
|
||||
gsap.set(role, { y: 18, opacity: 0 });
|
||||
|
||||
tl.to(block, { x: 0, opacity: 1, duration: 0.5, ease: "back.out(1.4)" }, 0.1);
|
||||
tl.to(nameEl, { y: 0, opacity: 1, duration: 0.42, ease: "power3.out" }, 0.3);
|
||||
tl.to(role, { y: 0, opacity: 1, duration: 0.42, ease: "power3.out" }, 0.4);
|
||||
|
||||
// Exit: slide out left, hard kill.
|
||||
tl.to(block, { x: -60, opacity: 0, duration: 0.35, ease: "power2.in" }, 4.3);
|
||||
tl.set(wrap, { visibility: "hidden" }, 4.75);
|
||||
|
||||
window.__timelines["lt-color-block"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "lt-color-block",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Lower Third — Color Block",
|
||||
"description": "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role",
|
||||
"tags": ["lower-third", "overlay", "podcast", "interview", "bold"],
|
||||
"dimensions": { "width": 1920, "height": 1080 },
|
||||
"duration": 4.8,
|
||||
"files": [
|
||||
{
|
||||
"path": "lt-color-block.html",
|
||||
"target": "compositions/lt-color-block.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
#root .lt {
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
bottom: 110px;
|
||||
}
|
||||
#root .lt-card {
|
||||
background: #16181d;
|
||||
border-radius: 14px;
|
||||
padding: 24px 38px 26px 32px;
|
||||
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
#root .lt-name {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.015em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#root .lt-underline {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
background: #f5b942;
|
||||
border-radius: 2px;
|
||||
transform-origin: 0% 50%;
|
||||
}
|
||||
#root .lt-role {
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
color: #aeb6c2;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="lt-dark-card"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="4.8"
|
||||
>
|
||||
<div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
|
||||
<div id="lt" class="lt">
|
||||
<div id="lt-card" class="lt-card">
|
||||
<div id="lt-name" class="lt-name">Dr. Maya Chen</div>
|
||||
<div id="lt-underline" class="lt-underline"></div>
|
||||
<div id="lt-role" class="lt-role">Host · Neuroscientist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
var wrap = document.getElementById("lt");
|
||||
var card = document.getElementById("lt-card");
|
||||
var nameEl = document.getElementById("lt-name");
|
||||
var underline = document.getElementById("lt-underline");
|
||||
var role = document.getElementById("lt-role");
|
||||
|
||||
// Card slides up from below, name fades, accent underline draws, role fades.
|
||||
gsap.set(card, { y: 60, opacity: 0 });
|
||||
gsap.set(nameEl, { y: 14, opacity: 0 });
|
||||
gsap.set(underline, { scaleX: 0 });
|
||||
gsap.set(role, { opacity: 0 });
|
||||
|
||||
tl.to(card, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.1);
|
||||
tl.to(nameEl, { y: 0, opacity: 1, duration: 0.45, ease: "power3.out" }, 0.26);
|
||||
tl.to(underline, { scaleX: 1, duration: 0.5, ease: "power4.out" }, 0.42);
|
||||
tl.to(role, { opacity: 1, duration: 0.45, ease: "power2.out" }, 0.56);
|
||||
|
||||
// Exit: slide down + hard kill.
|
||||
tl.to(card, { y: 24, opacity: 0, duration: 0.35, ease: "power2.in" }, 4.3);
|
||||
tl.set(wrap, { visibility: "hidden" }, 4.75);
|
||||
|
||||
window.__timelines["lt-dark-card"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "lt-dark-card",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Lower Third — Dark Card",
|
||||
"description": "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance",
|
||||
"tags": ["lower-third", "overlay", "podcast", "interview", "dark"],
|
||||
"dimensions": { "width": 1920, "height": 1080 },
|
||||
"duration": 4.8,
|
||||
"files": [
|
||||
{
|
||||
"path": "lt-dark-card.html",
|
||||
"target": "compositions/lt-dark-card.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
|
||||
#root .lt {
|
||||
position: absolute;
|
||||
left: 130px;
|
||||
bottom: 122px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
}
|
||||
#root .lt-kickwrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
#root .lt-kicker {
|
||||
display: inline-block;
|
||||
font-family: "Space Mono", monospace;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #141518;
|
||||
background: #46e5b7;
|
||||
padding: 6px 14px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#root .lt-name {
|
||||
font-family: "Archivo Black", sans-serif;
|
||||
font-size: 70px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 0.98;
|
||||
letter-spacing: -0.015em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#root .lt-baseline {
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background: #46e5b7;
|
||||
border-radius: 3px;
|
||||
transform-origin: 0% 50%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="lt-kicker-name"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="4.8"
|
||||
>
|
||||
<div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
|
||||
<div id="lt" class="lt">
|
||||
<div class="lt-kickwrap">
|
||||
<span id="lt-kicker" class="lt-kicker">Episode 47</span>
|
||||
</div>
|
||||
<div id="lt-name" class="lt-name">Maya Chen</div>
|
||||
<div id="lt-baseline" class="lt-baseline"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
var wrap = document.getElementById("lt");
|
||||
var kicker = document.getElementById("lt-kicker");
|
||||
var nameEl = document.getElementById("lt-name");
|
||||
var baseline = document.getElementById("lt-baseline");
|
||||
|
||||
// Kicker drops in, name slams up, accent baseline draws.
|
||||
gsap.set(kicker, { y: -40 });
|
||||
gsap.set(nameEl, { y: 34, opacity: 0 });
|
||||
gsap.set(baseline, { scaleX: 0 });
|
||||
|
||||
tl.to(kicker, { y: 0, duration: 0.42, ease: "back.out(2)" }, 0.1);
|
||||
tl.to(nameEl, { y: 0, opacity: 1, duration: 0.45, ease: "back.out(1.5)" }, 0.32);
|
||||
tl.to(baseline, { scaleX: 1, duration: 0.5, ease: "power4.out" }, 0.5);
|
||||
|
||||
// Exit: baseline retracts, text lifts, hard kill.
|
||||
tl.to(baseline, { scaleX: 0, duration: 0.3, ease: "power2.in" }, 4.25);
|
||||
tl.to(nameEl, { y: -16, opacity: 0, duration: 0.32, ease: "power2.in" }, 4.3);
|
||||
tl.to(kicker, { y: -40, duration: 0.3, ease: "power2.in" }, 4.32);
|
||||
tl.set(wrap, { visibility: "hidden" }, 4.75);
|
||||
|
||||
window.__timelines["lt-kicker-name"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "lt-kicker-name",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Lower Third — Kicker Name",
|
||||
"description": "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage",
|
||||
"tags": ["lower-third", "overlay", "podcast", "interview", "bold"],
|
||||
"dimensions": { "width": 1920, "height": 1080 },
|
||||
"duration": 4.8,
|
||||
"files": [
|
||||
{
|
||||
"path": "lt-kicker-name.html",
|
||||
"target": "compositions/lt-kicker-name.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
#root .lt {
|
||||
position: absolute;
|
||||
left: 130px;
|
||||
bottom: 122px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
}
|
||||
#root .lt-namewrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 2px 0;
|
||||
}
|
||||
#root .lt-name {
|
||||
font-size: 72px;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
line-height: 0.98;
|
||||
letter-spacing: -0.02em;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
|
||||
will-change: clip-path;
|
||||
}
|
||||
#root .lt-sweep {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
background: #ffd23f;
|
||||
}
|
||||
#root .lt-role {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #e7eaf0;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="lt-mask-reveal"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="4.8"
|
||||
>
|
||||
<div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
|
||||
<div id="lt" class="lt">
|
||||
<div class="lt-namewrap">
|
||||
<div id="lt-name" class="lt-name">Dr. Maya Chen</div>
|
||||
<div id="lt-sweep" class="lt-sweep"></div>
|
||||
</div>
|
||||
<div id="lt-role" class="lt-role">Host · Neuroscientist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
var wrap = document.getElementById("lt");
|
||||
var nameEl = document.getElementById("lt-name");
|
||||
var sweep = document.getElementById("lt-sweep");
|
||||
var role = document.getElementById("lt-role");
|
||||
|
||||
// An accent sweep crosses left→right; the name is revealed by a clip-path wipe behind it; role fades up.
|
||||
gsap.set(nameEl, { clipPath: "inset(0 100% 0 0)" });
|
||||
gsap.set(sweep, { left: "0%", opacity: 0 });
|
||||
gsap.set(role, { y: 14, opacity: 0 });
|
||||
|
||||
tl.to(sweep, { opacity: 1, duration: 0.12, ease: "none" }, 0.1);
|
||||
tl.to(sweep, { left: "100%", duration: 0.55, ease: "power2.inOut" }, 0.12);
|
||||
tl.to(nameEl, { clipPath: "inset(0 0% 0 0)", duration: 0.5, ease: "power2.inOut" }, 0.16);
|
||||
tl.to(sweep, { opacity: 0, duration: 0.15, ease: "none" }, 0.6);
|
||||
tl.to(role, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.55);
|
||||
|
||||
// Exit: name un-wipes, role fades, hard kill.
|
||||
tl.to(role, { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.25);
|
||||
tl.to(nameEl, { clipPath: "inset(0 0 0 100%)", duration: 0.4, ease: "power2.in" }, 4.3);
|
||||
tl.set(wrap, { visibility: "hidden" }, 4.75);
|
||||
|
||||
window.__timelines["lt-mask-reveal"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "lt-mask-reveal",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Lower Third — Mask Reveal",
|
||||
"description": "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage",
|
||||
"tags": ["lower-third", "overlay", "podcast", "interview", "bold"],
|
||||
"dimensions": { "width": 1920, "height": 1080 },
|
||||
"duration": 4.8,
|
||||
"files": [
|
||||
{
|
||||
"path": "lt-mask-reveal.html",
|
||||
"target": "compositions/lt-mask-reveal.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
|
||||
#root .lt {
|
||||
position: absolute;
|
||||
left: 130px;
|
||||
bottom: 120px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 26px;
|
||||
}
|
||||
#root .lt-bar {
|
||||
width: 8px;
|
||||
background: #46e5b7;
|
||||
border-radius: 4px;
|
||||
transform-origin: 50% 0%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#root .lt-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
#root .lt-name {
|
||||
font-family: "League Gothic", sans-serif;
|
||||
font-size: 92px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 0.86;
|
||||
letter-spacing: 0.01em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#root .lt-role {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #e7eaf0;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="lt-side-rule"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="4.8"
|
||||
>
|
||||
<div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
|
||||
<div id="lt" class="lt">
|
||||
<div id="lt-bar" class="lt-bar"></div>
|
||||
<div class="lt-text">
|
||||
<div id="lt-name" class="lt-name">Dr. Maya Chen</div>
|
||||
<div id="lt-role" class="lt-role">Host · Neuroscientist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
var wrap = document.getElementById("lt");
|
||||
var bar = document.getElementById("lt-bar");
|
||||
var nameEl = document.getElementById("lt-name");
|
||||
var role = document.getElementById("lt-role");
|
||||
|
||||
// Vertical accent bar draws top→down, name and role slide in from the left.
|
||||
gsap.set(bar, { scaleY: 0 });
|
||||
gsap.set(nameEl, { x: -24, opacity: 0 });
|
||||
gsap.set(role, { x: -24, opacity: 0 });
|
||||
|
||||
tl.to(bar, { scaleY: 1, duration: 0.5, ease: "power3.out" }, 0.1);
|
||||
tl.to(nameEl, { x: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.26);
|
||||
tl.to(role, { x: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.38);
|
||||
|
||||
// Exit: bar retracts, text lifts, hard kill.
|
||||
tl.to(role, { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.25);
|
||||
tl.to(nameEl, { y: -14, opacity: 0, duration: 0.32, ease: "power2.in" }, 4.3);
|
||||
tl.to(bar, { scaleY: 0, duration: 0.32, ease: "power2.in" }, 4.32);
|
||||
tl.set(wrap, { visibility: "hidden" }, 4.75);
|
||||
|
||||
window.__timelines["lt-side-rule"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "lt-side-rule",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Lower Third — Side Rule",
|
||||
"description": "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage",
|
||||
"tags": ["lower-third", "overlay", "podcast", "interview", "minimal"],
|
||||
"dimensions": { "width": 1920, "height": 1080 },
|
||||
"duration": 4.8,
|
||||
"files": [
|
||||
{
|
||||
"path": "lt-side-rule.html",
|
||||
"target": "compositions/lt-side-rule.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
#root .lt {
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
bottom: 120px;
|
||||
}
|
||||
#root .lt-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 22px;
|
||||
background: #ffffff;
|
||||
border-radius: 999px;
|
||||
padding: 20px 40px 20px 26px;
|
||||
box-shadow: 0 16px 46px rgba(15, 17, 21, 0.2);
|
||||
transform-origin: 0% 100%;
|
||||
will-change: transform;
|
||||
}
|
||||
#root .lt-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #ff5a36;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#root .lt-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
#root .lt-name {
|
||||
font-size: 46px;
|
||||
font-weight: 700;
|
||||
color: #0f1115;
|
||||
line-height: 1.04;
|
||||
letter-spacing: -0.015em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#root .lt-role {
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
color: #5a6170;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.01em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="lt-soft-pill"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="4.8"
|
||||
>
|
||||
<div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
|
||||
<div id="lt" class="lt">
|
||||
<div id="lt-pill" class="lt-pill">
|
||||
<div id="lt-dot" class="lt-dot"></div>
|
||||
<div class="lt-text">
|
||||
<div id="lt-name" class="lt-name">Dr. Maya Chen</div>
|
||||
<div id="lt-role" class="lt-role">Host · Neuroscientist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
var wrap = document.getElementById("lt");
|
||||
var pill = document.getElementById("lt-pill");
|
||||
var dot = document.getElementById("lt-dot");
|
||||
var nameEl = document.getElementById("lt-name");
|
||||
var role = document.getElementById("lt-role");
|
||||
|
||||
// Pill scales up from the lower-left anchor, dot pulses in, text settles.
|
||||
gsap.set(pill, { scale: 0.88, y: 18, opacity: 0 });
|
||||
gsap.set(dot, { scale: 0 });
|
||||
gsap.set([nameEl, role], { opacity: 0, x: -10 });
|
||||
|
||||
tl.to(pill, { scale: 1, y: 0, opacity: 1, duration: 0.55, ease: "back.out(1.7)" }, 0.1);
|
||||
tl.to(dot, { scale: 1, duration: 0.4, ease: "back.out(3)" }, 0.4);
|
||||
tl.to(nameEl, { opacity: 1, x: 0, duration: 0.45, ease: "power3.out" }, 0.42);
|
||||
tl.to(role, { opacity: 1, x: 0, duration: 0.45, ease: "power3.out" }, 0.5);
|
||||
|
||||
// Exit: settle down + hard kill.
|
||||
tl.to(pill, { scale: 0.94, y: 14, opacity: 0, duration: 0.35, ease: "power2.in" }, 4.3);
|
||||
tl.set(wrap, { visibility: "hidden" }, 4.75);
|
||||
|
||||
window.__timelines["lt-soft-pill"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "lt-soft-pill",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Lower Third — Soft Pill",
|
||||
"description": "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance",
|
||||
"tags": ["lower-third", "overlay", "podcast", "interview", "minimal"],
|
||||
"dimensions": { "width": 1920, "height": 1080 },
|
||||
"duration": 4.8,
|
||||
"files": [
|
||||
{
|
||||
"path": "lt-soft-pill.html",
|
||||
"target": "compositions/lt-soft-pill.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+108
@@ -0,0 +1,108 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
|
||||
#root .lt {
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
bottom: 116px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
#root .lt-namebar {
|
||||
background: #141518;
|
||||
padding: 14px 30px;
|
||||
will-change: clip-path;
|
||||
}
|
||||
#root .lt-name {
|
||||
font-family: "Archivo Black", sans-serif;
|
||||
font-size: 52px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.015em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#root .lt-rolebar {
|
||||
background: #ffd23f;
|
||||
padding: 9px 22px;
|
||||
margin-left: 14px;
|
||||
will-change: clip-path;
|
||||
}
|
||||
#root .lt-role {
|
||||
font-family: "Space Mono", monospace;
|
||||
font-size: 23px;
|
||||
font-weight: 700;
|
||||
color: #141518;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="lt-stack-bars"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="4.8"
|
||||
>
|
||||
<div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
|
||||
<div id="lt" class="lt">
|
||||
<div id="lt-namebar" class="lt-namebar">
|
||||
<div id="lt-name" class="lt-name">Maya Chen</div>
|
||||
</div>
|
||||
<div id="lt-rolebar" class="lt-rolebar">
|
||||
<div id="lt-role" class="lt-role">Host · Neuroscientist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
var wrap = document.getElementById("lt");
|
||||
var namebar = document.getElementById("lt-namebar");
|
||||
var rolebar = document.getElementById("lt-rolebar");
|
||||
|
||||
// Name bar wipes in from the left; role bar wipes in from the right (opposing).
|
||||
gsap.set(namebar, { clipPath: "inset(0 100% 0 0)" });
|
||||
gsap.set(rolebar, { clipPath: "inset(0 0 0 100%)" });
|
||||
|
||||
tl.to(namebar, { clipPath: "inset(0 0% 0 0)", duration: 0.5, ease: "power4.out" }, 0.1);
|
||||
tl.to(rolebar, { clipPath: "inset(0 0% 0 0%)", duration: 0.5, ease: "power4.out" }, 0.34);
|
||||
|
||||
// Exit: both wipe back out, hard kill.
|
||||
tl.to(rolebar, { clipPath: "inset(0 0 0 100%)", duration: 0.32, ease: "power3.in" }, 4.25);
|
||||
tl.to(namebar, { clipPath: "inset(0 100% 0 0)", duration: 0.36, ease: "power3.in" }, 4.32);
|
||||
tl.set(wrap, { visibility: "hidden" }, 4.75);
|
||||
|
||||
window.__timelines["lt-stack-bars"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "lt-stack-bars",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Lower Third — Stack Bars",
|
||||
"description": "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right",
|
||||
"tags": ["lower-third", "overlay", "podcast", "interview", "bold"],
|
||||
"dimensions": { "width": 1920, "height": 1080 },
|
||||
"duration": 4.8,
|
||||
"files": [
|
||||
{
|
||||
"path": "lt-stack-bars.html",
|
||||
"target": "compositions/lt-stack-bars.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+408
@@ -0,0 +1,408 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>News Ticker</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
#nt-root {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
color: #f8fafc;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#nt-root .nt-shell {
|
||||
position: absolute;
|
||||
left: 96px;
|
||||
right: 96px;
|
||||
bottom: 72px;
|
||||
height: 216px;
|
||||
filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.32));
|
||||
}
|
||||
|
||||
#nt-root .nt-panel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 28px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(21, 31, 48, 0.96), rgba(7, 13, 24, 0.98)),
|
||||
linear-gradient(90deg, rgba(201, 31, 45, 0.72), transparent 38%);
|
||||
}
|
||||
|
||||
#nt-root .nt-panel::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "";
|
||||
background:
|
||||
radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.2), transparent 26%),
|
||||
linear-gradient(
|
||||
110deg,
|
||||
transparent 0 42%,
|
||||
rgba(255, 255, 255, 0.06) 42% 43%,
|
||||
transparent 43% 100%
|
||||
);
|
||||
opacity: 0.72;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nt-root .nt-top-row {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 126px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
#nt-root .nt-brand {
|
||||
width: 294px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
background: linear-gradient(135deg, #e11d2e, #9f1220);
|
||||
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
#nt-root .nt-live-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 999px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
#nt-root .nt-brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#nt-root .nt-live {
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
|
||||
#nt-root .nt-desk {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.22em;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#nt-root .nt-headline-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 250px 0 44px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#nt-root .nt-headline {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 48px;
|
||||
font-weight: 850;
|
||||
line-height: 1.02;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
#nt-root .nt-headline-accent {
|
||||
color: #ff4455;
|
||||
}
|
||||
|
||||
#nt-root .nt-time {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 38px;
|
||||
padding: 10px 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.74);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.08em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
#nt-root .nt-bottom-row {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 90px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.11);
|
||||
background: rgba(2, 6, 13, 0.58);
|
||||
}
|
||||
|
||||
#nt-root .nt-label {
|
||||
width: 294px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: #5f0712;
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#nt-root .nt-ticker-window {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #050b15;
|
||||
}
|
||||
|
||||
#nt-root .nt-ticker-window::before,
|
||||
#nt-root .nt-ticker-window::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
width: 90px;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nt-root .nt-ticker-window::before {
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, #050b15, transparent);
|
||||
}
|
||||
|
||||
#nt-root .nt-ticker-window::after {
|
||||
right: 0;
|
||||
background: linear-gradient(270deg, #050b15, transparent);
|
||||
}
|
||||
|
||||
#nt-root .nt-ticker-track {
|
||||
position: absolute;
|
||||
left: 34px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 34px;
|
||||
white-space: nowrap;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
#nt-root .nt-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 13px 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 999px;
|
||||
background: #08111f;
|
||||
color: #ffffff;
|
||||
font-size: 31px;
|
||||
font-weight: 650;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
#nt-root .nt-separator {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 999px;
|
||||
background: #e11d2e;
|
||||
box-shadow: 0 0 22px rgba(225, 29, 46, 0.75);
|
||||
}
|
||||
|
||||
#nt-root .nt-metric {
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
background: #063344;
|
||||
color: #c8f8ff;
|
||||
font-weight: 850;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
#nt-root .nt-flash {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -260px;
|
||||
z-index: 3;
|
||||
width: 210px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
|
||||
transform: skewX(-16deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="nt-root"
|
||||
data-composition-id="news-ticker"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="7"
|
||||
>
|
||||
<section
|
||||
id="nt-shell"
|
||||
class="clip nt-shell"
|
||||
data-start="0"
|
||||
data-duration="7"
|
||||
data-track-index="0"
|
||||
>
|
||||
<div class="nt-panel">
|
||||
<div id="nt-flash" class="nt-flash"></div>
|
||||
<div class="nt-top-row">
|
||||
<div id="nt-brand" class="nt-brand">
|
||||
<div id="nt-live-dot" class="nt-live-dot"></div>
|
||||
<div class="nt-brand-text">
|
||||
<div class="nt-live">Live</div>
|
||||
<div class="nt-desk">Global Desk</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nt-headline-wrap">
|
||||
<h1 id="nt-headline" class="nt-headline">
|
||||
AI video tools move from <span class="nt-headline-accent">prototype</span> to
|
||||
production
|
||||
</h1>
|
||||
<div id="nt-time" class="nt-time">09:41 UTC</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nt-bottom-row">
|
||||
<div id="nt-label" class="nt-label">Breaking</div>
|
||||
<div class="nt-ticker-window">
|
||||
<div id="nt-ticker-track" class="nt-ticker-track">
|
||||
<span class="nt-item"
|
||||
><span class="nt-separator"></span>Creator teams shorten launch cycles by
|
||||
<span class="nt-metric">38%</span></span
|
||||
>
|
||||
<span class="nt-item"
|
||||
><span class="nt-separator"></span>Rendering queues clear in under
|
||||
<span class="nt-metric">2 min</span></span
|
||||
>
|
||||
<span class="nt-item"
|
||||
><span class="nt-separator"></span>New catalog blocks trending across product
|
||||
demos</span
|
||||
>
|
||||
<span class="nt-item"
|
||||
><span class="nt-separator"></span>Studio editors adopt HTML-first motion
|
||||
systems</span
|
||||
>
|
||||
<span class="nt-item"
|
||||
><span class="nt-separator"></span>Creator teams shorten launch cycles by
|
||||
<span class="nt-metric">38%</span></span
|
||||
>
|
||||
<span class="nt-item"
|
||||
><span class="nt-separator"></span>Rendering queues clear in under
|
||||
<span class="nt-metric">2 min</span></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
var shell = document.getElementById("nt-shell");
|
||||
var brand = document.getElementById("nt-brand");
|
||||
var headline = document.getElementById("nt-headline");
|
||||
var label = document.getElementById("nt-label");
|
||||
var tickerTrack = document.getElementById("nt-ticker-track");
|
||||
var liveDot = document.getElementById("nt-live-dot");
|
||||
var flash = document.getElementById("nt-flash");
|
||||
var time = document.getElementById("nt-time");
|
||||
|
||||
gsap.set(shell, { y: 260, opacity: 0 });
|
||||
gsap.set(brand, { x: -80, opacity: 0 });
|
||||
gsap.set(headline, { y: 26, opacity: 0, clipPath: "inset(0 100% 0 0)" });
|
||||
gsap.set(label, { y: 18, opacity: 0 });
|
||||
gsap.set(time, { y: -10, opacity: 0 });
|
||||
gsap.set(tickerTrack, { x: 1260 });
|
||||
|
||||
tl.to(shell, { y: 0, opacity: 1, duration: 0.52, ease: "power4.out" }, 0);
|
||||
tl.to(brand, { x: 0, opacity: 1, duration: 0.42, ease: "power3.out" }, 0.08);
|
||||
tl.to(
|
||||
headline,
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
clipPath: "inset(0 0% 0 0)",
|
||||
duration: 0.62,
|
||||
ease: "power3.out",
|
||||
},
|
||||
0.18,
|
||||
);
|
||||
tl.to(time, { y: 0, opacity: 1, duration: 0.32, ease: "power2.out" }, 0.5);
|
||||
tl.to(label, { y: 0, opacity: 1, duration: 0.28, ease: "power2.out" }, 0.55);
|
||||
tl.to(flash, { x: 2040, duration: 0.86, ease: "power2.inOut" }, 0.34);
|
||||
tl.to(
|
||||
tickerTrack,
|
||||
{
|
||||
x: -1120,
|
||||
duration: 6.05,
|
||||
ease: "none",
|
||||
},
|
||||
0.62,
|
||||
);
|
||||
tl.to(
|
||||
liveDot,
|
||||
{
|
||||
scale: 1.32,
|
||||
boxShadow: "0 0 0 18px rgba(255,255,255,0)",
|
||||
duration: 0.42,
|
||||
repeat: 11,
|
||||
yoyo: true,
|
||||
ease: "sine.inOut",
|
||||
},
|
||||
0.58,
|
||||
);
|
||||
tl.to(flash, { x: 4080, duration: 0.72, ease: "power2.inOut" }, 3.42);
|
||||
tl.to(shell, { y: 170, opacity: 0, duration: 0.34, ease: "power3.in" }, 6.62);
|
||||
|
||||
window.__timelines["news-ticker"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "news-ticker",
|
||||
"type": "hyperframes:block",
|
||||
"title": "News Ticker",
|
||||
"description": "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.",
|
||||
"tags": ["lower-third", "overlay", "news", "ticker"],
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 7,
|
||||
"files": [
|
||||
{
|
||||
"path": "news-ticker.html",
|
||||
"target": "compositions/news-ticker.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -175,6 +175,54 @@
|
||||
"name": "yt-lower-third",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "news-ticker",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "lt-accent-underline",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "lt-bold-block",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "lt-clean-bar",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "lt-color-block",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "lt-dark-card",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "lt-kicker-name",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "lt-mask-reveal",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "lt-side-rule",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "lt-soft-pill",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "lt-stack-bars",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "lower-third-bild",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "x-post",
|
||||
"type": "hyperframes:block"
|
||||
|
||||
@@ -523,12 +523,13 @@ function main(): void {
|
||||
Captions: 1,
|
||||
"HTML-in-Canvas": 2,
|
||||
"Social Overlays": 3,
|
||||
"Shader Transitions": 4,
|
||||
"CSS Transitions": 5,
|
||||
Showcases: 6,
|
||||
Data: 7,
|
||||
Effects: 8,
|
||||
Blocks: 9,
|
||||
"Lower Thirds": 4,
|
||||
"Shader Transitions": 5,
|
||||
"CSS Transitions": 6,
|
||||
Showcases: 7,
|
||||
Data: 8,
|
||||
Effects: 9,
|
||||
Blocks: 10,
|
||||
};
|
||||
|
||||
// fallow-ignore-next-line complexity
|
||||
@@ -543,6 +544,7 @@ function main(): void {
|
||||
// they group separately from the static code-snippet themes.
|
||||
if (tags.includes("code-animation")) return "Code Animations";
|
||||
// Single-tag mapping
|
||||
if (tags.includes("lower-third")) return "Lower Thirds";
|
||||
if (tags.includes("social")) return "Social Overlays";
|
||||
if (tags.includes("transition"))
|
||||
return entry.type === "component" ? "Effects" : "CSS Transitions";
|
||||
|
||||
Reference in New Issue
Block a user