Holographic Card: React + Tailwind Component

A rainbow holographic-sheen card that shifts with the cursor angle, with 3D tilt.

As the cursor moves across the card, the card tilts along with it on a spring (rotateX / rotateY) while rainbow holographic bands, glitter particles, and specular highlights flow with the angle; on leave it springs back smoothly into place. A good fit for collectible cards, membership cards, or featured-content showcases.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/holographic-card.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Effect strengthintensity

Max tilt anglemaxTilt

Glitter grainsparkles

Card corner radiusradius

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<HolographicCard/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/holographic-card.en.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/holographic-card.

Usage

import { HolographicCard } from "@/components/ui/holographic-card";

<HolographicCard className="w-[300px]" intensity={1.2}>
  <div className="bg-slate-900 p-4 text-slate-50">
    <h3 className="text-lg font-bold">Startrail Warden · Radiant Dragon</h3>
    <p className="text-sm text-slate-400">Legendary rarity collectible card</p>
  </div>
</HolographicCard>

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Card content, placed inside the 3D tilt container and beneath the sheen layers
`intensity`	`number`	`1`	Overall effect strength multiplier (0 = off, 1 = standard, 2 = exaggerated), affecting both the tilt amount and the sheen density
`maxTilt`	`number`	`12`	Maximum tilt angle when the cursor is at the card's edge (degrees)
`sparkles`	`boolean`	`true`	Whether to show the fine glitter particle layer that mimics laser foil
`radius`	`number`	`16`	Card corner radius (px); every sheen layer follows it automatically
`className`	`string`	—	Extra styles, merged into the outermost container

Accessibility

When the user has "reduce motion" enabled at the system level, the tilt and sheen tracking are disabled and only a static, understated sheen remains
Every effect layer is aria-hidden and pointer-events-none, so it does not interfere with interacting with the content or with screen reader announcements
The tilt is driven by cursor position alone, so keyboard browsing and focusing interactive elements inside the card are unaffected
The content layer sits above the sheen layers (z-index layering), keeping text contrast and readability intact

Holographic Card