# Liquid Pour Simulation — React Native component from Motionary > A real-time liquid simulation for React Native: hold to pour water, milk or wine into a wine glass, tip it over, and watch it splash, all on the GPU. Up to 16,384 particles run in WebGPU compute shaders on Skia's own device, so each frame reaches the canvas with no copy, and spills spread into puddles on the table. Use it as a drinks app hero screen or a WebGPU reference. Product page: https://motionary.dev/animations/liquid-pour-simulation 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, reanimated, react native skia Rarity: legendary Sold by: Motionary (https://motionary.dev) ## What it is A real-time liquid simulation for React Native: hold to pour water, milk or wine into a wine glass, tip it over, and watch it splash, all on the GPU. Up to 16,384 particles run in WebGPU compute shaders on Skia's own device, so each frame reaches the canvas with no copy, and spills spread into puddles on the table. Use it as a drinks app hero screen or a WebGPU reference. ## How it works The liquid is a particle fluid solved with double density relaxation (Clavet, Beaudoin and Poulin 2005), run as Jacobi passes in WGSL compute shaders through react-native-webgpu. Neighbours come from a counting sort into a grid rebuilt every substep, the wine glass is a two-sided collider in its own rotating frame so liquid can only leave over the rim, and a GPU free list recycles a fixed pool of 16,384 particles. useFluidRenderer takes Skia's Dawn device from Skia.getNativeDevice() and imports it into WebGPU, so the shaded frame is wrapped as an SkImage with no copy and no readback, then Skia composites it with a bloom and draws the glass on top. The whole frame loop is a worklet scheduled onto the UI thread with react-native-worklets; touches go through the React Native responder system on the JS thread and reach the loop as Reanimated shared values. expo-haptics fires splashes timed from the same ballistics the simulation runs, expo-sensors tilts gravity from the accelerometer, and the loop pauses when the app is backgrounded. If a frame owes more than 8 substeps the simulation slows down instead of skipping, and render scale is capped at 2x. Built on Expo SDK 57 (React Native 0.86). It needs a development build: Expo Go ships Skia v2 and this needs Skia v3 (Graphite). Android needs minSdk 26, set through expo-build-properties. ## What you get - TypeScript source (PourScreen.tsx, Stage.tsx, Glass.tsx, LiquidPicker.tsx) - useFluidRenderer hook: WebGPU on Skia's device, UI-thread frame loop - WGSL shaders (sim.ts, splat.ts, shade.ts) - Water, milk and wine presets (liquids.ts) + tunables in config.ts - Demo app on Expo SDK 57 (App.tsx, app.json) ## Requirements - Expo SDK: `expo@~57.0.31` (the version this drop is built and tested on) - React Native: `react-native@0.86.3` - Runtime dependencies: `expo-build-properties`, `expo-dev-client`, `expo-haptics`, `expo-sensors`, `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-build-properties expo-dev-client expo-haptics expo-sensors react-native-reanimated react-native-skia react-native-webgpu react-native-worklets ``` ## How to get it - Buy Liquid Pour Simulation on its own at https://motionary.dev/animations/liquid-pour-simulation 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 - Vinyl Record Crate ($10 USD): https://motionary.dev/animations/vinyl-record-crate - 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 ## 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/liquid-pour-simulation/llms.txt Describes: https://motionary.dev/animations/liquid-pour-simulation Format: llms.txt (https://llmstxt.org)