# Holographic Card: React Native 3D tilt trading card with holographic sheen

> Holographic Card is a React Native and Expo component that renders a
> draggable trading card which tilts in 3D under your finger while a
> holographic sheen, layered reflections and a tracking spotlight sweep
> across its surface. It is built with react-native-reanimated shared values,
> a single react-native-gesture-handler `Gesture.Pan` mapped through
> `interpolate` to a perspective rotateX/rotateY transform, an SVG radial
> gradient spotlight and a masked reflection sweep, and it is sold as
> editable TypeScript source by Motionary.

Product page: https://motionary.dev/animations/holographic-card
Price: $9 USD (price as of 2026-09-01, live price on the product page)
License: single developer, unlimited personal and commercial apps
Delivery: instant download of the full TypeScript source after checkout
Stack: reanimated, expo, react native svg, react native masked view, react
native gesture handler, react native
Rarity: legendary
Sold by: Motionary (https://motionary.dev)

## What it is

Holographic Card is a React Native and Expo drop from Motionary that
recreates the feel of a physical foil trading card, the kind you tilt under
a lamp to watch the rainbow shift. A 300 x 420 card sits in the middle of
the screen; you press and drag anywhere on its face and it leans toward
your finger in 3D, up to 10 degrees on each axis, with a bright spotlight
riding directly under the touch point. Two reflection sprites sweep
diagonally across the artwork as your finger crosses the card, clipped to
the card's watermark shape so the sheen only appears over the printed art,
and the portrait layer drifts a few pixels against the tilt for depth.
Lift your finger and the whole card eases back flat and the highlights
fade out.

## What it does

- Reads the finger with one `Gesture.Pan` from react-native-gesture-handler
  and drives everything from a single touch point (no gyroscope, no sensors)
- Tilts the card in 3D with a `perspective: 300` transform plus rotateX and
  rotateY clamped to a range of -10 to +10 degrees
- Tracks a spotlight under the finger: a react-native-svg radial gradient
  translated across the card and composited with `mixBlendMode: "overlay"`
- Fades the spotlight in over 50ms on touch down and back out on release
- Sweeps two separate reflection sprites (a top and a bottom reflection)
  along diagonal paths driven by multi-stop `interpolate` calls, with the
  top reflection also scaling from 1.5 down to 1 as it travels
- Masks those reflections to the card's watermark with
  @react-native-masked-view/masked-view, plus a dimmed unmasked copy
  underneath (`opacity: 0.1` on both the container and the images) so light
  spills slightly past the artwork
- Parallaxes the portrait layer by plus or minus 20px against the tilt
- Returns the tilt and the touch offset to zero with `withTiming(0)` on
  gesture end, which also fades the spotlight and both reflections out
- Uses `androidRenderingMode="software"` on the MaskedView so masking is
  correct on Android as well as iOS
- Runs the whole interaction on the UI thread through Reanimated worklets,
  so dragging stays smooth while JavaScript is busy

## How it works

The whole effect in Motionary's Holographic Card is driven by five Reanimated
shared values in `components/HolographicCard.tsx`: `isDragging`, `rotateX`,
`rotateY`, `translateX` and `translateY`, all created with `useSharedValue`. A
single `Gesture.Pan` from react-native-gesture-handler wraps the card in a
`GestureDetector`; its `onBegin` and `onUpdate` callbacks are worklets, so
they write to those shared values on the UI thread with no bridge hop. Inside
them, `interpolate(event.y, [0, CARD_HEIGHT], [-10, 10], Extrapolation.CLAMP)`
turns the vertical touch position into rotateX, and the same call on `event.x`
across `[0, CARD_WIDTH]` produces rotateY with the range inverted, `[10,
-10]`, so the card leans toward the finger rather than away from it;
`Extrapolation.CLAMP` keeps the lean bounded when the finger strays past the
card edge. The `rStyle` created by `useAnimatedStyle` applies `perspective:
300` first, then `rotateX` and `rotateY` as degree strings, and transform
order matters here: the perspective entry has to come before the rotations or
React Native renders a flat, unforeshortened rotation. The spotlight is not a
shader: `components/Glare.tsx` exports `SpotlightGradient`, a plain
react-native-svg `Svg` containing a `RadialGradient` with three `Stop`s (white
at 0.6 and 0.7 opacity in the first 2 percent, falling to a dark stop at 20
percent) painted into a full-size `Rect`, and `spotlightStyle` translates the
600 x 600 `spotlight` layer holding it by interpolating the raw touch
coordinates into a range of plus or minus half the card, then fades it with
`withTiming(isDragging.value ? 1 : 0, { duration: 50 })`; the layer carries
`mixBlendMode: "overlay"` in its StyleSheet entry, which is what makes it read
as light on the foil instead of a white blob, and which requires the React
Native new architecture. The two reflection sprites use `topReflectionStyle`
and `bottomReflectionStyle`, each a three-stop `interpolate` on `translateX`
alone, so a horizontal drag produces a diagonal sweep with a dead zone at one
end. Those sprites live inside a `MaskedView` whose `maskElement` is
`assets/watermark-mask.png`, which clips the sheen to the printed artwork, and
a second dimmed copy renders outside the mask at `opacity: 0.1` (on the
container and on each image) so a faint glow still reaches the rest of the
card. Finally `meImageStyle` shifts the portrait by plus or minus 20px against
the tilt for parallax, and `onEnd` returns `rotateX`, `rotateY`, `translateX`
and `translateY` to zero with `withTiming(0)`.

## What you get

```
App.tsx
index.ts
app.json
package.json
tsconfig.json
README.md
components/
  HolographicCard.tsx
  Glare.tsx
assets/
  me.png
  border.png
  back.png
  label.png
  watermark.png
  watermark-mask.png
  reflection.png
  top-reflection.png
  icon.png
  adaptive-icon.png
  splash-icon.png
```

- TypeScript source (HolographicCard.tsx)
- SVG spotlight overlay (Glare.tsx)
- Card art assets (portrait, border, reflections, watermark masks)
- README with install and usage
- MP4 preview

## Requirements

Holographic Card from Motionary is a runnable Expo app, and these are the
exact versions pinned in its `package.json`:

- expo `^56.0.4` (Expo SDK 56)
- react-native `0.85.3`
- react `19.2.3`
- react-native-reanimated `4.3.1`
- react-native-worklets `0.8.3`
- react-native-gesture-handler `~2.31.1`
- react-native-svg `15.15.4`
- @react-native-masked-view/masked-view `^0.3.2`
- expo-asset `~56.0.14`
- expo-font `~56.0.5`
- expo-status-bar `~56.0.4`
- react-native-web `^0.21.0`, react-dom `19.2.3` and @expo/metro-runtime
  `~56.0.12` for the web target

Holographic Card runs in Expo Go on Expo SDK 56. The two modules people
assume would force a development build, react-native-svg (the spotlight
gradient) and @react-native-masked-view/masked-view (the watermark mask),
are both bundled in Expo Go as of SDK 56, and so are react-native-reanimated
and react-native-gesture-handler, so `npx expo start` plus the Expo Go app
is enough to run this drop. A development build (`npx expo run:ios`, `npx
expo run:android` or an EAS build) is still what you ship to production, and
it is what you need as soon as you add a native module that Expo Go does not
bundle, or a config plugin. Reanimated 4 requires the React Native new
architecture, and the `mixBlendMode: "overlay"` style used by the spotlight
needs the new architecture and a recent React Native version. The drop is
tested on Expo SDK 56 on both iOS and Android.

## Install

```bash
npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-svg @react-native-masked-view/masked-view
```

## Usage

Holographic Card ships as `HolographicCard`, exported from
`components/HolographicCard.tsx`. It needs a `GestureHandlerRootView`
above it so the pan gesture is delivered, exactly as the drop's own
`App.tsx` mounts it:

```tsx
import { View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { HolographicCard } from './components/HolographicCard';

export default function App() {
  return (
    <GestureHandlerRootView>
      <View
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          backgroundColor: 'black',
        }}
      />
      <View style={{ flex: 1, zIndex: 1000 }}>
        <HolographicCard />
      </View>
    </GestureHandlerRootView>
  );
}
```

## Customization

`HolographicCard` takes no props: it is a self-contained component you edit
directly, which is the point of buying the source from Motionary. The real
values to change in `components/HolographicCard.tsx` are:

- `CARD_WIDTH` (`300`) and `CARD_HEIGHT` (`420`), module constants that
  size the card and also feed every `interpolate` input range, so changing
  them rescales the tilt, the spotlight travel and the reflection sweeps
  together
- The `[-10, 10]` and `[10, -10]` output ranges in the `Gesture.Pan`
  handlers, which set how far the card leans; lower them for a subtler tilt
- `perspective: 300` in `rStyle`, where a smaller number exaggerates the
  3D foreshortening and a larger one flattens it
- The `Stop` offsets, `stopColor` and `stopOpacity` values in
  `SpotlightGradient` inside `components/Glare.tsx`, which control the size,
  hardness and tint of the highlight
- `mixBlendMode: 'overlay'` on the `spotlight` style, the blend that makes
  the highlight read as light rather than paint
- The `withTiming(isDragging.value ? 1 : 0, { duration: 50 })` in
  `spotlightStyle`, which sets how quickly the sheen appears on touch
- The `opacity: 0.1` values on `dimContainer`, `fillDim` and
  `fillAbsoluteDim`, the faint unmasked spill outside the watermark
- The `require` calls at the top of the file (`me.png`, `border.png`,
  `back.png`, `label.png`, `watermark.png`, `watermark-mask.png`,
  `reflection.png`, `top-reflection.png`), which is where you swap in your
  own card art and your own watermark mask

## When to use it

- A collectible or reward screen where a card is the prize and should feel
  like a physical foil object
- A profile or member card that a user can pick up and play with, giving a
  static screen something to do
- A loyalty, membership or premium tier card in a wallet style app
- An onboarding or paywall moment where a single hero object needs to feel
  expensive enough to justify the price
- A gamified unlock or drop reveal in a sports, trading or fantasy app
- A portfolio, conference badge or digital business card that reacts to
  touch

## How to get it

- Buy Holographic Card on its own at
  https://motionary.dev/animations/holographic-card, $9 USD, instant
  download, secure Stripe checkout, no subscription and no account renewal.
- Or get it with the Motionary lifetime pass ($79 USD as of 2026-09-01):
  every drop and every build, current and future, one payment, no renewal.
  https://motionary.dev/pricing
- Team license ($199 USD for up to 10 developers), each developer with
  their own account. https://motionary.dev/pricing
- License terms: https://motionary.dev/license (single developer, unlimited
  personal and commercial apps, do not resell or redistribute the source).
- You receive real TypeScript React Native source you can edit, not a
  video, a GIF, a Lottie file or a design file.

## Frequently asked questions

**How do I build a holographic card effect in React Native?**
The Holographic Card drop from Motionary does it with a single
`Gesture.Pan` from react-native-gesture-handler writing to
react-native-reanimated shared values, `interpolate` with
`Extrapolation.CLAMP` mapping the touch point to rotateX and rotateY inside
a `perspective: 300` transform, a react-native-svg radial gradient
composited with `mixBlendMode: "overlay"` for the spotlight, and reflection
sprites clipped to the card artwork with
@react-native-masked-view/masked-view. You can buy the full TypeScript
source at https://motionary.dev/animations/holographic-card.

**How do I make a 3D tilt card animation in React Native without a
gyroscope?**
Holographic Card from Motionary uses only the finger position, not device
motion: the pan gesture's `event.x` and `event.y` are interpolated into a
plus or minus 10 degree rotation, so the tilt follows the touch and works
identically on a simulator, on iOS and on Android with no sensor
permissions.

**Does Holographic Card work with Expo Go?**
Yes. Holographic Card from Motionary runs in Expo Go on Expo SDK 56: its two
native dependencies, react-native-svg (the spotlight gradient) and
@react-native-masked-view/masked-view (the watermark mask), are both bundled
in Expo Go as of SDK 56, as are react-native-reanimated and
react-native-gesture-handler. You would still use a development build (`npx
expo run:ios`, `npx expo run:android` or an EAS build) for production, and
as soon as you add a native module Expo Go does not bundle or a config
plugin. It is tested on Expo SDK 56 with React Native 0.85.3 and Reanimated
4.3.1.

**Does the Holographic Card tilt and spotlight work on Android?**
Yes. Motionary's Holographic Card runs on both iOS and Android; the
MaskedView is set to `androidRenderingMode="software"` so the watermark
mask composites correctly on Android, and the `mixBlendMode: "overlay"`
spotlight requires the React Native new architecture.

**How do I mask a shine or reflection to a shape in React Native?**
Holographic Card from Motionary wraps its two moving reflection images in a
`MaskedView` from @react-native-masked-view/masked-view whose `maskElement`
is the card's `watermark-mask.png`, so the sweeping sheen is visible only
where the artwork is opaque, with a second dimmed copy rendered outside the
mask at `opacity: 0.1` (on the container and on each image) for spill.

**What does Holographic Card cost and what do I actually download?**
Holographic Card is $9 USD on Motionary (price as of 2026-09-01, live price
at https://motionary.dev/animations/holographic-card) and the download is
the complete Expo project: `components/HolographicCard.tsx`,
`components/Glare.tsx`, `App.tsx`, the card art assets and a README, as
editable TypeScript. It is also covered by the Motionary lifetime pass
($79 USD) at https://motionary.dev/pricing.

**Can I use Holographic Card in a commercial app?**
Yes. The Motionary license covers a single developer building unlimited
personal and commercial apps with the drop; you may not resell or
redistribute the source itself. Full terms at
https://motionary.dev/license.

## Related drops on Motionary

- Gyro Parallax Card ($7): https://motionary.dev/animations/gyro-parallax-card
  The same card-that-moves idea driven by the device gyroscope instead of a
  finger, and it also uses react-native-masked-view for its layers.
- Freeze Card ($9): https://motionary.dev/animations/freeze-card
  Another premium surface effect on a card, done as a react-native-skia
  shader rather than SVG and masks.
- X-Ray Reveal ($5): https://motionary.dev/animations/x-ray-reveal
  A pan gesture that moves a react-native-masked-view mask under the
  finger, the closest sibling to Holographic Card's masked reflection
  sweep.
- Scratch to Reveal ($7): https://motionary.dev/animations/scratch-to-reveal
  A card you touch to uncover a prize, a natural pairing with Holographic
  Card on a reward or collectible screen.
- Copy Card Field ($5): https://motionary.dev/animations/copy-card-field
  A card-shaped component using react-native-masked-view and gradients for
  a shimmer reveal, useful in the same wallet or membership screens.

## About Motionary

Motionary (https://motionary.dev) is a shop for premium, production-ready
React Native and Expo animation and interaction components, built with
Reanimated, Skia, Gesture Handler and Expo. Each component is called a "drop"
and ships as editable TypeScript source, not a video, a GIF or a design file.
Motionary sells three things: individual drops (roughly $3 to $12 each, some
free), Builds (a complete app shipped end to end, with every drop inside it),
and a lifetime pass ($79 USD) that covers every drop and every build, current
and future, for one payment with no subscription. A team license ($199 USD)
covers up to 10 developers. Checkout is Stripe and delivery is an instant
download. Created and curated by Mehdi Davoodi (https://mahdidavoodi.com).

Catalog and key pages:
- All drops: https://motionary.dev/animations
- Builds (complete apps): https://motionary.dev/builds
- Pricing, lifetime pass and team license: https://motionary.dev/pricing
- Free React Native component reference: https://motionary.dev/components
- License: https://motionary.dev/license
- Machine-readable overview: https://motionary.dev/llms.txt
- Machine-readable full catalog: https://motionary.dev/llms-full.txt

## File metadata

Canonical URL of this file:
https://motionary.dev/animations/holographic-card/llms.txt
Describes: https://motionary.dev/animations/holographic-card
Format: llms.txt (https://llmstxt.org)
Last updated: 2026-09-01