2026Interactive Web

Lumina

DESCRIPTION

Immersive Interactive Visual Web

DURATION

Jan 2026 - Feb 2026

MY ROLE

Creative Developer: React Three Fiber 3D light reflection/refraction scenes; custom fragment shaders; scroll and mouse-based lighting interaction and GSAP animation oversight.
Full Stack Dev: Next.js architecture and Supabase integration (archive, contact form). SEO meta and Open Graph image dynamic generation.
UI/UX Design: Overall 'Light' theme visual concept and interaction prototyping.

TECH

Frontend

Next.js (App Router) · TypeScript · Tailwind CSS

3D / Creative

Three.js · React Three Fiber · GLSL (Shaders)

Animation

GSAP · Lenis · Framer Motion

Backend

Supabase

Deployment

Vercel

Project Purpose

"Illuminating the unseen digital spaces." Lumina is an experimental web project that goes beyond simple information delivery, exploring refraction, reflection, and scattering of light. By combining light ray tracking and prism shader art in a static web environment, it aims to provide elegant, real-time reactive light art in the browser and to extend the limits of WebGL rendering technology.

Scope

· Interactive Web Design & Development
· WebGL-based 3D Light/Material Effects
· Dynamic Gallery System Build
· Lighting Interaction Integration

Key Technical Features

Real-time WebGL Engine

· Custom Shader Implementation: GLSL to treat mouse cursor as a dynamic light source; real-time light reflection and soft shadow on 3D objects and text.
· Post-processing Pipeline: Advanced Bloom and volumetric godrays applied to create an ethereal, mysterious mood as if light emanates from the abyss.

Immersive Interaction System

· Depth-based Animations: Lenis scroll speed/position as hook; light intensity and color temperature shift with scroll for physics-based exploration of depth (Z-axis).
· Loading Sequence: 'Awakening the Light' — gradual fade-in illumination from darkness, silhouettes revealed, to maximize anticipation.

Dynamic Archive Structure

· Supabase Integration: Visual archive data in Supabase DB; dynamic grid UI filtered by spectrum (color theme); async loading for seamless data fetch.
· Contact Interface: Glassmorphism-style contact form; on submit, light ripple visual feedback to maintain immersive UX.

Performance Optimization

· GPU Acceleration: Heavy lighting and canvas kept off main thread; Frustum Culling for off-screen lights to maintain 60fps.
· Asset Management: HDRI and textures served as WebP/AVIF; lazy loading for essential textures only.