mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 10:06:21 +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: "World Map"
|
||
description: "Animated world choropleth with country-by-country reveal — D3 Natural Earth projection"
|
||
---
|
||
|
||
# World Map
|
||
|
||
Animated world choropleth with country-by-country reveal, gradient legend, and highlight pulses on top GDP countries — D3 Natural Earth projection with GSAP timeline.
|
||
|
||
`data` `map` `geography` `world` `choropleth`
|
||
|
||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/world-map.mp4" poster="/images/catalog/blocks/world-map.png" autoPlay muted loop playsInline />
|
||
|
||
## Install
|
||
|
||
<CodeGroup>
|
||
|
||
```bash Terminal
|
||
npx hyperframes add world-map
|
||
```
|
||
|
||
</CodeGroup>
|
||
|
||
## Details
|
||
|
||
| Property | Value |
|
||
| --- | --- |
|
||
| Type | Block |
|
||
| Dimensions | 1920×1080 |
|
||
| Duration | 14s |
|
||
|
||
## Files
|
||
|
||
| File | Target | Type |
|
||
| --- | --- | --- |
|
||
| `world-map.html` | `compositions/world-map.html` | hyperframes:composition |
|
||
|
||
## Usage
|
||
|
||
After installing, add the block to your host composition:
|
||
|
||
```html
|
||
<div data-composition-id="world-map" data-composition-src="compositions/world-map.html" data-start="0" data-duration="14" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||
```
|