-
-
-
collision lab
-
home page
SPATIAL HACK 26 (NEXUS 3D) is an immersive, highly interactive, and futuristic hackathon companion application. Designed with a custom 3D design language and physical motion-driven aesthetics, it showcases focus sectors, provides a real-time terminal countdown with active live tickers, integrates a Gemini-powered AI architectural blueprint compiler, and hosts a custom physics simulation laboratory. Key Visual & Interactive Features Immersive 3D Spatial Core: Powered by custom 3D WebGL renderers, the background features a floating celestial particle swarm, a rotating central Cybernetic Torus Knot Core, and an interactive Shockwave Ring Engine. Hovering over sectors or clicking anywhere triggers dynamic light-speed spatial ripples that realistically repel the surrounding starfield. Synthesizer Sound Architecture: A custom synthesizer utilizing native browser oscillators provides rich acoustic feedback. Actions are accompanied by synthesized retro-futuristic sound effects: Menu Hops: Soft high-frequency sweep ticks on hover. Successful Pipeline Resolutions: Melodic dual-oscillator chimes. AI Launches & Space Shocks: Exponential sawtooth filter sweeps. Physical Collisions: Deep sine-wave pop nodes. Includes a global Mute/Unmute Toggler in the navigation header to respect user preference. Physical Collision Lab Sandbox: An interactive playground where users spawn and manipulate custom technology nodes. Features three selectable magnetic cursor behaviors: Push: Knocks nodes away from your cursor. Pull: Magnetically attracts nodes to form clusters. Vortex: Applies gravitational orbit torque, pulling and rotating nodes in a swirl. Gemini Blueprint Architect: Users enter ideas or select pre-configured templates (such as Decentralized IoT Swarms or Immersive Spatial AR) to generate structured development pipelines. Authentic Glassmorphism: Clean layouts using radial ambient dark-mode canvas gradients, rotating grid floors, and polished glass cards with blur filters and glowing border indicators. Core Technologies & Tools Used React 18 & TypeScript: Used as the solid foundation for building interactive UI, managing modular state reactivity safely, and enforcing comprehensive type structures. Vite: Serving as the lightning-fast modern bundling engine and developer server, ensuring clean production builds. Three.js (WebGL): The engine driving the high-performance 3D background pipeline. Handles scene rendering, cameras, custom geometries (Sphere, Torus Knot, Rings), particle field mathematics, and real-time cursor interaction raycasting. Tailwind CSS: Leveraged for modern responsive grid systems, adaptive typography styles, micro-shadows, scanline filters, and custom immersive background elements. Motion (Framer Motion): Empowers the visual interface with fluid layout animations, staggered section entries, and responsive terminal-state transitions. Web Audio API: Used to programmatically synthesize high-fidelity cybernetic sound effects entirely client-side without relying on external static audio files. HTML5 Canvas: Configured with a bounding-box vector simulation to calculate lightweight 2D rigid-body elastic collisions, velocity tracking, and cursor gravity.
