🌌 3D Space UI — Interactive Solar System Inspired Interface

This is a side project where I implemented my learnings in Three.js, Framer Motion, and WebGL to build a visually appealing and interactive 3D space interface. It features a central rotating sphere (inspired by the solar system) surrounded by smaller celestial-like spheres, all responsive to cursor motion.

✨ Project Overview

The UI replicates a minimalistic cosmic scene. When users move their cursor, the large central sphere gently rotates in real-time, simulating a realistic motion effect. Smaller spheres are positioned around it, giving the impression of planetary bodies orbiting in 3D space.

This project showcases animation, spatial design, and cursor interactivity — all rendered smoothly through React Three Fiber, @react-three/drei, and Framer Motion.

🔗 Live Demo

👉 Click here to view the live project

📸 Preview

Here's a snapshot of the 3D Space UI in action:

🚀 Features

• 🌍 Central sphere with smooth motion on cursor movement
• 🪐 Multiple smaller spheres scattered around — solar system vibes
• 🎯 Cursor-based rotation control
• 🧠 Optimized 3D rendering using @react-three/fiber and three.js
• 🌀 Seamless animations with framer-motion and leva for tweaking
• 🎨 Custom UI components with Tailwind CSS & Radix UI

🛠️ Tech Stack

Below are the key technologies and libraries used:

Core Libraries

• React ^19.0.0
• Next.js ^15.3.1 (with Turbopack for fast dev)
• Three.js ^0.176.0 — for 3D rendering
• @react-three/fiber ^9.1.2 — React renderer for Three.js
• @react-three/drei ^10.0.7 — Helpers for Three.js in React
• Framer Motion ^12.10.5 — for motion and animation
• Leva ^0.10.0 — for GUI controls

Styling & UI

• Tailwind CSS ^4
• Tailwind Variants & tailwindcss-animate
• Radix UI (@radix-ui/react-*) — Accessible UI components
• Lucide Icons — for lightweight icons

Form & Interaction

• React Hook Form ^7.56.2
• Embla Carousel — for smooth horizontal scrolling

Developer Tools

• TypeScript ^5
• ESLint, PostCSS, and Turbopack

📦 How to Run Locally

Clone the repo and install dependencies:

git clone https://github.com/your-username/3d-space
cd 3d-space-ui
npm install

💡 Inspiration

This project was born out of my passion for 3D interfaces and immersive visual experiences. It combines interactive design with spatial animation to create a visually engaging UI element that could be used in creative portfolios, hero sections, or conceptual demos.

🙋‍♂️ Author

Aman Singh Aspiring Software Developer | 3D Interface Enthusiast