# Clothing Rack — complete React Native app from Motionary

> A rail of real 3D garments you can browse, lift off and twirl. Each garment is cut from a sewing pattern and draped onto its hanger by a cloth simulation; drag along the rail and the hangers slide, bump, swing and turn to face you, tap one and it lifts off the rod, twirls and comes forward as the rest slide away and fall out of focus.

Build page: https://motionary.dev/builds/clothing-rack
Price: $32 USD (live price on the build page)
License: single developer, unlimited personal and commercial apps
Delivery: instant download of the whole app source after checkout
Stack: react native skia, react native, expo
Screens and animations inside: 5
Sold by: Motionary (https://motionary.dev)

## What it is

A rail of real 3D garments you can browse, lift off and twirl. Each garment is cut from a sewing pattern and draped onto its hanger by a cloth simulation; drag along the rail and the hangers slide, bump, swing and turn to face you, tap one and it lifts off the rod, twirls and comes forward as the rest slide away and fall out of focus.

A Motionary Build is one real app shipped end to end: the whole app source plus
every drop flying inside it, including screens that were never listed as a drop
on their own.

## How it works

Everything moving runs in one Reanimated frame callback on the UI thread. Gestures only leave input; the engine reads it, steps the physics at a fixed 480 Hz (stiff critically damped hook followers, rail contacts that push neighbours apart from their current turned footprints, pendulum swings driven by the hooks' actual acceleration, spring and two-stage yaw), writes the camera, model matrices and cloth-sim inputs, and encodes WebGPU work on Skia v3's own Graphite device obtained with importDevice(Skia.getNativeDevice()): one compute dispatch advances a 10×16 Verlet lattice per garment in the garment's swinging frame, a depth pass from the key light fills a shadow map, then two MSAA render passes draw the rack and the lifted garment with a single fabric/wood/chrome WGSL pipeline whose vertex stage bends each baked garment by its lattice (bicubic). The garments themselves are made offline by tools/drape: sewing patterns laid out as a paper doll, meshed with near-equilateral triangles, dropped onto the app's hanger in an XPBD cloth simulation (stretch, isometric bending, hanger and self contact with friction, rib cut short to gather) and baked with ambient occlusion and seam/hem distances into one asset each. The resolved textures are wrapped as SkImages once and composited by a SkiaGraphiteView recording: an SkSL pegboard wall, a drop shadow from the upper-left key, a stepped depth-of-field blur (pre-warmed so Graphite never compiles mid-transition), a veil and the hero layer with a distance-dependent shadow. Prints are drawn by Skia directly into the garments' GPU textures and mapped through the pattern coordinates; the knit is a CC0 Poly Haven jersey scan. Haptics come from Pulsar inside the physics worklet. Built on Expo SDK 57, React Native 0.86, Reanimated 4.5, react-native-skia 3.0.1 and react-native-webgpu 0.10.4; requires a development build.

## What you get

- Garments cut from real sewing patterns (tee, long-sleeve, crewneck) and draped offline by an XPBD cloth simulation onto the app's own hanger: stretch, isometric bending, hanger and cloth contact, gathered rib cuffs, waistband and collar
- Baked per garment: ambient occlusion outside and inside, seam and hem distances, pattern coordinates — one seed per garment so no two hang alike
- WGSL renderer on Skia v3's own WebGPU device: knit normals and heather, prints that follow the folds, seam grooves and double-needle hem stitching, clear-coated wood, studio chrome, 4× MSAA
- Soft key-light shadows on the rail from a shadow map (bilinear PCF that works on the iOS Simulator too)",     "GPU cloth lattice per garment (Verlet + Jacobi in workgroup memory) driven by the swing's fictitious forces, applied bicubically so the shading stays smooth

## How to get it

- Buy Clothing Rack at https://motionary.dev/builds/clothing-rack for $32 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
- You receive the real TypeScript React Native source of the whole app, not a
  video, a GIF or a design file.

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