# Lustre Cards — Metal Payment Card Carousel with Live Reflections for React Native & Expo

> Payment cards in live metal — brushed steel, champagne gold, titanium, rose, a prism film and frosted glass — whose reflections slide as they turn, tilt and flip. A depth carousel, the card's back with a hold-to-reveal code, a frost "freeze". Skia shader, 60 fps.

- Kind: Mobile component (Cards)
- Price: Free
- License: MIT License. Do anything with it, keeping the copyright notice.
- Developer: UpFork
- Tags: card, carousel, finance, react-native, expo, skia, shader, credit-card
- npm packages: @shopify/react-native-skia, expo-haptics, react-native-gesture-handler, react-native-reanimated, react-native-svg, react-native-worklets
- Published: 2026-10-14
- Updated: 2026-10-14
- Page: https://upfork.dev/products/lustre-cards-react-native

## How to get it

It's a React Native component for Expo apps (Expo SDK 57), not a shadcn item: copy its folders into the app's root from its ZIP (Download source on its page) or through UpFork's MCP server (install_product), then install its packages with Expo:

```bash
npx expo install @shopify/react-native-skia expo-haptics react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets
```

It's free and in no plan: an AI assistant installs it through MCP with no account, and its ZIP downloads with a free UpFork account.

Step by step, with the App.tsx that shows it and Skia's web setup: https://upfork.dev/docs/mobile.

## About

The card screen is where a bank feels premium — or doesn't. Lustre Cards draws each card in a live material: a light sits in front of it, and as the card turns in the carousel, tilts under your finger or flips over, the reflection slides across the metal and stretches along its brushing.

- **Six materials, one shader.** Brushed steel, champagne gold, black titanium, rose gold, an iridescent prism film and frosted glass — or your own, from a few numbers. Dithered so dark metal never bands; highlights roll off instead of clipping.
- **A complete card.** Chip, contactless mark, an embossed number whose edges catch the light, holder, expiry and an original network mark. The back has a magnetic stripe, a signature panel and a security code that shows only while held.
- **A carousel with depth.** The card in focus faces you, lifted; the others turn away, darker, still visible. Flings land on a card; a plan panel cross-fades along with them.
- **Freeze.** Frost grows across the card from one corner, with a line of crystals at its front, and the print turns readable on the ice.
- **Tilt it.** Press and hold, hover with a mouse, or feed in a motion sensor.
- **Accessible**: one adjustable control, an action that reads out the code, reduced-motion support. 60 fps on integrated graphics in the browser.

Two complete demos — "pick your card" onboarding and a card detail screen — each in light and dark. All names, numbers and the bank are invented; no real card network marks.