import React, { useState, useRef, Suspense, useEffect } from 'react'; import { Canvas, useFrame } from '@react-three/fiber'; import { Text, MeshReflectorMaterial, PerspectiveCamera, Environment, Float, Sparkles } from '@react-three/drei'; import * as THREE from 'three'; import { Send } from 'lucide-react'; // --- LOGIC --- const generateEcho = (input) => { // Simple mirror logic const seeds = ["...", "why?", "echo", "self", "time", "wait", "us"]; const randomSeed = seeds[Math.floor(Math.random() * seeds.length)]; return Math.random() > 0.5 ? `${input}...` : `... ${randomSeed} ...`; }; // --- 3D COMPONENTS --- function TheLonelyUser({ isTyping }) { const meshRef = useRef(); useFrame((state) => { if (!meshRef.current) return; const t = state.clock.getElapsedTime(); meshRef.current.position.y = 0.5 + Math.sin(t * 1.5) * 0.1; meshRef.current.rotation.y = t * 0.2; // Scale up slightly when typing const targetScale = isTyping ? 1.4 : 1; meshRef.current.scale.lerp(new THREE.Vector3(targetScale, targetScale, targetScale), 0.1); }); return ( ); } function FloatingWord({ text, position, isEcho, onComplete }) { const textRef = useRef(); const [opacity, setOpacity] = useState(0); const lifeTime = useRef(0); useFrame((state, delta) => { lifeTime.current += delta; // Fade Logic if (lifeTime.current < 0.5) setOpacity(lifeTime.current * 2); else if (lifeTime.current > 5) setOpacity(Math.max(0, 1 - (lifeTime.current - 5))); // Cleanup if (lifeTime.current > 7 && onComplete) onComplete(); // Movement if (textRef.current) { const speed = isEcho ? 0.8 : 2.5; // Faster user words // Move away from camera (negative Z) textRef.current.position.z -= speed * delta; textRef.current.position.y += Math.sin(lifeTime.current * 2) * 0.005; } }); return ( {text} ); } function TheRoom({ words }) { return ( <> {/* Lighting */} {/* The Floor - Black Mirror */} {/* Render Words */} {words.map((w) => ( ))} ); } // --- MAIN APP --- export default function App() { const [inputText, setInputText] = useState(""); const [words, setWords] = useState([]); const [isTyping, setIsTyping] = useState(false); const handleSubmit = (e) => { e.preventDefault(); if (!inputText.trim()) return; const newId = Date.now(); // 1. Spawn User Word (Starts at the user's position) setWords(prev => [...prev, { id: newId, text: inputText, position: [0, 1, 0], // Center, slightly up isEcho: false, onComplete: () => removeWord(newId) }]); // 2. Spawn Echo (Delayed) setTimeout(() => { const echoId = Date.now() + 1; setWords(prev => [...prev, { id: echoId, text: generateEcho(inputText), position: [(Math.random() - 0.5) * 4, 2, -5], // Farther back isEcho: true, onComplete: () => removeWord(echoId) }]); }, 1200); setInputText(""); setIsTyping(false); }; const removeWord = (id) => { setWords(prev => prev.filter(w => w.id !== id)); }; // Prevent default touch behaviors (scrolling) useEffect(() => { document.body.style.overflow = 'hidden'; document.body.style.position = 'fixed'; return () => { document.body.style.overflow = ''; document.body.style.position = ''; }; }, []); return (

{/* 3D Scene - Full Screen */}

{/* UI Overlay - Using Fixed Positioning for stability */}

{/* Input Form */}

Narcissus Room

); }