# Vinyl Record Crate — React Native component from Motionary

> A 3D album carousel for React Native: flick through a crate of vinyl sleeves, then tap one to lift it out and slide the record from its sleeve. Drawn with WebGPU on Skia's own Graphite device, with soft shadows, depth of field, a haptic tick per record and four rooms. Drop it into a music library or record store app that should feel physical.

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

## What it is

A 3D album carousel for React Native: flick through a crate of vinyl sleeves, then tap one to lift it out and slide the record from its sleeve. Drawn with WebGPU on Skia's own Graphite device, with soft shadows, depth of field, a haptic tick per record and four rooms. Drop it into a music library or record store app that should feel physical.

## How it works

Skia v3 renders through Graphite on Dawn, and react-native-webgpu's importDevice wraps that same device, so the WebGPU passes and Skia's drawing share one queue and textures pass between them without copies. Everything that moves runs on the UI thread in a single Reanimated useFrameCallback worklet. Gesture.Pan and Gesture.Tap only write shared values; the engine reads them at the start of the next frame, advances the dig and lean springs and the pull-out (lift, centre, hold, open), encodes the WebGPU passes, records a Skia frame that composites them, and fires Pulsar haptics on the frame the event happens. When everything is at rest it stops drawing. React re-renders only the HUD, and only when the front or held record changes. The scene renders in linear HDR into a 4x MSAA target with a 2048 x 2048 shadow map, spherical harmonics ambient light and anisotropic GGX on the vinyl grooves, then a 41-tap bokeh depth of field and Khronos PBR Neutral tone mapping. Every cover, label, poster and wood grain is drawn by Skia at launch into a mipmapped texture array; there are no image assets. It needs a development build, not Expo Go: Expo SDK 57, New Architecture, iOS 15+, and it runs on the iOS Simulator. Android is configured (minSdk 26) but iOS is the documented target. A bundled patch makes SkiaGraphiteView present at 120 Hz on ProMotion screens.

## What you get

- TypeScript source (Crate.tsx, scene engine, camera, compositor, Hud.tsx)
- WebGPU renderer and WGSL shaders (renderer.ts, shaders.ts, env.ts)
- Skia-drawn artwork: 13 covers, labels, posters, room textures (art.ts)
- Four switchable rooms (backdrops.ts) and a Pulsar haptics map (haptics.ts)
- react-native-skia 3.0.1 patch for 120 Hz presentation

## 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/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/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 Vinyl Record Crate on its own at https://motionary.dev/animations/vinyl-record-crate 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
- Voice Glow Carousel ($7 USD): https://motionary.dev/animations/voice-glow-carousel
- Freeze Card ($9 USD): https://motionary.dev/animations/freeze-card
- ChatGPT Image-Gen Dot Field ($5 USD): https://motionary.dev/animations/chatgpt-image-gen-dot-field

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