Ayush Verma Portfolio (This Website)
Production-grade portfolio with an 8K space physics engine and AI assistant
Role
Creator / Full-Stack Engineer
Period
2025
Category
full stack
Overview
A Next.js portfolio featuring a custom-built 8K space simulation with mathematically accurate meteor ablation physics, an in-site AI assistant, and production-grade SEO rendering.
Key Highlights
- Custom 8K Space Engine: Canvas-based rendering mapping purely to OLED contrast with no interpolation blur.
- True Physics: Meteor ablation simulation with exponential tail decay, depth-based sizing, and lateral spark shedding.
- Agentic Assistant: In-site conversational UI that navigates the user and explains technical systems.
- Fully glassmorphic UI with standardized brand, layout, and component cards.
Tech Stack
What I Learned
Case study: Building a Physically Accurate 8K Space Engine
Problem: Standard web "starry night" backgrounds look artificial. They use basic CSS animations or simple particle systems where meteors are just white lines sliding down the screen. I wanted a cinematic, deep-space experience with true depth and physics mathematically mapped to the screen, without sacrificing frame rate.
Solution: I built a custom Canvas2D rendering system overlaying a static 8K (7680x3840) astronomical image. Instead of CSS tricks, I wrote a deterministic physics engine for the meteor shower:
1. Depth-Based Rendering
Every meteor is assigned a depth variable (0=far, 1=close). This single scalar drives:
- Speed & Scale: Distant meteors travel at 1-4 px/frame and appear as tiny 10px streaks. Foreground meteors tear across at 12+ px/frame spanning 80px.
- Opacity & Glow: Peak opacity scales with depth, making background atmospheric entry look faint and distant.
2. Ablation Physics (The Tail & Sparks)
Real meteors don't have uniform tails. They glow brightest immediately behind the head where ionized plasma is thickest, then fade extremely rapidly.
- Exponential Tail: I implemented a 6-stop exponential opacity falloff (
1.0 → 0.75 → 0.35 → 0.12 → 0.03 → 0) over the stroke length. - Lateral Sparks: Sparks don't trail "backwards." They are ablated material pushed away by atmospheric resistance. I calculate the perpendicular vector to the trajectory and spawn sparks laterally with high friction to simulate atmospheric drag.
3. Rendering Performance (Crisp 8K)
Applying parallax to an 8K image usually causes sub-pixel interpolation, making it look blurry on 1080p monitors.
I separated the render pipeline: the 8K background draws first as a static, pixel-perfect cover. The mouse-driven parallax is then applied via ctx.translate only to the foreground procedural layer (stars and meteors).
Outcome: A 60fps, mathematically rigorous space environment that looks hyper-realistic on OLED screens, adding massive brand prestige without locking up the main thread.