AI Universe Directory SIte

• 

  AI Universe

Inspiration

We were inspired by the idea of turning the complex and often abstract world of Artificial Intelligence into something visual, interactive, and awe-inspiring. Instead of listing AI technologies, we wanted to invite users to explore them—like discovering planets in a galaxy. Sci-fi films, futuristic UI dashboards, and the mystery of space exploration all came together to shape this concept. We imagined a universe where each planet represents a different AI field, with its own personality and visual identity.

What it does

AI Universe Directory is a single-page interactive website that lets users explore a visually animated AI multiverse. Each planet represents a specific AI domain like music, medicine, or cybersecurity. When users hover, they get dynamic feedback like glow effects and orbit shifts. Clicking a planet zooms into a themed, full-screen section with animations and information about that field. The entire site is designed to feel like a galactic control center, combining storytelling with technology.

How we built it

We used modern web technologies to bring this vision to life: Three.js for 3D-inspired space visuals and orbiting planets GSAP + ScrollTrigger for smooth transitions and parallax effects Framer Motion and Lottie for UI animations and micro-interactions HTML, CSS, JavaScript as the core framework Web Audio API for ambient hover sounds and background effects SVG & Canvas layers for floating stars, nebulae, and constellation animations Everything was built with a responsive layout in mind, and we focused heavily on performance to balance visuals with smooth user interaction.

Challenges we ran into

1) Oneshot Complition 2) Netlify deployment 3) UI Challenge

Accomplishments that we're proud of

We created an immersive, visually rich experience that genuinely feels like exploring an AI-themed galaxy. Each AI planet has its own personality, style, and animation—turning education into exploration. We successfully integrated complex visuals and motion without sacrificing performance or responsiveness. It looks great across devices and invites both tech and non-tech users to interact and learn.

What we learned

How to work with WebGL and Three.js in a performance-conscious way How to choreograph interactions that feel cinematic but smooth and intuitive The importance of subtle feedback sound, cursor animations, parallax lighting—for immersion How to blend creative design and web technology into a functional storytelling experience

What's next for AI Universe Directory SIte

Expand Content: Add more AI domains and mini-worlds with richer interactive features Add Voice Interaction: Let users explore the universe through voice commands Multiplayer/Live Mode: Allow real-time exploration with others, like a shared galaxy Mobile Optimizations: Enhance mobile-specific animations and gestures Narrated Experience: Add an optional AI voice guide to narrate each planet's purpose as users explore

Built With

• chatgpt
• react
• tailwindcss
• typescript