Twitter Firehose — 3D Globe of the Live Internet

A 3D rotating globe with city pins lighting up as a 60-user social network ratios, cancels, and goes viral in real time.

Try it live → Source on GitHub

Built with: three.jsr160single-file

#3d#simulation#living-world

## What this is A single-file three.js demo that turns a 3D rotating globe into a live social-network operations room. Sixty procedural users post into a timeline, trending tags shuffle as topics heat up, and every tweet pulses a city pin you can see from orbit. Then the world events fire — a viral chain, a ratio, a cancel storm, a subtweet war, breaking news — and the director cuts between seven cinematic cameras as the chaos unfolds. ## Why this is mind-blowing It feels like a live ops console, not a demo. The combination of a real 3D globe, projected DOM labels, a reordering trending leaderboard, and engagement counters that climb in real time tricks your brain into watching a platform instead of a script. Every 8–10 minutes the world reseeds with a flash and a brand-new cast of 60 users, brand-new trending topics, and a brand-new dramatic arc — so it never loops the same story twice.

Prompt

Build a single-file three.js r0.160.0 demo that simulates a live X/Twitter
firehose as if you were watching the platform from orbit.

Constraints:
- Single HTML file < 200KB. three.js from unpkg only.
- First line of <body> must be the sentinel <!-- ROUND14_LIVING v1 -->.
- IIFE with strict mode. Track every geometry/material/texture/timer in a
  disposables registry. Reseed the entire world every 8–10 minutes with a
  flash transition. No memory leaks across reseeds.
- Autoplays forever with no input.

Visuals:
- 3D globe with procedural earth texture (ocean + continents), wireframe
  overlay, Fresnel atmospheric glow on a BackSide shader, 1,400 starfield
  points, 38 named city pins.
- When a tweet from a city fires, pulse the pin and project a DOM label
  from 3D to screen-space.
- Director cycles between cams: globe wide, trending zoom, viral zoom,
  cancel event focus, subtweet duel, polar arc, equator pan. Smooth lerp.

Living world:
- 50–70 procedural users with handles, names, verification badges
  (blue/gold), follower counts, canvas-drawn avatars, and one of 7
  stances (techbro, journalist, shitposter, fan, hater, normie, bot).
- Live tweet feed ~1.5 tweets/sec with occasional bursts. Tweet kinds:
  original, quote-tweet, reply, retweet. Engagement counters grow live.
- Trending sidebar of 10 topics that reorder as topics gain or lose heat.
- Live events:
  1. Viral chain — pick a tweet, ramp engagement, spawn focus card,
     insert a new trending tag.
  2. Cancel/Ratio — invert engagement ratio (replies >> likes), spawn
     reply storm.
  3. Breaking news — global ticker, fresh trending tag, multiple cities
     pulse together.
  4. Subtweet war — two users alternate quote-tweets at each other.
  5. Verified drops — gold check appears on a previously unverified user.

UI chrome:
- Top bar: logo, LIVE pulse, UTC clock, tweets-per-second counter.
- Trending sidebar (left).
- Timeline column (right) with newest tweets on top.
- Mira Vance correspondent PIP that calls out events.
- Top tweet ticker along the bottom.
- Camera label badge.

Tone: feels like watching a real platform's live ops dashboard, not a demo.

Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.

Build a single-file three.js r0.160.0 demo that simulates a live X/Twitter
firehose as if you were watching the platform from orbit.

Constraints:
- Single HTML file < 200KB. three.js from unpkg only.
- First line of <body> must be the sentinel <!-- ROUND14_LIVING v1 -->.
- IIFE with strict mode. Track every geometry/material/texture/timer in a
  disposables registry. Reseed the entire world every 8–10 minutes with a
  flash transition. No memory leaks across reseeds.
- Autoplays forever with no input.

Visuals:
- 3D globe with procedural earth texture (ocean + continents), wireframe
  overlay, Fresnel atmospheric glow on a BackSide shader, 1,400 starfield
  points, 38 named city pins.
- When a tweet from a city fires, pulse the pin and project a DOM label
  from 3D to screen-space.
- Director cycles between cams: globe wide, trending zoom, viral zoom,
  cancel event focus, subtweet duel, polar arc, equator pan. Smooth lerp.

Living world:
- 50–70 procedural users with handles, names, verification badges
  (blue/gold), follower counts, canvas-drawn avatars, and one of 7
  stances (techbro, journalist, shitposter, fan, hater, normie, bot).
- Live tweet feed ~1.5 tweets/sec with occasional bursts. Tweet kinds:
  original, quote-tweet, reply, retweet. Engagement counters grow live.
- Trending sidebar of 10 topics that reorder as topics gain or lose heat.
- Live events:
  1. Viral chain — pick a tweet, ramp engagement, spawn focus card,
     insert a new trending tag.
  2. Cancel/Ratio — invert engagement ratio (replies >> likes), spawn
     reply storm.
  3. Breaking news — global ticker, fresh trending tag, multiple cities
     pulse together.
  4. Subtweet war — two users alternate quote-tweets at each other.
  5. Verified drops — gold check appears on a previously unverified user.

UI chrome:
- Top bar: logo, LIVE pulse, UTC clock, tweets-per-second counter.
- Trending sidebar (left).
- Timeline column (right) with newest tweets on top.
- Mira Vance correspondent PIP that calls out events.
- Top tweet ticker along the bottom.
- Camera label badge.

Tone: feels like watching a real platform's live ops dashboard, not a demo.

What I learned shipping it

Procedural cities + 3D-to-screen projection is the cheapest way to make a globe feel populated.
Inverting engagement ratios is more dramatic than just spiking one number — the cancel event proves it.
A trending sidebar that reorders is as much story as the feed itself; viewers track the leaderboard.