Jonathon's AI Wiki

HyperFrames Catalog — Maps & Data Visualization

8 min read

Source: HeyGen HyperFrames catalog — maps & data viz (https://hyperframes.heygen.com/catalog), pulled 2026-06-27; pages archived under ai-research/hyperframes-block-*.md.

The data-driven slice of the HyperFrames catalog: animated charts (data-chart), flowcharts (landscape + portrait), and a family of animated maps — four US variants (choropleth, bubble, flow-arc, hex grid), a world choropleth, a Spain choropleth, plus two prompt-generated showcase map animations (NYC→Paris flight, North Korea zoom). Each is a self-contained hyperframes:composition you install with npx hyperframes add <slug> and mount on a host-composition track. Critically, none of these catalog pages document a per-block “data prop” — the data-* attributes are timing/embedding only; the values each block visualizes live inside the installed composition HTML, edited there directly.^[inferred — the block pages document install + timing attributes only; the data-shape conclusion is corroborated by the hyperframes-block-catalog Open Question, which notes per-block content passing is “not specified on the fetched block pages”]

Key Takeaways

  • Install is uniform: npx hyperframes add <slug> copies one compositions/<slug>.html into your project (the showcase maps also copy raster + audio assets). The HTML is yours to edit afterward.
  • Mounting is uniform too — every block is referenced from a host composition by the same attribute set: data-composition-id, data-composition-src, data-start, data-duration, data-track-index, data-width, data-height. These are timing/placement attributes, identical to every other catalog block (see hyperframes-block-catalog).
  • There is no documented data API for these blocks. To change chart values, choropleth fills, city markers, or arc endpoints, edit the installed compositions/<slug>.html directly.^[inferred] HyperFrames’ framework-wide Variables primitive (data-composition-variables) is the general parameterization escape hatch, but these catalog pages do not show any of these blocks declaring variables.
  • Maps split into three rendering styles: pure inline SVG + GSAP (us-map, us-map-hex), D3 geographic projections (world-map = Natural Earth, spain-map = conic conformal), and realistic raster + SFX showcases (nyc-paris-flight, north-korea-locked-down).
  • The US map family is composable. us-map-bubble and us-map-flow are explicitly designed to layer over the base us-map (bubbles/arcs on a higher track over the choropleth base).
  • Variants map to intent: choropleth = value-by-region shading; bubble = proportional city markers; flow = origin→destination arcs; hex = equal-weight tile grid (every state same size, removes area bias).
  • Most blocks are 1920×1080; flowchart-vertical is the lone portrait piece at 1440×2560. Durations run 6–15s; seed data-duration from each block’s default, then tune.
  • Two showcase maps ship their source prompt (by Stronkter) — reusable natural-language templates for “Apple-style realistic map + plane route + SFX” and “kinetic news-style country zoom with scribble annotation.”

Maps & Data Viz Blocks

Quick reference (all are Type: Block, install via npx hyperframes add <slug>):

BlockslugDimensionsDurationTags
Data Chartdata-chart1920×108015sdata chart statistics
Flowchartflowchart1920×108012sdiagram flowchart interactive
Flowchart Verticalflowchart-vertical1440×256012sdiagram flowchart interactive portrait
US Mapus-map1920×108012sdata map geography usa choropleth
US Bubble Mapus-map-bubble1920×108012sdata map usa bubble cities
US Flow Mapus-map-flow1920×108012sdata map usa flow connections arcs
US Hex Grid Mapus-map-hex1920×108010sdata map usa hexgrid tilegrid
World Mapworld-map1920×108014sdata map geography world choropleth
Spain Mapspain-map1920×108012sdata map geography spain europe choropleth
NYC Paris Flightnyc-paris-flight1920×10806sshowcase travel map youtube sfx
North Korea Locked Downnorth-korea-locked-down1920×10807sshowcase map annotation youtube kinetic

Data Chart (data-chart)

  • Renders: an animated bar + line chart with staggered reveal, NYT-style typography, and value labels.
  • Tags: data chart statistics. Native size 1920×1080, default 15s.
  • Data shape: no documented data prop. The catalog .md endpoint returned an empty Usage code fence on 2026-06-26; the only recovered markup is the standard host-composition embed (no series/axis schema is published). Chart values, series, and labels are edited directly in compositions/data-chart.html.^[inferred — the empty Usage fence is extracted fact; that values live in the composition HTML is the catalog pattern, not stated on this page]
  • Usage: <div data-composition-id="data-chart" data-composition-src="compositions/data-chart.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>

Flowchart (flowchart)

  • Renders: an animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and a “typing correction” effect.
  • Tags: diagram flowchart interactive. 1920×1080, 12s.
  • Data shape: none published; node text and branch structure are edited in compositions/flowchart.html.^[inferred]
  • Usage: mount with data-composition-id="flowchart", data-duration="12", 1920×1080.

Flowchart Vertical (flowchart-vertical)

  • Renders: the portrait variant of the decision tree — same SVG connectors, sticky-note nodes, cursor interaction, and typing correction, reflowed for vertical/social.
  • Tags: diagram flowchart interactive portrait. 1440×2560 (the only portrait block here), 12s.
  • Data shape: none published; edit compositions/flowchart-vertical.html.^[inferred]
  • Usage: mount with data-composition-id="flowchart-vertical", data-width="1440" data-height="2560", data-duration="12".

US Map (us-map)

  • Renders: an animated US choropleth with staggered state reveals, value labels, and a gradient legend — pure inline SVG with GSAP (no D3 dependency).
  • Tags: data map geography usa choropleth. 1920×1080, 12s.
  • Data shape: per-state values are set in compositions/us-map.html; no external data prop is documented.^[inferred] This is the base layer the bubble and flow variants compose over.
  • Usage: mount with data-composition-id="us-map", data-duration="12", 1920×1080.

US Bubble Map (us-map-bubble)

  • Renders: an animated US bubble map — proportional city markers, value callouts, and connection lines. Explicitly composable with us-map (designed to overlay the base choropleth).
  • Tags: data map geography usa bubble cities. 1920×1080, 12s.
  • Data shape: city coordinates, bubble magnitudes, and callouts are edited in compositions/us-map-bubble.html.^[inferred] Put it on a higher data-track-index than us-map to stack the bubbles over the base.
  • Usage: mount with data-composition-id="us-map-bubble", data-duration="12", 1920×1080.

US Flow Map (us-map-flow)

  • Renders: animated connection arcs between US cities over a base map — a composable origin→destination flow visualization (migration, shipping, network/traffic flows).
  • Tags: data map geography usa flow connections arcs. 1920×1080, 12s.
  • Data shape: arc origin/destination pairs are edited in compositions/us-map-flow.html.^[inferred] Like the bubble map, composable on a track above us-map.
  • Usage: mount with data-composition-id="us-map-flow", data-duration="12", 1920×1080.

US Hex Grid Map (us-map-hex)

  • Renders: an animated hexagonal tile-grid map — each state is an equal-weight hex with a data fill and an abbreviation label (removes the small-state visibility / large-state area-bias problem of a geographic choropleth).
  • Tags: data map geography usa hexgrid tilegrid. 1920×1080, 10s (shortest map).
  • Data shape: per-state fills/values are edited in compositions/us-map-hex.html.^[inferred]
  • Usage: mount with data-composition-id="us-map-hex", data-duration="10", 1920×1080.

World Map (world-map)

  • Renders: an animated world choropleth with country-by-country reveal, tooltip labels, and a rotating globe inset — D3 Natural Earth projection.
  • Tags: data map geography world choropleth. 1920×1080, 14s (longest map, to accommodate the country-by-country sweep).
  • Data shape: per-country values are edited in compositions/world-map.html.^[inferred]
  • Usage: mount with data-composition-id="world-map", data-duration="14", 1920×1080.

Spain Map (spain-map)

  • Renders: an animated Spain choropleth by autonomous community, with staggered reveals and a gradient legend — D3 conic conformal projection (the standard projection for Spain).
  • Tags: data map geography spain europe choropleth. 1920×1080, 12s. The one sub-national-region map in the set — a template for any country-level choropleth.
  • Data shape: per-community values are edited in compositions/spain-map.html.^[inferred]
  • Usage: mount with data-composition-id="spain-map", data-duration="12", 1920×1080.

NYC Paris Flight (nyc-paris-flight)

  • Renders: an Apple-style, realistic map animation — a plane flying New York → Paris, a marker circle, a landing “pop,” and built-in sound effects; ends on a white-screen cut. Created by Stronkter.
  • Tags: showcase travel map youtube sfx. 1920×1080, 6s.
  • Ships assets: assets/map-nyc-paris.png (realistic raster map) and assets/sfx-mix.wav (the sound mix) — not just an HTML file. A worked example of a route-animation showcase with bundled audio.
  • Data shape: none — it’s a fixed showcase scene, not a data template; remix by editing the HTML/assets. The page includes the full natural-language Source Prompt that generated it (reusable as a prompt template).
  • Usage: mount with data-composition-id="nyc-paris-flight", data-duration="6", 1920×1080.

North Korea Locked Down (north-korea-locked-down)

  • Renders: a realistic map zoom into North Korea with a red scribble-style circle around the country, a “locked down” pop-up label, and a reddish editorial color wash — kinetic, YouTube/news style. Created by Stronkter.
  • Tags: showcase map annotation youtube kinetic. 1920×1080, 7s.
  • Ships asset: assets/korea-map.png (realistic raster map) alongside the HTML.
  • Data shape: none — a fixed annotated-zoom showcase; remix by editing the HTML/asset. Includes its generating Source Prompt (a template for “realistic country zoom + scribble annotation + kinetic text + color wash”).
  • Usage: mount with data-composition-id="north-korea-locked-down", data-duration="7", 1920×1080.

Try It

  • Stack a composable US map: npx hyperframes add us-map then npx hyperframes add us-map-bubble; mount us-map on data-track-index="1" and us-map-bubble on a higher track in index.html, then npx hyperframes preview to see bubbles render over the choropleth.
  • Pick the right map for your data: value-by-state → us-map (or us-map-hex when small states get lost); city magnitudes → us-map-bubble; movement between places → us-map-flow; non-US → world-map or spain-map (the sub-national-region template).
  • Re-data a chart/map: after npx hyperframes add data-chart, open compositions/data-chart.html and edit the values in place — there is no --variables data API documented for these blocks.^[inferred]
  • Reuse a showcase prompt: copy the Source Prompt from nyc-paris-flight or north-korea-locked-down and adapt it (swap cities/country, timing, label) to generate a new realistic-map showcase with Claude Design / the HyperFrames agent.
  • Confirm dimensions before mounting: keep flowchart-vertical at 1440×2560 and everything else at 1920×1080; seed data-duration from the table above, then tune on the timeline.

Graph View

Backlinks