React Hologram Background
Iridescent holographic foil background for React and Next.js — a full-spectrum rainbow sheen sweeps across the surface like a tilted trading-card, with subtle foil granularity that glints as the hue rotates.
React Hologram Background preview
That prismatic shimmer you get when you tilt a holographic Pokemon card under a lamp — the rainbow sheen rolling across the foil, edges catching light, tiny granules glinting as the angle changes. Built as a 192×108 offscreen canvas where each pixel's hue is an angular projection plus a moving sheen stripe, then mapped through a pre-baked 256-entry HSL rainbow LUT and GPU-upscaled with bilinear filtering so the result is silky at any resolution. Zero dependencies, runs at 60fps on a mid-range laptop, and the tilt angle, stripe frequency, and foil grain are all propped so you can dial in anything from subtle luxury-product sheen to loud cyber-sticker dazzle. Perfect for premium launch pages, NFT / collectible sites, luxury e-commerce heroes, sticker-pack marketing, and any surface that wants to feel like it catches the light.
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 hologram background into my projectRelated Components
Silk
Flowing iridescent satin gradient
Plasma
Vibrant demoscene psychedelic
Aurora
Emerald northern-lights sheets
Mesh Gradient
Stripe/Linear-style blurred blobs
Gradient Animation
Morphing gradient mesh
Light Waves
Ambient vertical color washes
FAQ
Was this page helpful?
Sign in to leave feedback.
Hexagon
Honeycomb hexagon grid with hover glow effects, perfect for sci-fi and gaming interfaces
Honeycomb
Living hexagonal honeycomb background for React and Next.js — a pointy-top hex grid whose filled cells breathe in color via a layered value-noise field, with a customisable palette, speed, and cell size.