mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-15 13:58:20 +00:00
feat(registry): add motion primitives catalog
This commit is contained in:
Miguel Ángel
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Bottom Up Letters"
|
||||
description: "Splits text into letters and reveals each glyph from below with deterministic staggered timing"
|
||||
---
|
||||
|
||||
# Bottom Up Letters
|
||||
|
||||
Splits text into letters and reveals each glyph from below with deterministic staggered timing
|
||||
|
||||
`motion-primitive` `text` `letters` `reveal`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/bottom-up-letters.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/bottom-up-letters.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add bottom-up-letters
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Component |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `bottom-up-letters.html` | `compositions/components/bottom-up-letters.html` | hyperframes:snippet |
|
||||
|
||||
## Usage
|
||||
|
||||
Open `compositions/components/bottom-up-letters.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Dynamic Grid"
|
||||
description: "A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes"
|
||||
---
|
||||
|
||||
# Dynamic Grid
|
||||
|
||||
A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes
|
||||
|
||||
`motion-primitive` `background` `grid` `ui`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dynamic-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dynamic-grid.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add dynamic-grid
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Component |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `dynamic-grid.html` | `compositions/components/dynamic-grid.html` | hyperframes:snippet |
|
||||
|
||||
## Usage
|
||||
|
||||
Open `compositions/components/dynamic-grid.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Fade Through"
|
||||
description: "A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer"
|
||||
---
|
||||
|
||||
# Fade Through
|
||||
|
||||
A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer
|
||||
|
||||
`motion-primitive` `transition` `fade` `scene`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/fade-through.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/fade-through.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add fade-through
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Component |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `fade-through.html` | `compositions/components/fade-through.html` | hyperframes:snippet |
|
||||
|
||||
## Usage
|
||||
|
||||
Open `compositions/components/fade-through.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Inline Highlight"
|
||||
description: "A clean marker-style inline highlight that animates behind text using a CSS scale variable"
|
||||
---
|
||||
|
||||
# Inline Highlight
|
||||
|
||||
A clean marker-style inline highlight that animates behind text using a CSS scale variable
|
||||
|
||||
`motion-primitive` `text` `highlight` `caption`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/inline-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/inline-highlight.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add inline-highlight
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Component |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `inline-highlight.html` | `compositions/components/inline-highlight.html` | hyperframes:snippet |
|
||||
|
||||
## Usage
|
||||
|
||||
Open `compositions/components/inline-highlight.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Number Wheel"
|
||||
description: "A rolling digit counter primitive for metrics, prices, counts, and scoreboards"
|
||||
---
|
||||
|
||||
# Number Wheel
|
||||
|
||||
A rolling digit counter primitive for metrics, prices, counts, and scoreboards
|
||||
|
||||
`motion-primitive` `number` `counter` `data`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-wheel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-wheel.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add number-wheel
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Component |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `number-wheel.html` | `compositions/components/number-wheel.html` | hyperframes:snippet |
|
||||
|
||||
## Usage
|
||||
|
||||
Open `compositions/components/number-wheel.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Simulated Cursor"
|
||||
description: "A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos"
|
||||
---
|
||||
|
||||
# Simulated Cursor
|
||||
|
||||
A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos
|
||||
|
||||
`motion-primitive` `cursor` `ui` `walkthrough`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/simulated-cursor.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/simulated-cursor.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add simulated-cursor
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Component |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `simulated-cursor.html` | `compositions/components/simulated-cursor.html` | hyperframes:snippet |
|
||||
|
||||
## Usage
|
||||
|
||||
Open `compositions/components/simulated-cursor.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Soft Blur In"
|
||||
description: "A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts"
|
||||
---
|
||||
|
||||
# Soft Blur In
|
||||
|
||||
A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts
|
||||
|
||||
`motion-primitive` `text` `reveal` `blur`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/soft-blur-in.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/soft-blur-in.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add soft-blur-in
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Component |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `soft-blur-in.html` | `compositions/components/soft-blur-in.html` | hyperframes:snippet |
|
||||
|
||||
## Usage
|
||||
|
||||
Open `compositions/components/soft-blur-in.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: "Tracking In"
|
||||
description: "A precise letter-spacing reveal for premium headings and interface labels"
|
||||
---
|
||||
|
||||
# Tracking In
|
||||
|
||||
A precise letter-spacing reveal for premium headings and interface labels
|
||||
|
||||
`motion-primitive` `text` `reveal` `typography`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tracking-in.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tracking-in.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add tracking-in
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Component |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `tracking-in.html` | `compositions/components/tracking-in.html` | hyperframes:snippet |
|
||||
|
||||
## Usage
|
||||
|
||||
Open `compositions/components/tracking-in.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
|
||||
@@ -238,6 +238,19 @@
|
||||
"catalog/blocks/world-map"
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Motion Primitives",
|
||||
"pages": [
|
||||
"catalog/components/bottom-up-letters",
|
||||
"catalog/components/dynamic-grid",
|
||||
"catalog/components/fade-through",
|
||||
"catalog/components/inline-highlight",
|
||||
"catalog/components/number-wheel",
|
||||
"catalog/components/simulated-cursor",
|
||||
"catalog/components/soft-blur-in",
|
||||
"catalog/components/tracking-in"
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Effects",
|
||||
"pages": [
|
||||
|
||||
@@ -41,6 +41,20 @@
|
||||
"href": "/catalog/blocks/blue-sweater-intro-video",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
|
||||
},
|
||||
{
|
||||
"name": "bottom-up-letters",
|
||||
"type": "component",
|
||||
"title": "Bottom Up Letters",
|
||||
"description": "Splits text into letters and reveals each glyph from below with deterministic staggered timing",
|
||||
"tags": [
|
||||
"motion-primitive",
|
||||
"text",
|
||||
"letters",
|
||||
"reveal"
|
||||
],
|
||||
"href": "/catalog/components/bottom-up-letters",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/bottom-up-letters.png"
|
||||
},
|
||||
{
|
||||
"name": "caption-blend-difference",
|
||||
"type": "component",
|
||||
@@ -337,6 +351,34 @@
|
||||
"href": "/catalog/blocks/domain-warp-dissolve",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
|
||||
},
|
||||
{
|
||||
"name": "dynamic-grid",
|
||||
"type": "component",
|
||||
"title": "Dynamic Grid",
|
||||
"description": "A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes",
|
||||
"tags": [
|
||||
"motion-primitive",
|
||||
"background",
|
||||
"grid",
|
||||
"ui"
|
||||
],
|
||||
"href": "/catalog/components/dynamic-grid",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dynamic-grid.png"
|
||||
},
|
||||
{
|
||||
"name": "fade-through",
|
||||
"type": "component",
|
||||
"title": "Fade Through",
|
||||
"description": "A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer",
|
||||
"tags": [
|
||||
"motion-primitive",
|
||||
"transition",
|
||||
"fade",
|
||||
"scene"
|
||||
],
|
||||
"href": "/catalog/components/fade-through",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/fade-through.png"
|
||||
},
|
||||
{
|
||||
"name": "flash-through-white",
|
||||
"type": "block",
|
||||
@@ -414,6 +456,20 @@
|
||||
"href": "/catalog/components/grid-pixelate-wipe",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png"
|
||||
},
|
||||
{
|
||||
"name": "inline-highlight",
|
||||
"type": "component",
|
||||
"title": "Inline Highlight",
|
||||
"description": "A clean marker-style inline highlight that animates behind text using a CSS scale variable",
|
||||
"tags": [
|
||||
"motion-primitive",
|
||||
"text",
|
||||
"highlight",
|
||||
"caption"
|
||||
],
|
||||
"href": "/catalog/components/inline-highlight",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/inline-highlight.png"
|
||||
},
|
||||
{
|
||||
"name": "motion-blur",
|
||||
"type": "component",
|
||||
@@ -580,6 +636,20 @@
|
||||
"href": "/catalog/blocks/north-korea-locked-down",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png"
|
||||
},
|
||||
{
|
||||
"name": "number-wheel",
|
||||
"type": "component",
|
||||
"title": "Number Wheel",
|
||||
"description": "A rolling digit counter primitive for metrics, prices, counts, and scoreboards",
|
||||
"tags": [
|
||||
"motion-primitive",
|
||||
"number",
|
||||
"counter",
|
||||
"data"
|
||||
],
|
||||
"href": "/catalog/components/number-wheel",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-wheel.png"
|
||||
},
|
||||
{
|
||||
"name": "nyc-paris-flight",
|
||||
"type": "block",
|
||||
@@ -689,6 +759,34 @@
|
||||
"href": "/catalog/components/shimmer-sweep",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png"
|
||||
},
|
||||
{
|
||||
"name": "simulated-cursor",
|
||||
"type": "component",
|
||||
"title": "Simulated Cursor",
|
||||
"description": "A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos",
|
||||
"tags": [
|
||||
"motion-primitive",
|
||||
"cursor",
|
||||
"ui",
|
||||
"walkthrough"
|
||||
],
|
||||
"href": "/catalog/components/simulated-cursor",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/simulated-cursor.png"
|
||||
},
|
||||
{
|
||||
"name": "soft-blur-in",
|
||||
"type": "component",
|
||||
"title": "Soft Blur In",
|
||||
"description": "A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts",
|
||||
"tags": [
|
||||
"motion-primitive",
|
||||
"text",
|
||||
"reveal",
|
||||
"blur"
|
||||
],
|
||||
"href": "/catalog/components/soft-blur-in",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/soft-blur-in.png"
|
||||
},
|
||||
{
|
||||
"name": "spain-map",
|
||||
"type": "block",
|
||||
@@ -769,6 +867,20 @@
|
||||
"href": "/catalog/blocks/tiktok-follow",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png"
|
||||
},
|
||||
{
|
||||
"name": "tracking-in",
|
||||
"type": "component",
|
||||
"title": "Tracking In",
|
||||
"description": "A precise letter-spacing reveal for premium headings and interface labels",
|
||||
"tags": [
|
||||
"motion-primitive",
|
||||
"text",
|
||||
"reveal",
|
||||
"typography"
|
||||
],
|
||||
"href": "/catalog/components/tracking-in",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tracking-in.png"
|
||||
},
|
||||
{
|
||||
"name": "transitions-3d",
|
||||
"type": "block",
|
||||
|
||||
Reference in New Issue
Block a user