# Particle Onboarding — React Native component from Motionary > An onboarding carousel where 16,000 particles morph from an atom into DNA, the Earth and a galaxy, driven directly by your swipe. The particles are rendered with WebGPU on React Native Skia's own GPU device, so the morph tracks the scroll position and can stop or reverse mid-swipe. Use it as the first-run screen of a science, education or space app. Product page: https://motionary.dev/animations/particle-onboarding Price: $11 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, shaders, react native skia Rarity: legendary Sold by: Motionary (https://motionary.dev) ## What it is An onboarding carousel where 16,000 particles morph from an atom into DNA, the Earth and a galaxy, driven directly by your swipe. The particles are rendered with WebGPU on React Native Skia's own GPU device, so the morph tracks the scroll position and can stop or reverse mid-swipe. Use it as the first-run screen of a science, education or space app. ## How it works The particle layer is drawn with react-native-webgpu on the Dawn device that React Native Skia v3 already uses for Graphite, obtained through Skia.getNativeDevice(). Because both libraries share one device, each frame's resolve texture is wrapped as an SkImage with no copy or readback, then composited in a Skia Canvas with two blurred additive bloom passes, a star field and a powers-of-ten scale readout. The render loop is a worklet on the UI thread: it reads the Reanimated shared value set by an animated FlatList scroll handler, writes the uniforms and submits one instanced draw of 16,000 camera-facing quads, so the morph keeps pace with the finger even when the JS thread is busy. All five point clouds (four shapes plus the opening dust) are generated procedurally in TypeScript and ordered along a 3D Hilbert curve, so particle i travels a short path between shapes. The WGSL shader draws each particle as a sphere impostor that writes real depth and antialiases by writing a 4x MSAA sample mask instead of blending, so nothing is sorted. It needs a development build: Expo Go ships Skia v2, which has no Graphite device, and there is no fallback renderer, so the screen shows an error instead of the particles. Built against Expo SDK 57 and Reanimated 4. Android needs Vulkan and minSdk 26. Skia and react-native-webgpu must share a Dawn version, so upgrade them together. ## What you get - TypeScript source (OnboardingScreen.tsx, Backdrop.tsx, SlideContent.tsx, Stepper.tsx) - useParticleRenderer hook: WebGPU on Skia's Dawn device with a UI-thread frame loop - WGSL particle shader (shader.ts) and procedural shapes (shapes.ts, hilbert.ts) - Demo app (App.tsx) with a replay button - README with stack, architecture and run notes ## Requirements - Expo SDK: `expo@~57.0.27` (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`, `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 react-native-reanimated react-native-skia react-native-webgpu react-native-worklets ``` ## How to get it - Buy Particle Onboarding on its own at https://motionary.dev/animations/particle-onboarding for $11 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 - Hold to Confirm Button ($8 USD): https://motionary.dev/animations/hold-to-confirm-button - Halo Button ($5 USD): https://motionary.dev/animations/halo-button - 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/particle-onboarding/llms.txt Describes: https://motionary.dev/animations/particle-onboarding Format: llms.txt (https://llmstxt.org)