Experience
Experience
Performance
Bandwidth & lightweight mode
Ship one product that degrades gracefully. Full for fiber, balanced by default, lite when Save-Data or slow networks demand it.
Detection
Prefer user choice +
navigator.connection.saveData and effectiveType. Persist as foundry-bandwidth and set data-bandwidth on html.active: balanced
Full
All media, motion, and immersive effects.
- · Autoplay muted video heroes allowed
- · High-res images (2x) and blur-up LQIP
- · Spatial / Three.js scenes enabled
Balanced
Default for most users — media with lazy load.
- · Images lazy + srcset; no autoplay video
- · CSS motion only; defer Framer on idle
- · Poster frames instead of looping video
Lite
Data-saver / slow network profile.
- · No video; static posters only
- · Illustrations as SVG/CSS, not photo assets
- · Disable illusion backgrounds & WebGL
- · Prefer system fonts if custom fonts blocked
Live degradation
Full atmosphere
Video: blocked · WebGL: blocked · Prefer SVG: no
Gate heavy assets
Hook: useBandwidth() in src/hooks/use-bandwidth.ts