Interactive 3D Solar System
Explore a full 360° real-time 3D solar system with custom PBR shaders and procedural planetary surfaces.
Back to Projects
Celestial Menswear Curation Platform
OOTD • Outfit Of The Day
OOTD transforms daily dressing into an astronomical science of color resonance and quiet luxury. By aligning each weekday with its governing celestial body, the platform delivers an interactive 3D planetarium and curated menswear lookbooks across 6 versatile occasions.
Your Style, Written In the Stars
Harmonizing celestial mechanics with timeless fashion, guiding your daily outfit palette through the planetary color resonance of each day.
Core Features
Celestial 3D Planet Engine
GPU-accelerated planet rendering with cursor-tracking tilt, specular lighting, and gyroscopic orbital rings.
Color Story Lookbook & Swatches
Editorial visual pairings of high-res planetary textures, curated menswear, and interactive palette swatches.
Multi-Occasion Curated Lookbook
Six distinct menswear styles for each day, spanning from casual daily wear to festive ethnic tailoring.
Cinematic Ambient Experience
Glassmorphic interface featuring adaptive hero video, an IST celestial clock, and dynamic starfields.
Floating Draggable HUD Card
Interactive draggable inspector displaying planetary stats, orbital periods, and outfit connections anywhere on screen.
Interactive 3D Solar System
🌐
Full 360° Celestial Freedom
Rotate, orbit, pitch, pan, and explore our cosmic neighborhood in real-time 3D.
🔭
Deep Zoom & Dynamic Tracking
Zoom from wide interplanetary orbital overviews down to the immediate atmosphere of any planet.
✨
Custom PBR & Procedural Shaders
Radiant glowing sun core with corona flares, realistic Jupiter bands, semi-translucent Saturn dual ring systems.
📐
Authentic Scale & Orbital Lines
True-to-scale planetary sizes with smooth elliptical orbit visualization paths.
🪐 Floating HUD Card: Drag the celestial inspector anywhere to view planetary radius, orbital periods, moons, and direct wardrobe connections.
Celestial Color Matrix
| Day | Celestial Body | Archetype | Signature Color | Vibe & Energy |
|---|---|---|---|---|
| Sunday | ☀️Sun | Solar Vitality | Solar Gold | Magnetic presence, radiant confidence, warm luxury |
| Monday | 🌙Moon | Lunar Calm | Pearl White | Architectural clarity, poise, effortless serenity |
| Tuesday | ♂️Mars | Martian Courage | Rust Red | High impact, decisive power, bold sophistication |
| Wednesday | ☿️Mercury | Mercurial Intellect | Charcoal Slate | Clean sharpness, versatile strategy, quiet intellect |
| Thursday | ♃Jupiter | Jovian Expansion | Warm Tan | Generous wealth, timeless warmth, grounded prestige |
| Friday | ♀️Venus | Venusian Romance | Vanilla Cream | Tactile softness, refined beauty, approachable charm |
| Saturday | ♄Saturn | Saturnian Discipline | Matte Black | Sovereign authority, absolute timelessness, pure minimal power |
Sunday
☀️BodySun
ArchetypeSolar Vitality
Signature
Magnetic presence, radiant confidence, warm luxury
Monday
🌙BodyMoon
ArchetypeLunar Calm
Signature
Architectural clarity, poise, effortless serenity
Tuesday
♂️BodyMars
ArchetypeMartian Courage
Signature
High impact, decisive power, bold sophistication
Wednesday
☿️BodyMercury
ArchetypeMercurial Intellect
Signature
Clean sharpness, versatile strategy, quiet intellect
Thursday
♃BodyJupiter
ArchetypeJovian Expansion
Signature
Generous wealth, timeless warmth, grounded prestige
Friday
♀️BodyVenus
ArchetypeVenusian Romance
Signature
Tactile softness, refined beauty, approachable charm
Saturday
♄BodySaturn
ArchetypeSaturnian Discipline
Signature
Sovereign authority, absolute timelessness, pure minimal power
Multi-Occasion Curated Lookbook
Each day features 6 meticulously styled wardrobe categories tailored for modern masculine elegance — all harmonized with the celestial color of the day.
☀️
Daily Wear
Heavyweight drop-shoulder tees, relaxed silhouettes, and effortless minimal essentials.
❄️
Winter Wear
Structured overcoats, cashmere layers, shearling collars, and thermal textures.
☕
Smart Casual
Cuban collar shirts, knit polos, unstructured blazers, and pleated trousers.
💼
Formal & Office
Bespoke tailored suits, crisp Egyptian cotton shirts, and polished oxford leathers.
🍸
Date Night & Evening
Velvet dinner jackets, silk blend shirts, monochrome trousers, and subtle jewelry.
🪔
Festive & Ethnic
Silk kurtas, bandhgala jackets, textured Nehru vests, and royal celebratory fabrics.
Cinematic Ambient Experience
🎬
Adaptive Responsive Hero
Desktop and mobile-optimized dual video streams (hero.mp4 / hero-mobile.mp4) with smooth fade-in controls for an immersive cinematic entry.
🛸
Starlink-Inspired Glassmorphic Navbar
Frosted blur navigation bar with real-time Indian Standard Time (IST) celestial clock and quick day selector for instant navigation.
🌌
Deep Space Starfield Canvas
Subtle twinkling particle stars and nebula dust that react to scrolling, creating an ambient cosmic atmosphere throughout the browsing experience.
Technology Stack
Next.js 16 (App Router)
High-performance React framework with Turbopack bundler
React 19
Modern UI components, hooks, concurrent rendering
Three.js
Interactive 3D WebGL solar system, orbital physics, PBR shaders
TypeScript 5
Strict type-safety across planetary datasets and component props
Tailwind CSS v4
Modern utility-first styling with custom quiet luxury palettes
Lucide React
Clean, minimalist icon system for modern design aesthetics
Celestial 3D Planet Engine
The “Today's Look” page features a dedicated 3D planet engine that dynamically renders the current day's celestial ruler:
⚡
GPU-Accelerated Parallax
Cursor-tracking tilt and specular spherical lighting effects
🔄
Gyroscopic Orbital Rings
Counter-rotating cosmic rings with glowing orbital nodes
📅
Synchronized Daily State
Instant live transition with automatic day-of-week recognition
Color Story Lookbook & Swatches
Alternating 3-Column Editorial Rows
Seamlessly pairs ultra-high-resolution planetary surfaces and textures with curated menswear fashion imagery and 4-color palette swatch dot cards.
Harmonious Planetary Swatches
Tactile swatch dots with one-click hex copying and curated editorial styling quotes for every day of the week.
Planetary Filter Navigation
Smooth pill-tab selector allowing users to browse all alignments or isolate specific planetary aesthetics.
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Dress With the Stars ✨
Discover your daily outfit palette aligned with celestial color resonance. Explore the interactive 3D solar system, browse curated lookbooks, and elevate your personal style with cosmic precision.