The Digital Skyline

Cloud infrastructure is often a misunderstood concept to the general population. What is the cloud? How does it work? What does it look like? What if you were able to see it, interact with it, live?

Comment

Project Story

About the Project

I built The Digital Skyline because I wanted to turn the usually dry world of cloud infrastructure into something you’d actually want to explore. Inspired by the neon grid landscapes in Tron: Legacy, I set out to showcase what I do in a way that’s both technically solid and visually fun. Behind every skyscraper in this virtual city is a stack of real cloud services arranged like city blocks.

Inspiration

In Tron: Legacy, Sam Flynn enters the digital Grid, a neon world where programs take on life, an AI called CLU fields armies of enforcers, and the line between creator and creation disappears. I loved how that movie turned code into an immersive universe.

Cloud infrastructure can feel just as hidden: engines, control planes, and data streams run behind the scenes. My goals were:

  • Neon-lit clarity: turn Terraform and JSON into glowing districts and roads for immediate understanding.
  • Control versus data plane: mirror CLU’s control core with a central tower and use e-bike animations to show real-time data flow.
  • Hero’s journey: invite users to “enter the Grid,” peel away the code, and follow a guided tour to reclaim understanding of their own systems.

What I Learned

  • Basics of 3D Modeling and Simulation
    I had never worked in 3D before. I learned how to position meshes, set up cameras, and navigate coordinate systems using Three.js and React-three-fiber.
  • Mapping Data to Space
    Turning cloud exports into a city layout taught me how to make abstract data feel intuitive.
  • Story-Driven Interaction
    Building peel-away effects, camera fly-tos, and building-explode animations taught me how to guide users through a technical narrative.
  • Learning New Toolchains Quickly
    I picked up react-three-fiber, @react-three/drei, and react-spring—all integrated into a React and Tailwind setup while solving rendering challenges as I went.

How I Built It

  1. Data Ingestion
    • Users drag and drop a Terraform or JSON export to generate a list of “tenants.”
    • A TypeScript function (generateCityData) assigns realistic positions, environment zones (dev, QA, prod, DR), and resource counts for each building.
  2. 3D Canvas
    • A full-screen Three.js <Canvas> with a grid-textured ground and dawn-tinted sky.
    • Buildings scale in height based on how many services they run; roads connect them.
  3. Interactions and Tour
    • A static code panel peels away to reveal the city.
    • Hovering shows quick info; clicking zooms in and “explodes” a building into its component floors.
    • A TourManager component walks users through core concepts: control plane, network grid, data flow.
  4. Styling and Atmosphere
    • Tailwind CSS for interface panels.
    • HDRI environment maps, directional and hemisphere lighting, subtle fog, animated streetlamps, and blinking windows bring the city to life.

Challenges and Wins

  • Bolt.new Uniform Errors
    Early prototypes crashed due to missing shader uniforms. I started with simple materials in Bolt.new, then refactored back to standard materials locally once the scene was stable.
  • Performance vs. Visual Quality
    Rendering dozens of buildings with shadows, bloom, and fog required instanced meshes and careful light tuning to keep performance at 60 FPS.
  • Iterative Prompt Engineering
    It took many prompt adjustments—refining detail levels and material hints—to get Bolt.new to output reusable code blocks I could build on.
  • Narrative Cohesion
    Adding subtle animations and a guided tour was key to making the experience feel engaging rather than just a collection of boxes.

Next Frontier

The Digital Skyline is just the beginning of a larger vision for an interactive digital landscape where you can:

  • Sync live with AWS, Azure, or GCP for real-time state updates
  • Collaborate with team annotations and shared tours
  • Step into VR for immersive training and planning
  • Extend to broader digital twin ecosystems that connect infrastructure, applications, and business processes in one explorable world

This project marks my first venture into 3D simulation and interactive storytelling. I’m excited to take VisualInfra from prototype to full platform, making complex systems visible and understandable for everyone.

Built With

Share this project:

Updates