Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Animated US bubble map v1.0.0

Use this resource to present per-city figures on an animated US map

New

  • 365 downloads
  • 136 likes
  • 224 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install us-bubble-map

First time: connect the CLI with

npx --yes palatekit@latest login

The agent adapts the city list (name, latitude, longitude, value) and the value format. The 12-second video draws the states, grows each bubble by value and shows labels and connection lines. It can be combined with the us-flow-map block.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames (npm: hyperframes)
  • Node.js
  • FFmpeg (MP4 rendering)
  • Internet connection (CDN)
Licence
Apache-2.0

Similar resources

View all

What you get

  • us-map-bubble.html: the HyperFrames composition (1920×1080, 12 s) using D3 and GSAP
  • The twenty-city list to replace with your data
  • A block description file (registry-item.json)
  • A preview video and image

Good fit for

  • A client report with sales or audience per US city
  • An educational video on geography or population
  • A market overview for a fundraising deck

Not for

  • A map outside the United States
  • Offline rendering (the base map and libraries come from a CDN)
  • Street-level data

Tags

  • map
  • data
  • usa
  • bubbles

About

You say

"With the us-bubble-map block, show my sales by city: New York 120,000, Chicago 80,000, Austin 45,000."

Map of the United States with proportional bubbles on major cities and their values.

Template published by HeyGen (HyperFrames) under the Apache-2.0 license.

Show more

Prerequisites

You bring
Your US cities and their values and What the value means (residents, sales, visits)
Dependencies
HyperFrames (npm: hyperframes), Node.js, FFmpeg (MP4 rendering), and Internet connection (CDN)

How to use it

  1. Add the block to your HyperFrames project.
  2. Give your cities and values; the agent updates the list and the format.
  3. Preview, then render the video.

Content preview

Files

  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0.8 KB
  • registry-item.json0.8 KB
  • us-map-bubble.html15.6 KB

Origin and licence

Modified by PalateKit

Author
HeyGen (HyperFrames)
Source
github.com/heygen-com/hyperframes/tree/2c3d1e07fe63d4a2d67d63a3e29d4ad73e291d8e/registry/blocks/us-map-bubble
Licence
Apache-2.0

Notice

Version modifiée de « US Bubble Map » (HeyGen (HyperFrames), Apache-2.0) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Do I need to be online to render?

Yes: the base map (us-atlas), D3, GSAP and the Inter font are loaded from public CDNs at render time.

How do I add a city?

Add an entry with its name, latitude, longitude and value, then adjust the radius scale if the value falls outside the planned range.