# Postcard Rack — React Native component from Motionary

> A 3D card carousel for React Native: spin a wire rack of 24 illustrated postcards, tap one to pull it out, then flip it to read the handwritten back. Skia v3 and WebGPU share one GPU device for window light, shadows and depth of field, all driven from a single Reanimated frame callback. Drop it into a travel, gallery or collection screen where browsing should feel physical.

Product page: https://motionary.dev/animations/postcard-rack
Price: $10 USD (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: react native, expo, react native skia, shaders, react native gesture handler
Rarity: legendary
Sold by: Motionary (https://motionary.dev)

## What it is

A 3D card carousel for React Native: spin a wire rack of 24 illustrated postcards, tap one to pull it out, then flip it to read the handwritten back. Skia v3 and WebGPU share one GPU device for window light, shadows and depth of field, all driven from a single Reanimated frame callback. Drop it into a travel, gallery or collection screen where browsing should feel physical.

## How it works

Everything that moves runs in one Reanimated useFrameCallback worklet on the UI thread. A raced Gesture.Pan and Gesture.Tap only write shared values; each frame the engine reads them, steps the spin (it follows your finger, coasts, then springs to a side) and the rock and flutter springs at 240 Hz, ray-casts a tap against every card plane, encodes the WebGPU passes and records the Skia frame that composites them. After 0.6 s of stillness it stops drawing. Skia v3 renders through Graphite on Dawn, and react-native-webgpu wraps that same device with importDevice, so the 3D passes and Skia share one queue and textures cross with no copy: a 2048 px shadow map from the sun, a 4x MSAA HDR scene pass, then a 41-tap bokeh depth of field, Khronos PBR Neutral tone mapping and sRGB encode, all in WGSL. Every postcard, front and back, is painted in Skia as an SkPicture, so there are no image assets, and scripts/check-rack.mjs proves no card ever touches another card or the rack. The JS thread only plays Pulsar haptic ticks and re-renders the HUD when the scene is at rest. The title blur is a local Expo module over iOS's private variable-blur filter: it renders nothing on Android and, being a private API, may draw App Store review attention. It needs a development build (npx expo run:ios), not Expo Go, and was built on Expo SDK 57, React Native 0.86 and Reanimated 4.5.

## What you get

- TypeScript source (Rack.tsx, scene engine, WebGPU renderer, WGSL shaders)
- 24 postcards painted in Skia, no image assets (postcards.ts, catalog.ts)
- ProgressiveBlur Expo module (iOS, Swift)
- Collision proof script (scripts/check-rack.mjs)
- patch-package fix for SkiaGraphiteView 120 Hz frame pacing

## Requirements

- Expo SDK: `expo@~57.0.26` (the version this drop is built and tested on)
- React Native: `react-native@0.86.3`
- Runtime dependencies: `@expo-google-fonts/caveat`, `@expo-google-fonts/dm-mono`, `@expo-google-fonts/instrument-sans`, `@expo-google-fonts/instrument-serif`, `babel-preset-expo`, `expo-build-properties`, `react-native-gesture-handler`, `react-native-pulsar`, `react-native-reanimated`, `react-native-skia`, `react-native-webgpu`, `react-native-worklets`
- Runs in Expo Go: this drop uses no native module beyond what Expo Go already bundles on Expo SDK 56. A development build is still what you would ship to production, and is required as soon as you add a native module Expo Go does not carry.

## Install

```bash
npx expo install @expo-google-fonts/caveat @expo-google-fonts/dm-mono @expo-google-fonts/instrument-sans @expo-google-fonts/instrument-serif babel-preset-expo expo-build-properties react-native-gesture-handler react-native-pulsar react-native-reanimated react-native-skia react-native-webgpu react-native-worklets
```

## How to get it

- Buy Postcard Rack on its own at https://motionary.dev/animations/postcard-rack for $10 USD. Secure Stripe checkout, instant download, no subscription and no renewal.
- Or get it with the Motionary lifetime pass: every drop and every build,
  current and future, for one payment with no renewal. https://motionary.dev/pricing
- A team license covers up to 10 developers, each 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.

## Related drops on Motionary

- Siri Answer Island ($12 USD): https://motionary.dev/animations/siri-answer-island
- Glass Magnifier ($10 USD): https://motionary.dev/animations/glass-magnifier
- Dot Wave Slider ($10 USD): https://motionary.dev/animations/dot-wave-slider
- Folding Map ($10 USD): https://motionary.dev/animations/folding-map

## 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 that covers every drop and every build, current and future,
for one payment with no subscription. A team license covers a whole squad, each
developer with their own account. Checkout is Stripe and delivery is an instant
download. Created and curated by Motionary (https://motionary.dev).

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/postcard-rack/llms.txt
Describes: https://motionary.dev/animations/postcard-rack
Format: llms.txt (https://llmstxt.org)