0:00/0:00

Recorded on iPhone. The orb pours into the Expo mark, then into a typed "expo". The settings sheet then picks the X logo and tints the particles gold.

Shader

Particle Morph

A glowing orb of 240,000 particles that pours into your logo, a word or an emoji, and back again.

$16

Or get it with Pro

Features

240,000 glowing particles that pour into your logo, a word or an emoji
Tap and the orb becomes your shape. Tap again and it gathers back up
Drag a finger through it and the particles scatter, then spring back
Use your brand colour, over black or your own background
Calm, default or lively, depending on the mood you want
Works on iPhone and Android from the same code, and looks the same on both
Runs on the GPU, so the rest of your app stays smooth

Built with

WebGPU
WGSL compute shaders
react-native-webgpu
Skia

Installation

1Install dependencies

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

2Wrap your app in GestureHandlerRootView

import { Stack } from 'expo-router';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Stack />
    </GestureHandlerRootView>
  );
}

3Android only: raise minSdkVersion to 26 (WebGPU needs it)

npx expo install expo-build-properties

Then add the plugin to app.json:

3Android only: raise minSdkVersion to 26 (WebGPU needs it)

{
  "expo": {
    "plugins": [
      ["expo-build-properties", { "android": { "minSdkVersion": 26 } }]
    ]
  }
}

4Run a development build (Expo Go can't load WebGPU)

npx expo run:ios   # or: npx expo run:android

Usage

import { ParticleMorph } from '@/components/particle-morph';

export function Splash() {
  return <ParticleMorph svg={require('./logo.svg')} />;
}

Tap the orb to pour it into your logo, and tap again to bring it back.

How it works

Every grain has a fixed home in the orb. Each frame a WebGPU compute pass drifts, spins and lights all 240,000 of them and blends each toward its spot on the shape, then a render pass draws them as soft, additive points. Grains are paired with their targets by angle, which is why the orb visibly pours into the shape instead of scattering. Nothing touches React while it animates.

More once you own it

Examples, the full list of props and every advanced option for Particle Morph are here for owners.

Next componentProgressive Blur