Aura & Echo
DESCRIPTION
Immersive Interactive Visual Web
DURATION
Jan 2026 - Feb 2026
MY ROLE
- Creative Developer: 3D scene setup with React Three Fiber; custom fragment shaders; scroll-based interaction logic 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 visual concept and interaction prototyping.
TECH
Next.js (App Router) · TypeScript · Tailwind CSS
Three.js · React Three Fiber · GLSL (Shaders)
GSAP · Lenis · Framer Motion
Supabase
Vercel
Project Purpose
"Exploring the boundary of digital perception." Aura & Echo is an experimental web project that goes beyond simple information delivery, stimulating the user's senses through visual distortion and echo. By combining fluid dynamics and glitch art in a static web environment, it aims to provide a digital art experience that responds in real time in the browser and to expand the developer's technical limits (WebGL, Shader).
Scope
- · Interactive Web Design & Development
- · WebGL-based Visual Effects
- · Archive System Build
- · Sound Interaction Integration
Key Technical Features
Real-time WebGL Engine
- · Custom shaders in GLSL for distortion effects (liquid flow, tear) reacting to scroll speed and mouse movement.
- · Post-processing pipeline with noise, chromatic aberration, and scanlines for an analog signal distortion mood.
Immersive Interaction System
- · Velocity-based animations using Lenis scroll speed (skew, stretch).
- · Loading sequence with 'Initializing Visual Interface' typography animation to reduce bounce and build anticipation.
Dynamic Archive Structure
- · Supabase for Data Archive; grid UI with 'Audio'/'Visual' tag filtering and async loading.
- · Contact Uplink with terminal-style form and Secure Transmission UI on submit.
Performance Optimization
- · GPU acceleration so heavy 3D/canvas does not block main thread; minimal useFrame work for 60fps.
- · WebP/AVIF assets and Frustum Culling for off-screen textures.
Design Points
Cybernetic Typography
High-readability sans-serif with strong red and black contrast for a 'technical brutalism' style reminiscent of warning signals and system logs.
Glitch & Signal Aesthetics
UI terms like 'Signal One', 'Frequency', 'Modulation'; intentional image break-up and noise as design language.
Kinetic UI
Every text and image reacts to user action so the site feels like interacting with a living organism rather than a static page.