Holo CardNew

Usage

Anatomy

Import the HoloCard component and access all parts using dot notation.

import {HoloCard} from "@heroui-pro/react";

<HoloCard>
  <HoloCard.Rotator>
    <HoloCard.Frame>
      <HoloCard.Surface>
        <HoloCard.Inset />
        <HoloCard.Pattern />
        <HoloCard.Content />
        <HoloCard.Shine>
          <HoloCard.ShinePattern />
        </HoloCard.Shine>
      </HoloCard.Surface>
    </HoloCard.Frame>
  </HoloCard.Rotator>
</HoloCard>;

Every layer is optional except Rotator, Frame, and Surface. Inset draws the hairline border, Pattern is the static texture, and Shine is the pointer-tracked holographic glare. Shine renders a ShinePattern for you unless you pass children.

Composing the card face

HoloCard.Content is a full-bleed layer that drifts against the tilt. Render one per band of the card and position it with flex utilities — the layer ignores the pointer so stacked layers never block each other.

<HoloCard.Content className="flex-col items-center justify-center">
  <span className="text-3xl font-bold text-white">Marcus Wong</span>
</HoloCard.Content>
<HoloCard.Content className="items-end justify-center pb-10">
  <span className="text-sm text-white/40">Member #0999</span>
</HoloCard.Content>

Custom Gradient

With Pattern

Static

Set isInteractive={false} to freeze the card flat and unlit. The card also stays static automatically when the user has prefers-reduced-motion enabled.

On touch devices, horizontal drags tilt the card while vertical drags keep scrolling the page.

Membership Card

CSS Classes

• .holo-card - Perspective wrapper; declares every customization variable
• .holo-card__rotator - 3D tilt layer
• .holo-card__frame - Fixed clipping bounds the tilted card moves within
• .holo-card__surface - The card body carrying the gradient background
• .holo-card__inset - Hairline border inside the card edge
• .holo-card__pattern - Static texture overlay beneath the content
• .holo-card__content - Full-bleed parallax layer for the card face
• .holo-card__shine - Holographic glare, blended over everything else
• .holo-card__shine-pattern - The texture the glare reveals

CSS Variables

Set these on the root (or any ancestor) to restyle the card without overriding classes.

These are driven by pointer movement and are read-only: --holo-card-pointer-x, --holo-card-pointer-y, --holo-card-background-x, --holo-card-background-y, --holo-card-opacity.

API Reference

HoloCard

The root component. Renders a div that owns pointer tracking and every CSS variable. It shrink-wraps the card, so wrap it in a flex or grid container to position it.

Also supports all native div HTML attributes and Motion props.

HoloCard.Rotator

The 3D tilt layer. Rotates around the card center as the pointer moves.

Also supports all native div HTML attributes and Motion props.

HoloCard.Frame

Fixed clipping bounds that give the scaled, tilted card room to move.

Also supports all native div HTML attributes.

HoloCard.Surface

The card body. Carries the gradient background and clips every layer to the radius.

Also supports all native div HTML attributes.

HoloCard.Inset

Hairline border inset from the card edge. Renders no children.

Supports all native div HTML attributes.

HoloCard.Pattern

Static texture overlay that sits beneath the content. Renders no children.

Supports all native div HTML attributes.

HoloCard.Content

A full-bleed parallax layer for the card face. Render as many as you need.

Also supports all native div HTML attributes and Motion props.

HoloCard.Shine

The pointer-tracked holographic glare. Renders a HoloCard.ShinePattern when no children are given.

Also supports all native div HTML attributes.

HoloCard.ShinePattern

The texture the glare reveals, parallaxed by the pointer. Renders no children.

Supports all native div HTML attributes.