SHAHNAB AHMED's banner

SHAHNAB AHMED

@AhmedShahnab • 1,350 subscribers

Shorts

Transparent Globe Project- It’s finally complete! 10 unique interactive 3D globes, each visualizing a completely different global dataset in real time. From river flows and seismic activity to population density, global inequality, satellite constellations, and even Sonic Nomad roaming the planet with live music. Every globe is transparent, responsive, and built from scratch to feel alive. #CreativeCoding Three.js React-three-fiber #DataVisualization #WebGL #GenerativeArt #BuildInPublic

Transparent Globe Project- It’s finally complete! 10 unique interactive 3D globes, each visualizing a completely different global dataset in real time. From river flows and seismic activity to population density, global inequality, satellite constellations, and even Sonic Nomad roaming the planet with live music. Every globe is transparent, responsive, and built from scratch to feel alive. #CreativeCoding Three.js React-three-fiber #DataVisualization #WebGL #GenerativeArt #BuildInPublic

37,440 views

What if browser windows could feel each other? Interaction - open multiple windows, drag them over each other, and watch Just custom GLSL + stencil buffers making windows interact like living organisms. Like/ RT if you like it #CreativeCoding Three.js React-three-fiber #WebGL #GLSL #Frontend #TechArt #Interaction

What if browser windows could feel each other? Interaction - open multiple windows, drag them over each other, and watch Just custom GLSL + stencil buffers making windows interact like living organisms. Like/ RT if you like it #CreativeCoding Three.js React-three-fiber #WebGL #GLSL #Frontend #TechArt #Interaction

29,198 views

What if you could draw ANY image using real city streets? latest experiment: Upload any picture → the app detects its edges → then autonomous agent trace and fill the image using actual roads from OpenStreetMap. Agents draws the outlines and fills the interior in green. The city itself becomes your canvas. Built with React 19 + DeckGL + MapLibre + Overpass API Like/ RT to show support. #CreativeCoding #GenerativeArt #OpenStreetMap #DataViz #Maps #React #BuildingInPublic #UrbanArt

What if you could draw ANY image using real city streets? latest experiment: Upload any picture → the app detects its edges → then autonomous agent trace and fill the image using actual roads from OpenStreetMap. Agents draws the outlines and fills the interior in green. The city itself becomes your canvas. Built with React 19 + DeckGL + MapLibre + Overpass API Like/ RT to show support. #CreativeCoding #GenerativeArt #OpenStreetMap #DataViz #Maps #React #BuildingInPublic #UrbanArt

16,661 views

$The world is fractured by wealth- a 3D fragile map of our divided world. 3D holographic globe that visualizes global economic inequality using the Gini Index data from World Bank. Spin the globe. Zoom in on any country. Built as a creative rendition of our economic ecosystem - beautiful, yet broken. #DataVisualization #ThreeJS #React #CreativeCoding #Geospatial #WebGL Three.js React-three-fiber$

The world is fractured by wealth- a 3D fragile map of our divided world. 3D holographic globe that visualizes global economic inequality using the Gini Index data from World Bank. Spin the globe. Zoom in on any country. Built as a creative rendition of our economic ecosystem - beautiful, yet broken. #DataVisualization #ThreeJS #React #CreativeCoding #Geospatial #WebGL Three.js React-three-fiber

14,507 views

Neural Cartography - a real-time city mapping engine powered by distributed rendering agents Agents work in parallel. City name gets drawn in the center. Urban fabric assembles around it. The idea behind Neural Cartography - a WebGL visualization where 7 specialized agents are dispatched simultaneously to reconstruct any city from raw geospatial data, tracing roads, waterways, railways, and city boundaries in real-time - right in your browser. #CreativeCoding #ThreeJS #ReactThreeFiber #DataVisualization #Geospatial #AgenticAI React-three-fiber Three.js #builders

Neural Cartography - a real-time city mapping engine powered by distributed rendering agents Agents work in parallel. City name gets drawn in the center. Urban fabric assembles around it. The idea behind Neural Cartography - a WebGL visualization where 7 specialized agents are dispatched simultaneously to reconstruct any city from raw geospatial data, tracing roads, waterways, railways, and city boundaries in real-time - right in your browser. #CreativeCoding #ThreeJS #ReactThreeFiber #DataVisualization #Geospatial #AgenticAI React-three-fiber Three.js #builders

10,197 views

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

Bored of boring flat heatmaps? Introducing Topographical Explorer that turns any country into a real-time tactile landscape Search any country → watch real elevation data come alive as thousands of satisfying 3D blocks. Built entirely client-side with: - React Three Fiber + Three.js - AWS Terrain Tiles + OpenStreetMap - Real-time boundary Three.js React-three-fiber #DataVisualization #Geospatial #CreativeCoding #BuildInPublic

Bored of boring flat heatmaps? Introducing Topographical Explorer that turns any country into a real-time tactile landscape Search any country → watch real elevation data come alive as thousands of satisfying 3D blocks. Built entirely client-side with: - React Three Fiber + Three.js - AWS Terrain Tiles + OpenStreetMap - Real-time boundary Three.js React-three-fiber #DataVisualization #Geospatial #CreativeCoding #BuildInPublic

612,776 views • 1 month ago

I wanted to see what would happen if we stripped away pixels and polygons from a video, and instead tried to recreate moving footage using a single, unbroken, continuous line. Introducing SINGLETHREAD- experimental web app that transforms any video into a real-time, 3D oscilloscope-style sculpture, running entirely in the browser Tech Stack: React + Vite | Three.js + React-three-fiber + Postprocessing (Bloom glow) #CreativeCoding #ThreeJS #ReactThreeFiber #WebGL #GenerativeArt #TechArt #Frontend #3D

I wanted to see what would happen if we stripped away pixels and polygons from a video, and instead tried to recreate moving footage using a single, unbroken, continuous line. Introducing SINGLETHREAD- experimental web app that transforms any video into a real-time, 3D oscilloscope-style sculpture, running entirely in the browser Tech Stack: React + Vite | Three.js + React-three-fiber + Postprocessing (Bloom glow) #CreativeCoding #ThreeJS #ReactThreeFiber #WebGL #GenerativeArt #TechArt #Frontend #3D

74,011 views • 2 months ago

Introducing Operation Matrix Because Matrix operations generally break kids’ brains on whiteboards… Matrices aren't just numbers- they are transformations in space Now can actually SEE the geometry: every addition, multiplication, inverse, eigenvalue, and eigenvector becomes a transformation in real-time space. What it visualizes: • Basic ops (add/subtract/multiply) • Transpose, Invert, Adjugated • Cross products + Determinant • Matrix powers + Eigenvalues/Eigenvectors #LinearAlgebra #CreativeCoding #ThreeJS #ReactThreeFiber #MathVisualization #EdTech #WebGL #STEM React-three-fiber Three.js

Introducing Operation Matrix Because Matrix operations generally break kids’ brains on whiteboards… Matrices aren't just numbers- they are transformations in space Now can actually SEE the geometry: every addition, multiplication, inverse, eigenvalue, and eigenvector becomes a transformation in real-time space. What it visualizes: • Basic ops (add/subtract/multiply) • Transpose, Invert, Adjugated • Cross products + Determinant • Matrix powers + Eigenvalues/Eigenvectors #LinearAlgebra #CreativeCoding #ThreeJS #ReactThreeFiber #MathVisualization #EdTech #WebGL #STEM React-three-fiber Three.js

58,501 views • 2 months ago

What if every city can create its own songs with lyrics? (Sound on) Meet "Song of the City" turns real urban life data into music with Google Lyria 3. We map the actual rhythm of the city - morning coffee rushes, office flows, evening nightlife, late-night subway energy - and feed it into Google Lyria 3 AI model to generate the song. The result? A generative soundtrack that changes with the city itself. Playing: Song of the City- New York Like/Repost if want more experimental project :) #GenerativeAI #Lyria #CreativeCoding #GeoSpatial #MusicTech GoogleAIStudio Three.js React-three-fiber

What if every city can create its own songs with lyrics? (Sound on) Meet "Song of the City" turns real urban life data into music with Google Lyria 3. We map the actual rhythm of the city - morning coffee rushes, office flows, evening nightlife, late-night subway energy - and feed it into Google Lyria 3 AI model to generate the song. The result? A generative soundtrack that changes with the city itself. Playing: Song of the City- New York Like/Repost if want more experimental project :) #GenerativeAI #Lyria #CreativeCoding #GeoSpatial #MusicTech GoogleAIStudio Three.js React-three-fiber

21,215 views • 1 month ago

Ditched boring flat maps forever. Population Density 3D map- This is a premium glass-like orb floating in a quantum black void, with glowing spikes for every major city - taller + brighter = higher population. Rotate it. Zoom in. It was a fun exercise balancing 3D performance with clean, minimal UI. Tech Stack: React + Vite | Three.js | Tailwind CSS | Lucide React What do you think of the dark aesthetic? Like if you’re impressed Repost if you’re a dev who loves creative coding #React #ThreeJS #DataVisualization #WebGL #CreativeCoding #Frontend #TailwindCSS #UIUX

Ditched boring flat maps forever. Population Density 3D map- This is a premium glass-like orb floating in a quantum black void, with glowing spikes for every major city - taller + brighter = higher population. Rotate it. Zoom in. It was a fun exercise balancing 3D performance with clean, minimal UI. Tech Stack: React + Vite | Three.js | Tailwind CSS | Lucide React What do you think of the dark aesthetic? Like if you’re impressed Repost if you’re a dev who loves creative coding #React #ThreeJS #DataVisualization #WebGL #CreativeCoding #Frontend #TailwindCSS #UIUX

29,507 views • 2 months ago

Beneath our feet, the Earth pulses with fiery veins- Magma rivers carving the planet's secrets. 3D interactive globe of global volcanoes like "Veins of the Earth"! Built w/ React + TypeScript + Three.js + React-three-fiber Data Source: Smithsonian global volcanism program Note- The volcano lines are not actual paths just a creative rendition Like/RT if you it's interesting.. #Volcano #DataViz #ThreeJS #Geospatial #CreativeCoding #GAI #VisualArt #climate

Beneath our feet, the Earth pulses with fiery veins- Magma rivers carving the planet's secrets. 3D interactive globe of global volcanoes like "Veins of the Earth"! Built w/ React + TypeScript + Three.js + React-three-fiber Data Source: Smithsonian global volcanism program Note- The volcano lines are not actual paths just a creative rendition Like/RT if you it's interesting.. #Volcano #DataViz #ThreeJS #Geospatial #CreativeCoding #GAI #VisualArt #climate

32,742 views • 3 months ago

Sonic Nomad: A routing agent that’s slowly visiting every country on Earth… and playing that country’s current #1 song when it arrives. It uses a simple Nearest Neighbor algorithm to always fly to the closest unvisited country next. No backend. No database. Just React, Three.js , and live Apple Music RSS feeds. #SonicNomad #CreativeCoding #ThreeJS #MusicTech #BuildInPublic #WebGL #GenerativeArt

Sonic Nomad: A routing agent that’s slowly visiting every country on Earth… and playing that country’s current #1 song when it arrives. It uses a simple Nearest Neighbor algorithm to always fly to the closest unvisited country next. No backend. No database. Just React, Three.js , and live Apple Music RSS feeds. #SonicNomad #CreativeCoding #ThreeJS #MusicTech #BuildInPublic #WebGL #GenerativeArt

13,043 views • 1 month ago

Just wanted wanted to see what a mega satellite constellation really looks like - and why SpaceX uses completely different orbital angles (53°, 70°, 97° polar, 43° etc.) Switch shells on/off and finally helped to understand why each inclination exists- Data visualized using over 10,000+ Starlink satellites orbiting Earth with data from CelesTrak. #Starlink #SpaceTech Three.js React-three-fiber #DataVisualization #WebGL #CreativeCoding #SatelliteTracking

Just wanted wanted to see what a mega satellite constellation really looks like - and why SpaceX uses completely different orbital angles (53°, 70°, 97° polar, 43° etc.) Switch shells on/off and finally helped to understand why each inclination exists- Data visualized using over 10,000+ Starlink satellites orbiting Earth with data from CelesTrak. #Starlink #SpaceTech Three.js React-three-fiber #DataVisualization #WebGL #CreativeCoding #SatelliteTracking

13,165 views • 1 month ago

No more content to load