Aura & Echo
DESCRIPTION
Immersive Interactive Visual Web
DURATION
Jan 2026 - Feb 2026
MY ROLE
- Creative Developer: React Three Fiber scene setup, custom fragment shaders, scroll-driven interaction logic and GSAP direction.
- Full-stack Development: Next.js architecture and Supabase integration for the archive and contact form, plus SEO metadata and dynamic Open Graph images.
- 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 a self-initiated experiment in what a browser can be made to feel like. Fluid dynamics and glitch art run together in real time, so the page distorts and echoes under the visitor's hand rather than sitting still. It was built as much to push our own WebGL and shader work as to be looked at.
Scope
- · Interactive Web Design & Development
- · WebGL-based Visual Effects
- · Archive System Build
- · Sound Interaction Integration
Key Technical Features
Real-time WebGL Engine
- · Custom GLSL shaders drive the distortion — liquid flow and tearing — keyed to scroll velocity and pointer movement.
- · A post-processing chain of noise, chromatic aberration and scanlines gives the whole surface the look of a signal going wrong.
Immersive Interaction System
- · Lenis scroll velocity feeds skew and stretch, so the faster you move the more the page deforms.
- · An 'Initializing Visual Interface' loading sequence sets the terminal register and buys the first paint some time.
Dynamic Archive Structure
- · The archive runs on Supabase, filtered by Audio and Visual tags and loaded asynchronously into a grid.
- · The contact form is styled as a terminal uplink, with a secure-transmission state on submit.
Performance Optimization
- · 3D and canvas work is pushed to the GPU and the per-frame useFrame budget kept minimal, which is what holds 60fps.
- · Assets are served as WebP and AVIF, with frustum culling dropping textures once they leave the frame.
Design Points
Cybernetic Typography
A high-legibility sans set against hard red and black — the vocabulary of warning signage and system logs rather than of a portfolio.
Glitch as a Language
UI labels borrowed from signal processing — Signal One, Frequency, Modulation — with deliberate image break-up and noise treated as design rather than defect.
Kinetic UI
Every element answers back to the pointer, so the page reads as something alive rather than a document being scrolled.
Gallery
Click to enlargeFAQ
How is a 3D interactive website different from a regular one?
It runs Three.js and WebGL in the browser, so objects move and respond to the cursor and scroll. A regular site organises information; an interactive one delivers the brand as an experience. It pays off most in fashion, beauty, architecture and exhibitions.
How long does a website take to build?
Seven days for a landing page, fifteen for a five-page company site, thirty for a ten-page 3D interactive build. The clock starts when your material arrives and shifts with design feedback. If a date is fixed, say so at the first call and feasibility is checked first.
Are hosting, domain and server costs separate?
SSL certificate, hosting setup and database provisioning are included at no cost. You only pay for the domain, about ₩20,000–30,000 a year. Accounts are created in your name from the start, so nothing lapses when staff change.
Can I edit the content myself after launch?
An admin page is built alongside the site, so text, images and posts can be edited without development knowledge, and a manual is handed over at delivery. Only structural changes or new features need development.