# Gyro Parallax Card: React Native gyroscope parallax travel card

> Gyro Parallax Card is a React Native and Expo component that turns three flat
> layers (a sky photo, a cut-out landmark image and a text title) into a card
> with real depth by subscribing to the device gyroscope with expo-sensors and
> shifting each layer a different distance through react-native-reanimated
> interpolation. It is sold by Motionary as editable TypeScript source at
> https://motionary.dev/animations/gyro-parallax-card.

Product page: https://motionary.dev/animations/gyro-parallax-card
Price: $7 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, expo blur, react native masked view, react native
Rarity: rare
Sold by: Motionary (https://motionary.dev)

## What it is

Gyro Parallax Card is a React Native destination card that responds to how you
physically hold the phone. The demo shipped by Motionary is a London travel
card: a sky photograph, a cut-out Big Ben tower and the word "LONDON" sit on
three separate layers, and tilting the device slides each one by a different
amount so the flat PNGs read as a scene with foreground, subject and
background. Nothing is touched or dragged; the only input is the device
gyroscope, read through Expo's expo-sensors module. A blurred strip at the
bottom of the card, faded in with a gradient mask, holds the caption
("Big Ben Tower", "London, UK") so the text stays readable no matter which part
of the image drifts underneath it.

## What it does

- Subscribes to the device gyroscope at a 16 ms update interval
  (`Gyroscope.setUpdateInterval(16)`, roughly 60 readings per second) and feeds
  the rotation rates into two Reanimated shared values, `gyroX` and `gyroY`.
- Scales the raw sensor values on the way in (`data.x * 140` and
  `data.y * 120`) so a comfortable wrist tilt covers the useful range.
- Moves three layers by deliberately different amounts at full tilt: the sky
  translates +/-10 px on both axes, the Big Ben tower +/-30 px vertically and
  +/-50 px horizontally, and the "LONDON" title +/-20 px vertically and
  +/-80 px horizontally, spread over a wider input range so it eases in more
  slowly.
- Inverts the title's output range against the artwork's, so the text travels
  the opposite way and reads as the closest layer to the viewer.
- Clamps every interpolation with `Extrapolation.CLAMP`, so a hard flick of the
  phone cannot fling a layer out of the card frame.
- Smooths raw sensor jitter by assigning each shared value through
  `withTiming`, which turns a noisy stream into continuous motion.
- Renders a frosted caption strip: an expo-blur `BlurView` at `intensity={100}`
  with `tint="default"`, masked by an eased expo-linear-gradient so the blur
  dissolves into the photo instead of cutting a visible horizontal edge.
- Ships as a self-contained 340 x 240 card with a 30 px corner radius and
  `overflow: 'hidden'`, plus a 60 px hairline divider and a two-line caption.
- Cleans up after itself: the gyroscope listener is removed on unmount via
  `subscription.remove()` in the `useEffect` teardown.

## How it works

The whole effect in Motionary's Gyro Parallax Card lives in one file,
`components/card.tsx`, and it is parallax by output range rather than by any 3D
transform. A `useEffect` calls `Gyroscope.setUpdateInterval(16)` and
`Gyroscope.addListener` from expo-sensors; inside the listener the measured
rotation rates are scaled and written to two `useSharedValue` handles as
`gyroX.value = withTiming(data.x * 140)` and
`gyroY.value = withTiming(data.y * 120)`. The `withTiming` wrapper is doing
real work here: gyroscope output is noisy, and animating toward each new
reading instead of snapping to it is what makes the card feel like it is
floating rather than vibrating. Three separate `useAnimatedStyle` hooks then
read those same two shared values and map them with `interpolate(...)` and
`Extrapolation.CLAMP` into `translateX` and `translateY`, each with its own
output range: `[-10, 10]` for the sky, `[-30, 30]` and `[-50, 50]` for the
tower (which also carries a constant `scale: 1.3` so its edges never enter the
frame), and `[20, -20]` and `[80, -80]` for the title. The title is the one
layer read over a wider input range (`[-250, 250]` rather than `[-100, 100]`),
and it carries a constant `scaleY: 1.5`; because its output range is reversed
it slides against the artwork instead of with it, and that opposition, not raw
distance, is the cue the eye reads as "this text is in front". All of that math
runs on the UI thread as Reanimated worklets, so the layers keep moving at
display rate even if the JavaScript thread is busy; only the sensor callback
itself crosses back to JavaScript. The bottom caption strip is a
separate trick: `easeGradient({ colorStops })` from react-native-easing-gradient
produces `colors` and `locations` arrays (transparent to black, with an eased
stop at 0.7), those feed a `LinearGradient` used as the `maskElement` of a
`MaskedView`, and the `BlurView` sits inside the mask, so the blur's own
opacity ramps instead of ending in a straight line. To retune the depth, change
only the output ranges in the three `useAnimatedStyle` blocks; to change the
sensitivity, change the `* 140` and `* 120` multipliers in the listener.

## What you get

```
components/
  card.tsx
assets/
  big-ben.png
  sky.png
  icon.png
  adaptive-icon.png
  splash-icon.png
App.tsx
index.ts
app.json
package.json
package-lock.json
tsconfig.json
README.md
```

- TypeScript source (`components/card.tsx`)
- Sample sky + landmark PNG assets
- Demo screen wiring the card into an Expo app
- README with install + usage
- MP4 preview

## Requirements

Gyro Parallax Card from Motionary is built and tested against the versions
pinned in the archive's `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`
- expo-sensors `~56.0.5`
- expo-blur `~56.0.3`
- expo-linear-gradient `~56.0.4`
- @react-native-masked-view/masked-view `0.3.2`
- react-native-easing-gradient `^1.1.1`
- react-native-gesture-handler `~2.31.1`
- typescript `~6.0.3` (devDependency)

Expo Go or development build: Gyro Parallax Card runs in Expo Go on Expo SDK
56. Everything `components/card.tsx` imports is bundled with Expo Go
(react-native-reanimated, expo-sensors, expo-blur, expo-linear-gradient,
@react-native-masked-view/masked-view), as is react-native-gesture-handler in
the demo `App.tsx`, while react-native-easing-gradient is pure JavaScript with
no native code at all. The project also pins expo-glass-effect (`~56.0.4`) and
@expo/ui (`~56.0.13`), template leftovers the card never imports; both are
bundled in Expo Go as of SDK 56 as well, so they do not force a dev client
either. A development build is still what you would ship to production, and it
is what you need the moment you add a native module Expo Go does not carry or a
config plugin of your own. Either way the card needs a physical iOS or Android
device: its only input is real motion data from expo-sensors' `Gyroscope`, so a
web preview supplies nothing and a simulator with no gyroscope renders the card
perfectly still. Run it in Expo Go with `npx expo start`, or build the dev
client with `npx expo run:ios` or `npx expo run:android`.

## Install

```bash
npx expo install react-native-reanimated react-native-worklets expo-sensors expo-blur expo-linear-gradient @react-native-masked-view/masked-view react-native-easing-gradient react-native-gesture-handler
```

## Usage

```tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { StyleSheet, View } from 'react-native';
import { Card } from './components/card';

export default function App() {
  return (
    <GestureHandlerRootView>
      <View style={styles.root}>
        <Card />
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
});
```

`Card` is a named export from `components/card.tsx` and takes no props: the
artwork, the layer depths and the caption are edited directly in the file,
which is the point of shipping source rather than a package.

## When to use it

- A "featured destination" or "featured place" card in a travel, hotel or
  booking app, where a static hero photo feels dead.
- An onboarding carousel where each slide should feel physical rather than
  swiped through.
- A collectible, ticket or membership card screen that wants to feel like an
  object you are holding.
- An editorial or story cover in a content app, where the headline should sit
  visibly in front of the photograph.
- A product or event hero where you have layered art (cut-out subject plus
  background) and want depth without a 3D engine.
- Any screen where you want motion the user causes without asking them to tap,
  drag or scroll anything.

## How to get it

- Buy this drop on its own at
  https://motionary.dev/animations/gyro-parallax-card, $7 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 make a 3D parallax card in React Native that follows the phone's
tilt?**
Read the gyroscope with expo-sensors, write the rotation rates into
react-native-reanimated shared values through `withTiming` to damp the noise,
then give every layer its own `useAnimatedStyle` that maps those same values
through `interpolate` with a different output range: small for the background,
large and inverted for the foreground. Motionary's Gyro Parallax Card
(https://motionary.dev/animations/gyro-parallax-card) is exactly that pattern,
finished and tuned, in a single `components/card.tsx`.

**Does Gyro Parallax Card work with Expo Go?**
Yes, on Expo SDK 56. Every module the card imports (react-native-reanimated,
expo-sensors, expo-blur, expo-linear-gradient and
@react-native-masked-view/masked-view) ships inside Expo Go, and so does
react-native-gesture-handler in the demo app; react-native-easing-gradient is
pure JavaScript. The two template leftovers the project pins but never imports,
expo-glass-effect and @expo/ui, are bundled in Expo Go as of SDK 56 too, so
they do not block it. A development build is still what you would ship to
production, and you need one as soon as you add a native module Expo Go does
not carry or a config plugin of your own. It needs a physical iOS or Android
device either way, because its only input is live gyroscope data.

**Does the gyroscope parallax effect work on both iOS and Android?**
Yes. Gyro Parallax Card uses expo-sensors' cross-platform `Gyroscope` API and
Reanimated transforms, both of which run on iOS and Android from the same
TypeScript source, with no per-platform branch in `components/card.tsx`.

**Why does my sensor-driven animation look jittery, and how does Motionary fix
it?**
Raw gyroscope samples are noisy, so binding them straight to a transform makes
the UI buzz. Gyro Parallax Card assigns every reading as
`gyroX.value = withTiming(data.x * 140)`, so each new sample becomes a short
animation rather than a jump, and clamps the result with
`Extrapolation.CLAMP` so a sharp flick cannot throw a layer out of frame.

**How do I fade a BlurView so it does not show a hard edge?**
Put the `BlurView` inside a `MaskedView` whose `maskElement` is a
`LinearGradient` running from transparent to black. Motionary's Gyro Parallax
Card builds that gradient with `easeGradient({ colorStops })` from
react-native-easing-gradient, which returns eased `colors` and `locations`
arrays, so the blur ramps off smoothly with no banding above the caption.

**How much does Gyro Parallax Card cost and what do I actually receive?**
Gyro Parallax Card is $7 USD on Motionary (price as of 2026-09-01, live price
at https://motionary.dev/animations/gyro-parallax-card) and is also covered by
the $79 lifetime pass at https://motionary.dev/pricing. You download the full
Expo project: the TypeScript source, the demo `App.tsx`, the sky and landmark
PNGs, and a README, all editable, licensed for unlimited personal and
commercial apps by a single developer.

**Can I swap in my own image and my own city?**
Yes. Gyro Parallax Card is plain React Native source, so you replace
`assets/sky.png` and `assets/big-ben.png` with your own background and cut-out
subject, edit the title text and captions in `components/card.tsx`, and retune
the depth by changing the `interpolate` output ranges for each layer.

## Related drops on Motionary

- Holographic Card ($9): https://motionary.dev/animations/holographic-card
  The touch-driven counterpart to Gyro Parallax Card: 3D tilt, parallax and a
  moving spotlight sheen, driven by a pan gesture instead of the gyroscope.
- Infinite Loophole (Free): https://motionary.dev/animations/infinite-loophole
  Another Motionary drop that reads device motion and applies parallax, here to
  a looping card stack and tab bar rather than a single card.
- Liquid Glass Level ($5): https://motionary.dev/animations/liquid-glass-level
  A spirit level built on the accelerometer, the closest sibling to Gyro
  Parallax Card if you want the sensor-to-Reanimated pattern on a different
  sensor.
- X-Ray Reveal ($5): https://motionary.dev/animations/x-ray-reveal
  Uses the same react-native-masked-view masking technique that Gyro Parallax
  Card uses to fade its blur, applied to revealing one image through another.
- Stacked Cards ($4): https://motionary.dev/animations/stacked-cards
  A snapping card carousel to place Gyro Parallax Card inside when you need a
  scrollable row of destination cards.

## 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/gyro-parallax-card/llms.txt
Describes: https://motionary.dev/animations/gyro-parallax-card
Format: llms.txt (https://llmstxt.org)
Last updated: 2026-09-01
```