SHAHNAB AHMED's banner

SHAHNAB AHMED

@AhmedShahnab • 1,368 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,611 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,227 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,724 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,527 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

617,756 views • 2 months ago

Nothing Fancy... just experimenting and exploring with the available ones before exploring the new trending ones.. The core trick here: ctx.measureText() pre-computes every word into a data object with a baseX, current x, and targetX. Each frame, a 120-segment dragon emits collision nodes with anatomically-computed radii. For every line of text, it projects each node onto the line's Y axis, compute the X exclusion span via √(r² - dy²), merge overlapping intervals, then run a relaxation solver (forward + backward pass) to find stable non-overlapping target positions. Words lerp toward those targets each frame - giving the parting/closing flow you see. Sometimes i feel platform APIs that's already shipped in every browser are still criminally underexplored. #CreativeCoding #Canvas #WebDev #TypeScript #InteractiveDesign #GenerativeArt #Frontend #TechArt

Nothing Fancy... just experimenting and exploring with the available ones before exploring the new trending ones.. The core trick here: ctx.measureText() pre-computes every word into a data object with a baseX, current x, and targetX. Each frame, a 120-segment dragon emits collision nodes with anatomically-computed radii. For every line of text, it projects each node onto the line's Y axis, compute the X exclusion span via √(r² - dy²), merge overlapping intervals, then run a relaxation solver (forward + backward pass) to find stable non-overlapping target positions. Words lerp toward those targets each frame - giving the parting/closing flow you see. Sometimes i feel platform APIs that's already shipped in every browser are still criminally underexplored. #CreativeCoding #Canvas #WebDev #TypeScript #InteractiveDesign #GenerativeArt #Frontend #TechArt

73,622 views • 3 months 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

75,360 views • 4 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,784 views • 3 months ago

Broke from flat maps, Introducing Seismic 3D: Built a "Glass Planet" volumetric viz showing earthquakes DEEP in Earth's crust (10x depth scale for subduction zones)! Tech: React + Three.js via React-three-fiber + USGS Earthquakes API feed. Instanced Mesh for 60FPS on 8K+ events! Like/RT : Tag a friend who geeks out on this & share your thoughts below! #ThreeJS #CreativeCoding #DataViz #earthquake #USGS #ESRI

Broke from flat maps, Introducing Seismic 3D: Built a "Glass Planet" volumetric viz showing earthquakes DEEP in Earth's crust (10x depth scale for subduction zones)! Tech: React + Three.js via React-three-fiber + USGS Earthquakes API feed. Instanced Mesh for 60FPS on 8K+ events! Like/RT : Tag a friend who geeks out on this & share your thoughts below! #ThreeJS #CreativeCoding #DataViz #earthquake #USGS #ESRI

39,933 views • 5 months 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,674 views • 4 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,990 views • 4 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,528 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 • 3 months 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 • 3 months ago

No more content to load