Make your AI a shadcn expert

React Deep Sea Background

Abyssal deep-ocean background for React and Next.js — a handful of bioluminescent jellyfish with trailing tendrils drift through inky blue water while microscopic plankton twinkle in the dark.

React Deep Sea Background preview

Scroll to load preview

That hushed, weightless feeling of sinking past the sunlit layers into the true deep — where the only light comes from the creatures themselves. A small cast of pulsing, glowing jellyfish drift slowly across an almost-black canvas, each one trailing six to eight tendrils that ripple on independent sine phases, while a few hundred plankton specks twinkle like distant lanterns. Built in a single vanilla canvas with no shaders and no physics library, it runs at 60fps, respects prefers-reduced-motion, and ships as one copy-paste TSX file. Perfect for moody SaaS heroes, portfolio splash pages, product launches that want to feel mysterious rather than loud, and anywhere you need a background that reads as "unexplored" at a glance.

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 deep-sea background into my project

FAQ

Was this page helpful?

Sign in to leave feedback.