React Sonar Background
Classic radar sonar sweep background for React and Next.js — a rotating green beam, concentric range rings, and periodic target blips render a phosphor CRT aesthetic on a zero-dependency canvas.
React Sonar Background preview
A proper sonar scope — a bright phosphor sweep rotates from a center pivot, trailing an afterglow across concentric range rings while random target blips ping into view and fade. Built on a single canvas with an alpha-fade trail pattern (no full clear per frame) so the green persistence feels like a real cathode tube rather than a CSS animation. Zero dependencies, seeded PRNG for stable blip timing, and prefers-reduced-motion aware. Perfect for nautical dashboards, sci-fi hero sections, cyberpunk portfolios, game-adjacent landing pages, and anywhere a product needs the feeling of "actively scanning".
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the sonar background into my projectRelated Components
Ripple
Continuous outward ring pulses
Circles
Animated concentric circles
Spotlight
Cursor-following radial glow
Orbits
Bodies traveling on orbital tracks
Magnetic Field
Flowing magnetic field lines
Resonance
Harmonic resonant wave rings
FAQ
Was this page helpful?
Sign in to leave feedback.