DimX | Devpost

enhancing look of the website

🌌 3D Websites Hackathon ShowcaseAn interactive, immersive 3D web experience built to push the visual and aesthetic boundaries of the modern web.💡 InspirationMost web experiences today are flat, predictable, and functional. When we read the hackathon brief—"Most hackathons focus on solving problems. This one focuses on creating wonder"—we wanted to design a digital space that stops visitors from scrolling and makes them say "Wow."We were heavily inspired by sci-fi aesthetics, futuristic UI design, dynamic generative geometry, and cosmic lighting. Our goal was to create a hero experience where math, art, and WebGL intersect seamlessly inside the browser.🚀 How We Built ItWe built this project using a modern frontend web graphics stack centered around React and WebGL:Core Framework: React + Vite for rapid component-driven development and instant builds.3D Graphics Engine: Three.js powered by @react-three/fiber (R3F) for declarative 3D scene management.3D Helpers & Mechanics: @react-three/drei for managing camera rigs, particle field systems (Sparkles), float dynamics, and environment lighting setups.Post-Processing Shaders: @react-three/postprocessing to add real-time bloom, subtle chromatic aberration, and vignette framing.UI & Styling: Responsive glassmorphism overlay using CSS variables, custom background clips, and dynamic color theme swappers.📐 The Math & Physics Behind the SceneTo achieve organic motion without sacrificing framerates, the central artifact uses mathematical procedural deformations calculated directly in shader space rather than heavy pre-rendered mesh assets.1. Organic Mesh DistortionThe central 3D core uses noise algorithms to dynamically perturb vertex positions along their normals ($N$) over time ($t$):$$P_{new} = P_{old} + N \cdot f(P_{old}, t)$$This allows real-time fluid movement without modifying the underlying low-poly geometry buffer manually.2. Smooth Mouse Parallax RigTo create natural depth perception on cursor movement without breaking manual rotation controls, we implemented a frame-by-frame exponential interpolation (lerp) camera calculation:$$\vec{C}{next} = \vec{C}{current} + (\vec{P}{pointer} - \vec{C}{current}) \times \alpha$$where $\alpha \approx 0.05$ creates a silky-smooth, weighted fluid feel.🛠️ Challenges We FacedShader Compatibility & CSS Text Clipping:When switching color themes dynamically, inline vendor styles like -webkit-background-clip: text rendered solid rectangles on select browsers. We solved this by abstracting the gradient text layers into standard CSS rules to guarantee clean WebGL overlay blending.3D Performance & Frame Budgeting:Achieving high-frame-rate post-processing (Bloom & Chromatic Aberration) across mobile and lower-end GPUs required strict optimization. We carefully capped particle density and leveraged instanced meshes for starfield rendering to stay comfortably under our $16.6\text{ms}$ per-frame budget ($60\text{ FPS}$).Deployment False Positives:During static deployment on GitHub Pages, automated domain filters temporarily flagged the URL path due to generic template strings. Resolving this taught us the nuances of deployment pipelines, custom subpaths in Vite (base: '/repo/'), and configuring clean production builds on platforms like Vercel.🎓 What We LearnedDeclarative WebGL with R3F: How to seamlessly merge standard React state management with real-time 3D rendering loops.Lighting & Post-Processing: How subtle atmospheric tweaks—like bloom luminance thresholds and specular highlights—dramatically impact the perceptual quality of a 3D scene.Designing for Experience: Shifting focus from rigid utility UI to emotional, aesthetic, and interactive delight.