mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 18:26:17 +00:00
Miguel Ángel
ae1716d4c1
New block: spain-map — animated Spain choropleth by autonomous community using D3 conic conformal projection with GDP per capita data and red-to-amber color scale. Also switches all map MDX preview URLs from S3 to local paths so they render in mintlify dev without needing S3 upload first.
45 lines
1.2 KiB
Plaintext
45 lines
1.2 KiB
Plaintext
---
|
||
title: "US Flow Map"
|
||
description: "Animated connection arcs between US cities over a base map — composable origin-destination flow visualization"
|
||
---
|
||
|
||
# US Flow Map
|
||
|
||
Animated connection arcs between US cities over a base map — composable origin-destination flow visualization with traveling particles and GSAP-drawn Bezier arcs.
|
||
|
||
`data` `map` `geography` `usa` `flow` `connections` `arcs`
|
||
|
||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/us-map-flow.mp4" poster="/images/catalog/blocks/us-map-flow.png" autoPlay muted loop playsInline />
|
||
|
||
## Install
|
||
|
||
<CodeGroup>
|
||
|
||
```bash Terminal
|
||
npx hyperframes add us-map-flow
|
||
```
|
||
|
||
</CodeGroup>
|
||
|
||
## Details
|
||
|
||
| Property | Value |
|
||
| --- | --- |
|
||
| Type | Block |
|
||
| Dimensions | 1920×1080 |
|
||
| Duration | 12s |
|
||
|
||
## Files
|
||
|
||
| File | Target | Type |
|
||
| --- | --- | --- |
|
||
| `us-map-flow.html` | `compositions/us-map-flow.html` | hyperframes:composition |
|
||
|
||
## Usage
|
||
|
||
After installing, add the block to your host composition:
|
||
|
||
```html
|
||
<div data-composition-id="us-map-flow" data-composition-src="compositions/us-map-flow.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||
```
|