Holo cardPro
A member card that tilts toward you with a holographic foil and flips to its back.
Live · keyboard ready
Pro
Jasmine Brooks
Design lead
- 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.
- 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
Pro source and install commands unlock with a Pro plan.
example.tsx
import { HoloCard } from "@/components/arc/holo-card/holo-card"; export function MemberCard() { return ( <HoloCard label="Jasmine Brooks, member card" front={<div className="front">...</div>} back={<div className="back">...</div>} /> );}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.
PropTypeDefaultDescription
frontRequiredReactNode–The face. Fill the whole card; it is clipped to the rounded shape.backReactNode–The back. Leave it out for a tilt only card that is not a button.flippedboolean–Controlled flipped state.defaultFlippedbooleanfalseInitial flipped state when uncontrolled.onFlippedChange(flipped: boolean) => void–Called when the card is flipped.maxTiltnumber14Largest lean in degrees.intensitynumber1Strength of foil, glitter, and glare from 0 to 1.gyroscopebooleantrueFollows device tilt on touch screens. On iOS permission is asked on the first tap.labelstring–Accessible name. Defaults to the text on the card.classNamestring–Class on the root. Set width here; the card keeps a 5:7 ratio.styleCSSProperties–Inline style on the root.- Tab
- Focuses the card when it has a back.
- EnterorSpace
- Flips the card.
- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.