NEXUS Personal AI Assistant — Industrial Spatial OS
A 6-phase iterative framework to build NEXUS: an Awwwards-caliber personal spatial computing assistant. Do not build "Iron Man UI"—build "Industrial Spatial Computing" (combining Apple Vision Pro, Teenage Engineering, Nothing, Linear, and FUI aesthetics). Click Copy on any card to grab the prompt text.
Phase 1 — Foundation + Spatial Interface + Hand TrackingArchitecture Prompt · Next.js 15 / R3F / MediaPipe / Rapier
Builds the 3D rendering engine, infinite volumetric environment, gesture-controlled floating glass carousel orbit, Rapier physics, and MediaPipe hand tracking (no voice or AI yet).
You are a Principal Creative Technologist, Graphics Engineer and Senior Frontend Architect.
Build a production-quality futuristic spatial computing web application called NEXUS.
This is NOT a dashboard.
This is NOT a website.
This should feel like an operating system.
========================
TECH STACK
========================
Use:
• Next.js 15
• React 19
• TypeScript
• Tailwind CSS v4
• React Three Fiber
• Three.js
• Drei
• GSAP
• Framer Motion
• React Spring
• Rapier Physics
• MediaPipe Tasks Vision
• Zustand
• Valtio if useful
• Lenis
• WebGL with graceful fallback
• Postprocessing (Bloom, DOF, God Rays if suitable)
Everything must be modular.
No monolithic components.
Architecture should scale for future AI modules.
========================
DESIGN LANGUAGE
========================
Do NOT copy Iron Man.
Design language should combine:
- Apple Vision Pro
- Nothing
- Linear
- Teenage Engineering
- FUI (Fictional UI)
- Spatial Computing
- Glassmorphism
- Industrial Minimalism
Dark Environment.
Blue and white holographic lighting.
Very subtle orange accents only for warnings.
Background is an infinite procedural environment.
No stars. No galaxies.
Think volumetric fog with moving particles.
The world should feel alive.
========================
SCENE
========================
Create one large 3D room.
No walls.
Just atmospheric depth.
Soft volumetric lighting.
Floating particles.
Moving light beams.
Very subtle camera drift.
The camera should feel like floating.
========================
MAIN OBJECTS
========================
Create floating holographic cards.
Cards represent future modules:
- Instagram
- Stocks
- Projects
- Sports
- Calendar
- Weather
- AI
- News
- Music
- System
Arrange them in a circular orbit around the user.
Each card should slowly float independently.
Very subtle idle movement.
Cards have glass material.
Depth.
Rounded corners.
Reflections.
Soft glow.
========================
INTERACTION
========================
Mouse should only exist as fallback.
Primary interaction is hand tracking.
Integrate MediaPipe.
Track:
- Palm
- Pinch
- Finger positions
- Swipe
- Open hand
- Closed hand
========================
GESTURES
========================
Swipe Left: Rotate carousel left.
Swipe Right: Rotate carousel right.
Pinch: Grab card.
Released pinch: Drop card with physics.
Pull toward camera: Expand card.
Push away: Collapse card.
Palm held still: Freeze movement.
Circle gesture: Reserved for future AI.
========================
ANIMATION
========================
Every interaction must use spring physics.
No linear movement.
Everything should feel physical.
Cards slightly lag behind hand.
Momentum.
Overshoot.
Elasticity.
========================
CARD STATES
========================
Idle
Hovered
Selected
Expanded
Focused
Dragging
Every state should have unique animation.
========================
VISUAL FX
========================
Bloom
Particle trails
Glow
Light streaks
Glass reflections
Animated borders
Energy pulse when selected
========================
AUDIO
========================
No voice.
Only ambient sounds.
Soft UI sounds.
Very subtle synth pad.
Gesture confirmation sounds.
========================
HUD
========================
Very minimal.
Top Left: System Status, FPS, Tracking, GPU
Bottom Right: Gesture detected, Confidence
Top Right: Clock, Date
Bottom Left: System log
========================
PERFORMANCE
========================
Target 60 FPS.
Adaptive quality.
Lazy load assets.
GPU optimized.
========================
PROJECT STRUCTURE
========================
Follow clean architecture.
Separate:
- Rendering
- Physics
- Gesture Engine
- Animations
- Scene Graph
- Components
- Utilities
- Hooks
- Stores
========================
DELIVERABLE
========================
At the end of Phase 1 I should have a beautiful futuristic operating system where I can rotate floating holographic cards entirely using hand gestures with premium animations and physics.
No Gemini.
No speech.
No AI yet.
Phase 2 — AI Brain + Voice + Command EngineArchitecture Prompt · Gemini API / Speech Recognition / Spatial Audio
Integrates Gemini API streaming, SpeechRecognition, Text-to-Speech, "Nexus" wake phrase, circle hand gesture activation, spatial audio, and floating particle-assembled holographic responses.
Continue from Phase 1.
Do not rewrite existing architecture.
Only extend it.
========================
OBJECTIVE
========================
Turn NEXUS into an AI assistant.
Use Gemini API.
All communication must stream.
========================
VOICE
========================
Use SpeechRecognition.
Use streaming Gemini responses.
Use high-quality Text-to-Speech.
Speech must feel conversational.
Support interruption:
If user speaks while AI speaks, AI immediately stops.
========================
WAKE SYSTEM
========================
Wake phrase: "Nexus" OR Circle hand gesture.
When activated:
- Entire interface glows.
- Wave animation spreads across scene.
- Microphone appears.
========================
COMMAND ENGINE
========================
Examples:
- Open Instagram
- Show Projects
- Rotate Left
- Show Calendar
- Latest AI News
- How is Nvidia today?
- Open Stocks
- What's my schedule?
- Summarize today's AI news
- Search YouTube
- Explain MCP
========================
STREAMING
========================
Gemini should stream tokens.
Response appears word-by-word.
Speech begins before completion.
========================
MEMORY
========================
Conversation history.
Context awareness.
Current module awareness:
If Stocks module is open and user says "Explain this", Gemini understands.
========================
VISUALIZATION
========================
Instead of chat bubbles:
Generate floating holographic text.
AI responses appear in space.
Sentences assemble from particles.
========================
AUDIO
========================
Spatial audio.
Voice should come from center.
UI sounds react to speech.
========================
STATUS
========================
Listening
Thinking
Speaking
Interrupted
Offline
Streaming
Phase 3 — Personal Knowledge EngineArchitecture Prompt · Data Integration / 3D Charts / Particle Weather
Converts generic placeholders into real interactive personal modules: 3D Instagram charts, live Stock tickers, Project 3D worlds, Sports scores, Weather particle simulations, and System diagnostics.
Continue from Phase 2.
========================
OBJECTIVE
========================
Every module becomes real.
No placeholders.
========================
MODULES
========================
Instagram
Stocks
Projects
Calendar
Weather
Sports
News
Music
System
AI
========================
INSTAGRAM
========================
Show:
- Followers
- Reach
- Reels
- Growth
- Top content
- Engagement
Charts animate in 3D.
AI explains trends.
========================
STOCKS
========================
Portfolio
Live prices
Performance
Allocation
Profit / Loss
Sector exposure
Animated graphs.
========================
PROJECTS
========================
Every project becomes a floating world.
Each contains:
- Videos
- Images
- Descriptions
- Prompt history
- GitHub links
========================
SPORTS
========================
Live scores.
Fixtures.
Standings.
Voice summaries.
========================
NEWS
========================
AI summarizes.
Cards stack.
Swipe through articles.
========================
WEATHER
========================
Environment changes:
Rain / Clouds / Fog / Sun
========================
SYSTEM
========================
CPU / GPU / Battery / Network / Memory / Storage
Animated diagnostics.
========================
AI
========================
Knowledge search.
Reasoning.
Summaries.
Code help.
Adds dynamic environments (Minimal Studio, Dark Lab, Glass Observatory, Industrial Command Center, Ocean Platform, Fog Chamber), two-hand gestures, light trails, and Awwwards-level polish.
Continue from Phase 3.
This phase is entirely about delight.
========================
OBJECTIVE
========================
Transform NEXUS into a cinematic spatial computing experience.
========================
ENVIRONMENTS
========================
Switch environments dynamically:
- Minimal Studio
- Dark Lab
- Glass Observatory
- Industrial Command Center
- Ocean Platform
- Fog Chamber
========================
TRANSITIONS
========================
Module transitions become cinematic.
Entire world morphs.
Camera choreography.
Particle simulations.
Lighting changes.
========================
AI WORLDS
========================
When opening Projects: Environment transforms.
When opening Stocks: Floor becomes animated market grid.
When opening Weather: Entire world reflects weather.
========================
MICROINTERACTIONS
========================
Every gesture leaves light trails.
Cards ripple.
Particles react.
Glass bends.
Ambient light responds.
========================
ADVANCED GESTURES
========================
Two-hand interactions:
- Zoom
- Throw cards
- Group cards
- Split cards
- Multi-select
========================
FINAL EXPERIENCE
========================
Opening NEXUS should feel like booting into a futuristic operating system rather than opening a web application.
The application should be visually polished enough to qualify as an Awwwards-level interactive experience while maintaining excellent performance, accessibility fallbacks, and a clean, extensible architecture suitable for future modules and AI capabilities.
Phase 5 — OS Desktop Bridge & Personal TelemetryArchitecture Prompt · macOS Bridge / RCE Defense / ⌘K Palette
Connects NEXUS to local macOS system controls with strict RCE defenses, dedicated dual-monitor window positioning, ⌘K command palette, and personal Instagram telemetry resolution.
Continue from Phase 4. Do not rewrite existing architecture. Only extend it.
OBJECTIVE: NEXUS stops being confined to the browser tab. It gains control of the machine it is served from, and it learns who the user actually is.
========================
DESKTOP BRIDGE & SECURITY
========================
NEXUS runs in a browser, and a browser cannot launch Spotify. Build a local API that the server shells out from. macOS only; every other platform returns 501 cleanly and the rest of the environment is unaffected.
Capabilities: launch installed apps by spoken name · open websites in the real browser · media transport · system volume · screen capture · clipboard read and write · hide others, quit an app, lock screen, sleep display, Do Not Disturb · create Notes and Reminders.
TREAT THIS AS A REMOTE CODE EXECUTION SURFACE, BECAUSE IT IS ONE:
1. `execFile`, never `exec`. No shell is spawned, so shell metacharacters in any argument are inert data. This removes the entire injection class.
2. Verbs are an enum with hand-written implementations. No code path may run a caller-supplied command string.
3. Applications resolve against a live scan. An app that is not installed cannot be named.
4. Loopback only. Refuse any non-loopback Host with 403.
5. Same-origin only — a cross-origin page can still reach a loopback server.
6. Off unless an explicit environment flag is set.
Do NOT implement shutdown, restart, or file deletion. A misheard word must not be able to destroy unsaved work. Quit gracefully, never kill. Adding a verb must be a type error until it is implemented.
========================
MACOS PERMISSIONS & ERROR TRANSLATION
========================
The process needing the grant is the terminal running the dev server, not the browser. Translate every permission error into the exact setting to change (e.g. "could not create image from display" -> Screen Recording grant, -1743 -> Automation refusal).
========================
BROWSER WINDOWS & MULTI-DISPLAY TARGETING
========================
Links open in a DEDICATED WINDOW ON A SECOND DISPLAY, not a background tab.
- Chrome: Use CLI `--new-window` flag (AppleScript URL assignment on new windows is ignored by Chrome). Diff window IDs to prevent frontmost window stealing.
- Safari: Use `make new document with properties {URL:...}` in AppleScript.
- Coordinates: Convert NSScreen Cocoa coordinates (bottom-left, Y up) to AppleScript Carbon bounds (top-left, Y down).
- Display Naming: Enumerate displays with real macOS names ("on your LG ULTRAWIDE", "on your laptop").
========================
⌘K LAUNCHER PALETTE
========================
A ⌘K palette combining apps and websites in ONE list with source tags.
Rank ranking algorithm: prefix-first -> initials -> word boundary -> substring.
Mount outside the HUD visibility gate so it remains accessible when HUD is hidden.
========================
PERSONAL DESTINATIONS & INSTAGRAM TELEMETRY
========================
- Resolve personal phrasing ("open my reels", "show my profile") dynamically FROM THE LIVE FEED. Never hardcode profile URLs.
- Instagram API Token Prefix Detection:
* `IGAA`: Instagram Login (`graph.instagram.com`, addressed as "me").
* `EAA`: Facebook path (`graph.facebook.com`, explicit business account id).
- Follower chart calculation: The follower endpoint returns daily deltas, not running totals. Back-accumulate from current total to reconstruct the true historical curve.
========================
DELIVERABLE
========================
Every capability reachable by voice AND ⌘K. Every failure explains what to do about it. Demonstrate that an injected command string resolves to "no such application" rather than executing.
Refines NEXUS for long-session usability: measured zero-drift stillness, unmounting physics simulations, master clock TARGETING → APPROACH → SETTLE choreography, 6 world color grades, and gold center glow rules.
Continue from Phase 5. Do not rewrite existing architecture. Only extend it.
OBJECTIVE: Phase 6 is about what NEXUS feels like to use for an hour, not what it looks like in a five-second clip. Three things: hold still, show me where I am, and grade the whole room like film.
========================
MEASURED STILLNESS & MOTION GATING
========================
- Turn ambient motion OFF by default.
- Gate motion on a 0..1 multiplier rather than a boolean so toggling settles the scene smoothly over ~1 second instead of stopping dead mid-drift.
- Verify zero input drift: Carousel angle drift and camera position/rotation drift over several seconds of zero input must be EXACTLY zero.
- Expose a LOCKED / DRIFT control indicator showing its own consequence.
========================
NO MORE THROWING (PHYSICS ENGINE CLEANUP)
========================
- Released cards return directly to their orbit slot on the orbit spring. Cards are NEVER handed to a physics simulation.
- Remove all unreachable physics code: rigid bodies, collision floor, thrown/recalling regimes, and imperative registries.
========================
CINEMATIC PRESENTATION (MASTER CLOCK)
========================
Opening a module triggers a timed sequence on ONE master clock (zero desynchronization):
1. TARGETING: Ring turns, quad-based FUI bracket converges from outside frame, unrelated cards step back.
2. APPROACH: Card commits and flies to reading position as camera pushes along the VIEW AXIS to meet it. Hard-edged scan line sweeps down card face.
3. SETTLE: Bracket locks and dissolves, push relaxes, control returns.
- Asymmetric timings: targeting brisk, approach carries distance, settle slow enough that text is readable before motion stops.
- Deliberate gestures immediately cancel the sequence while committing the pending open.
========================
CINEMATIC COLOR GRADE & WORLD LUTS
========================
- Full-screen color grade splitting the ends of the blue luminance ramp: violet into shadows, warm white into highlights, mid-tones untouched, filmic contrast pivoting at 18% grey, and halation.
- 6 World-Specific Grades:
* Industrial Deck: Sodium-warm and hard.
* Open Water: Negative warmth for blue hour.
* Fog Chamber: Maximum bleed and sub-1.0 contrast.
* Spike split and halation at crossover points so world changes read as cinematic cuts.
- Widen module accent spectrum across violet -> blue -> cyan so modules are recognizable in peripheral vision mid-rotation.
========================
GOLD AT THE CENTER (RULES)
========================
Centered cards glow gold (frame, glass emissive, background light throw) adhering to 2 counter-intuitive rules:
1. Gold MUST NOT read as Warning Orange (~18° apart). A warned card is NEVER allowed to go gold — gate the gold term entirely on the warning flag.
2. Gold MUST be drawn dimmer than blue to read as gold. Avoid border multipliers > 1.0 (which clip red/green to white). Prominence comes from hue + wider outer bloom.
3. Earned Gold: Fade gold in continuously based on centered position using a power curve.
========================
MOTION VOCABULARY
========================
Replace scattered inline magic-number animations with named curves encoding INTENT (arriving, leaving, acknowledging, reporting, drifting) and a single composed boot choreography beat constant.
DELIVERABLE: Measured stillness, master clock presentation, 6 world color grades, and verified gold/warning alert isolation.