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: "Spain Map"
|
||
description: "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend"
|
||
---
|
||
|
||
# Spain Map
|
||
|
||
Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection with GSAP timeline. GDP per capita data with warm red-to-amber color scale.
|
||
|
||
`data` `map` `geography` `spain` `europe` `choropleth`
|
||
|
||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/spain-map.mp4" poster="/images/catalog/blocks/spain-map.png" autoPlay muted loop playsInline />
|
||
|
||
## Install
|
||
|
||
<CodeGroup>
|
||
|
||
```bash Terminal
|
||
npx hyperframes add spain-map
|
||
```
|
||
|
||
</CodeGroup>
|
||
|
||
## Details
|
||
|
||
| Property | Value |
|
||
| --- | --- |
|
||
| Type | Block |
|
||
| Dimensions | 1920×1080 |
|
||
| Duration | 12s |
|
||
|
||
## Files
|
||
|
||
| File | Target | Type |
|
||
| --- | --- | --- |
|
||
| `spain-map.html` | `compositions/spain-map.html` | hyperframes:composition |
|
||
|
||
## Usage
|
||
|
||
After installing, add the block to your host composition:
|
||
|
||
```html
|
||
<div data-composition-id="spain-map" data-composition-src="compositions/spain-map.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||
```
|