Skip to content
Native Animation
Token Rain Onboarding animation preview
OnboardingSkia

Token Rain Onboarding

React Native Token Rain Onboarding with Grid and Orbit

A dark three-scene onboarding pattern where colorful generic tokens rain into a luminous capsule, organize into a grid, and burst into orbit.

$9 for this animation

Checkout opens soon. Leave your email and we will tell you the moment you can buy it.

One email when checkout opens. No spam.

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

npx nativeanimation add token-rain-onboarding

About this animation

A React Native token rain animation can introduce a sequence of ideas through a single changing illustration. This dark onboarding component sends colorful generic tokens into a luminous capsule, organizes them into a three-by-three grid, and moves them into a radial orbit. Skia draws the bars, capsule, original emblem, token glyphs, and stars in one canvas. A continuous Reanimated scene value controls transitions between all three layouts, while a shared frame clock handles floating, pulses, and twinkling without per-frame React renders. Use it for a finance-themed introduction, a collection overview, an organization metaphor, or a three-step feature welcome. Customize scene titles, palette, action labels, legal text, fonts, and autoplay interval, connect action and scene callbacks, or choose a scene and replay through the ref.

When to use it

  • Introduce finance-themed features with generic tokens.
  • Show a collection organizing into a grid.
  • Present a three-scene onboarding narrative.
  • Transition tokens from rain to orbit.

A dark three-scene onboarding pattern where colorful generic tokens rain into a luminous capsule, organize into a grid, and burst into orbit.

How it works

  1. The component measures its own container and derives the entire composition from its width and height.
  2. One continuous scene shared value moves each token between its loose welcome position, its 3-by-3 grid cell, and its radial orbit.
  3. A single frame clock drives floating, grid pulses, twinkling stars, and the slow orbit without causing React renders.
  4. Skia draws every visual element in one canvas: falling bars, the moving gradient capsule, the original Orbit emblem, tokens, glyphs, and stars.
  5. Autoplay and the primary button use the same scene controller. The forwarded ref exposes deterministic goTo and replay controls.

Install

npx expo install @shopify/react-native-skia react-native-reanimated react-native-worklets

For web, initialize Skia before rendering the app:

import { LoadSkiaWeb } from '@shopify/react-native-skia/lib/module/web';

await LoadSkiaWeb({
  locateFile: (file) => `/${file}`,
});

Copy canvaskit.wasm from node_modules/canvaskit-wasm/bin/full/ into your web public directory. No extra step is needed if your Expo web entry already loads Skia.

Usage

import TokenRainOnboarding from './TokenRainOnboarding';

export function WelcomeScreen() {
  return <TokenRainOnboarding />;
}

Customize the content, timing, palette, and actions:

<TokenRainOnboarding
  titles={['Welcome to Northstar', 'Everything in one view', 'Move money in a moment']}
  palette={['#67E8F9', '#FDE047', '#C4B5FD', '#6EE7B7']}
  sceneSeconds={4}
  fontFamily="YourBodyFont"
  titleFontFamily="YourDisplayFont"
  onPrimaryPress={() => track('primary')}
  onSecondaryPress={() => openSignIn()}
  onSceneChange={(index) => track('scene', index)}
/>

The forwarded ref exposes goTo(0 | 1 | 2) and replay().

Props

PropTypeDefaultDescription
titles[string, string, string]Orbit welcome titlesTitle for each scene.
primaryLabelstring'Create account'Main action label; pressing it also advances the scene.
secondaryLabelstring'I already have an account'Secondary action label.
legalTextstringTerms and privacy sentenceLegal copy above the actions.
palettestring[]Seven bright colorsColors used by bars and tokens.
sceneSecondsnumber3.2Seconds before autoplay advances; zero disables autoplay.
fontFamilystringSystem fontFont family for legal copy and actions.
titleFontFamilystringSystem fontFont family for scene titles.
onPrimaryPress() => void—Called when the main action is pressed.
onSecondaryPress() => void—Called when the secondary action is pressed.
onSceneChange(index: number) => void—Called after a scene transition completes.
styleStyleProp<ViewStyle>—Outer-container style.
testIDstring—Test identifier for the outer container.

Compatibility

  • Expo SDK 57
  • React Native 0.86
  • Reanimated 4.5
  • React Native Skia 2.6
  • iOS: supported, not yet verified on a device
  • Android: supported, not yet verified on a device
  • Web: supported, not yet visually verified; requires CanvasKit setup
  • Works in Expo Go because the native dependencies are included in Expo SDK 57

Accessibility

Both actions expose button roles and readable labels. The active title is exposed as a single accessible element. With reduced motion enabled, rain, floating, pulsing, and orbiting stop; scene changes use a short 250 ms fade.

FAQ

Can I control the token onboarding scenes manually?
Yes. The ref exposes goTo with scene 0, 1, or 2 and replay. The primary action also advances the scene, while sceneSeconds of 0 disables autoplay.
Can I replace the titles and token colors?
Yes. titles supplies one heading for each of the three scenes. Configure palette, primaryLabel, secondaryLabel, legalText, fontFamily, and titleFontFamily.
Does token rain work in Expo Go and with Reduce Motion?
Yes. Skia, Reanimated, and Worklets are included in Expo SDK 57; web needs CanvasKit setup. Reduce Motion stops rain, floating, pulses, and orbiting and uses 250 ms scene fades.

More animations