Make your AI a shadcn expert

React Reflection Background

Aurora-style flowing gradient sheets mirrored as a rippled water reflection for React and Next.js — the top half drifts like northern lights while the bottom half ripples back as if painted on a still Nordic lake.

React Reflection Background preview

Scroll to load preview

A vertically mirrored atmosphere: the top half flows with aurora-like emerald and teal gradient sheets, and the bottom half reflects them back through a subtle sinusoidal water ripple so the whole composition reads as a calm lake under drifting light. Built on a tiny offscreen buffer and a 256-entry palette lookup table — the trigonometric work is fixed-cost regardless of viewport, and the reflection is a cheap per-row offset sample with a tinted alpha fade. Zero dependencies, 60fps on a mid-range laptop, and every axis of the look (palette, ripple intensity, horizon, water clarity) lives on a prop. Perfect for Nordic landing pages, travel heroes, meditation apps, launch pages that want calm atmosphere instead of noise, and any product that benefits from a signature sense of stillness and depth.

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

FAQ

Was this page helpful?

Sign in to leave feedback.