Starfall Canvas

# Starfall Canvas — Animated Background

## Goal
Build a canvas-based starfield background: 200 twinkling stars, rare shooting stars, and gentle cursor gravity. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Canvas fills the section (device-pixel-ratio aware resize handler); base painted #05070D each frame with 0.25 alpha for subtle motion trails.
- Stars: 200 points, radius 0.3-1.4px, brightness mapped to radius; 10% get a faint cross-glint (two 1px lines) — the detail people feel but don't spot.
- Shooting star: every 6-14s, a streak with gradient tail (140px) crosses at a shallow angle, 900ms lifespan.
- A soft radial vignette (CSS, not canvas) keeps edges darker so content pops.
- Component wraps children; canvas is aria-hidden and pointer-events-none.

## Motion Spec
- Twinkle: each star's alpha follows its own sine (random period 2-6s, phase offset).
- Cursor gravity: stars within 120px of pointer drift 2-6px toward it, spring back on leave — simple velocity easing, no physics lib.
- Pause entirely when off-screen (IntersectionObserver); cap work when tab is hidden.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<Starfall density?: number shooting?: boolean children />` — density scales star count by viewport area.

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.