# Folding Map — React Native component from Motionary

> A 3D paper fold animation in React Native and WebGPU: tap a road map on a wire rack and it opens in your hands, ready to pinch, twist and pan. WebGPU folds one paper mesh in the vertex shader, Skia paints all nine maps in code with no image assets, and a drag scrubs the fold under your finger. Drop it into a travel app as a saved-routes screen.

Product page: https://motionary.dev/animations/folding-map
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: expo, reanimated, react native, react native skia, shaders
Rarity: legendary
Sold by: Motionary (https://motionary.dev)

## What it is

A 3D paper fold animation in React Native and WebGPU: tap a road map on a wire rack and it opens in your hands, ready to pinch, twist and pan. WebGPU folds one paper mesh in the vertex shader, Skia paints all nine maps in code with no image assets, and a drag scrubs the fold under your finger. Drop it into a travel app as a saved-routes screen.

## How it works

The fold is one grid of paper, 57 lines each way, bent in a WGSL vertex shader through react-native-webgpu. Each axis is a strip of flat runs joined by circular arcs, so creases bow while they open and the layers nest as real paper does. Skia v3 on Graphite paints every cover and map, and react-native-webgpu imports Skia's own Dawn device, so textures pass between Skia and the shadow, scene and depth-of-field passes with no copies. Every moment of the motion is a function of one clock, so a tap runs it forward, Put back runs it backward and a drag scrubs it. A single Reanimated useFrameCallback worklet runs the engine, GPU encoding and Skia recording on the UI thread. Gesture.Pan, Gesture.Tap and a Gesture.Manual pinch only write shared values, and the scene is built once on the JS thread. Pulsar haptic ticks are triggered from the worklet and played on the JS thread, so waking the haptic engine does not stall the UI thread. The title band blur is a local Swift Expo module using a private iOS CAFilter: it degrades to no blur if Apple changes the internals, may draw App Store review attention, and renders nothing on Android. Android is configured, but the README documents only an iOS run. Built on Expo SDK 57. It needs a development build because of the Swift module and react-native-webgpu, so it does not run in Expo Go.

## What you get

- TypeScript source (src/MapRack.tsx, src/scene/engine.ts, src/scene/timeline.ts)
- WebGPU renderer and WGSL shaders (src/gpu/renderer.ts, src/gpu/shaders.ts)
- Nine maps and sleeves painted in Skia (src/gpu/textures)
- iOS progressive blur Expo module (modules/progressive-blur)
- Skia frame-pacing patch (patches/react-native-skia+3.0.1.patch)

## 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/alfa-slab-one`, `@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/alfa-slab-one @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 Folding Map on its own at https://motionary.dev/animations/folding-map 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

- Halo Button ($5 USD): https://motionary.dev/animations/halo-button
- Freeze Card ($9 USD): https://motionary.dev/animations/freeze-card
- Zipper Curtain ($12 USD): https://motionary.dev/animations/zipper-curtain
- Pool Water Shader ($12 USD): https://motionary.dev/animations/pool-water-shader

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