Holo cardPro

• Type: Component (special)
• Access: Xzero Pro
• Page: https://ui.xzero.co.uk/components/holo-card
• Markdown: https://ui.xzero.co.uk/components/holo-card/markdown
• Source file: registry/components/holo-card/holo-card.tsx
• Dependencies: motion
• Keywords: special, motion, new, holographic card, holo card, foil card, pokemon card effect, tilt card, 3d card flip, membership card, gyroscope tilt, shiny card

When to use

• A membership or subscription card on an account or welcome page.
• A shareable profile, badge, or achievement that people will screenshot.
• A collectible or reward reveal.

When not to use

• Use card for ordinary content; the effect is too loud for lists.
• Use depth-cards when several items need a subtle parallax.
• Avoid it for text people need to read carefully; the sheen moves over the content.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/holo-card

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { HoloCard } from "@/components/xzero/holo-card/holo-card";

export function MemberCard() {
  return (
    <HoloCard
      label="Jasmine Brooks, member card"
      front={<div className="front">...</div>}
      back={<div className="back">...</div>}
    />
  );
}

API reference

HoloCard

A collectible style card that leans toward the pointer with a holographic foil, a glitter layer, and a glare that follow the angle. Click or press Enter to spin it to its back; on phones it can follow device tilt.

Prop	Type	Default	Description
front (required)	ReactNode	–	The face. Fill the whole card; it is clipped to the rounded shape.
back	ReactNode	–	The back. Leave it out for a tilt only card that is not a button.
flipped	boolean	–	Controlled flipped state.
defaultFlipped	boolean	false	Initial flipped state when uncontrolled.
onFlippedChange	(flipped: boolean) => void	–	Called when the card is flipped.
maxTilt	number	14	Largest lean in degrees.
intensity	number	1	Strength of foil, glitter, and glare from 0 to 1.
gyroscope	boolean	true	Follows device tilt on touch screens. On iOS permission is asked on the first tap.
label	string	–	Accessible name. Defaults to the text on the card.
className	string	–	Class on the root. Set width here; the card keeps a 5:7 ratio.
style	CSSProperties	–	Inline style on the root.

Keyboard interactions

Keys	Action
Tab	Focuses the card when it has a back.
Enter / Space	Flips the card.

Accessibility

• With a back, the card is role="button" with aria-roledescription="flip card" and aria-pressed for the flipped state.
• The hidden face is aria-hidden, so assistive tech reads only the side that is showing.
• Foil, glitter, and glare layers are decorative and aria-hidden.
• prefers-reduced-transparency removes the foil and glitter.

Motion

• Tilt follows the pointer on a lightly underdamped spring, and the light position trails on a softer one, so the sheen lags the lean just enough to feel physical.
• The foil slides and shifts hue with the angle; glitter drifts against the tilt and only sparkles near the glare.
• Each flip adds half a turn toward the side that was pressed on a spring with a little bounce, and the foil sweeps across the card mid spin.
• A floating shadow moves opposite the lean.
• Reduced motion removes tilt, spin, and glitter; the faces cross fade.

Responsive behavior

• The root is width limited to 300px by default and keeps a 5:7 ratio, so it fits a 320px screen.
• On touch screens tilt comes from the device when available; otherwise dragging a finger over the card tilts it.
• Hover lift and tilt only react to real pointer movement; taps flip.

Performance

• All tilt and light values are motion values written to transform and CSS variables, with no React render per frame.
• Foil, glitter, and glare are three blended layers per face; keep one or two cards on screen, not a grid.
• Glitter is a small tiled SVG data URI.

Notes for AI

• Choose it for one hero object: a membership card, a conference badge, an achievement, or a gift card reveal.
• Design the front edge to edge; the card clips it to its radius and adds the foil on top.
• Dark or saturated card stock shows the foil best; on very light stock lower intensity.
• Leave out back for a tilt only card, for example inside a link.
• Gyroscope needs HTTPS and, on iOS, a tap to grant permission; the first tap that flips also asks.

Related

• Sticker peel: Peel stickers off a surface with a real curl, move them around, and stick them back down.
• Wallet stack: Fan a stack of cards and lift one out to see its activity.
• Cover flow: A depth rail of images you can throw, with soft grounded shadows and a quiet reflection.

Also in surfaces

• Sheet stack: Nested sheets that stack with depth, drag to dismiss, and become stacked dialogs on wide screens.
• Control center: Workspace quick settings: tiles that morph into detail, a duration dial, and rubber-banded meters.
• Card to article: Story cards that open into full articles with one seamless morph and shrink back into their exact slot when dragged down.
• Link unfurl: A composer where pasting a URL shows a loading shimmer on the link, then unfurls it into a rich preview card with title, image and favicon in one morph, which can be collapsed back to the inline link or removed.

Guidance for AI tools

Holo card: A member card that tilts toward you with a holographic foil and flips to its back. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt