Ayush Verma Portfolio (This Website)

Case study: Building a Canvas Space Scene

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 deep-space scene with depth and simple physics 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 space scene that targets 60fps on typical hardware (not independently benchmarked) and keeps the main thread responsive.