Skip to content
Native Animation
Particle Wordmark animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add particle-wordmark
Skia

Particle Wordmark

A particle splash that gathers into a wordmark, with configurable wordmark text, tagline, gradient colors, and wordmark font asset.

$9 for this animation

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.

About this animation

A particle splash that gathers into a wordmark, with configurable wordmark text, tagline, gradient colors, and wordmark font asset.

Why this one

Typical particle logos either animate a fixed bitmap or render hundreds of React views. This component rasterizes any supplied wordmark font once, samples the glyphs into roughly 900 deterministic points, and renders the complete field in a handful of Skia Points draws. The same continuous formation progress drives scatter, delayed convergence, copy, and loading feedback. Once settled, a real or simulated finger sweep pushes particles aside with distance-weighted force before the spring restores the mark. The traveling highlight is made from bright particles inside the glyphs, never an opaque block over the text.

How it works

  1. The component measures its own container and rasterizes the wordmark once with the supplied Skia font.
  2. A two-point sampling grid is deterministically reduced to at most 920 particles, each with a stable delay, size, phase, and full-screen scatter position.
  3. One shared progress value drives delayed convergence, trail positions, supporting copy, and the loading indicator.
  4. Five batched Skia point draws render three particle sizes and two fading trail positions without mounting a component per particle.
  5. A UI-thread pan gesture applies inverse-distance repulsion inside a configurable radius, then springs the field home.
  6. A narrow set of bright points travels through the glyph material after formation to create the shimmer.

Install

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

Wrap the app with GestureHandlerRootView. On web, initialize CanvasKit before importing this component and pass a font asset through wordmarkFont.

Usage

import { ParticleWordmark } from './ParticleWordmark';

export function Splash() {
  return <ParticleWordmark wordmark="Northstar" tagline="Everything in reach." />;
}

Customize the brand treatment and replay it from a ref:

const wordmarkRef = useRef<ParticleWordmarkRef>(null);

<ParticleWordmark
  ref={wordmarkRef}
  wordmark="Northstar"
  tagline="Everything in reach."
  wordmarkFont={require('./Northstar-Semibold.ttf')}
  startColor="#8B5CF6"
  endColor="#2563EB"
  interactionRadius={72}
  onFormed={() => trackSplashReady()}
/>

The forwarded ref exposes replay() and complete().

Props

PropTypeDefaultDescription
wordmarkstring'Welcome'Word formed by the particles.
taglinestring'Made for every moment.'Supporting line shown after formation.
startColorstring'#7C5CFF'Left edge of the particle gradient.
endColorstring'#3B82F6'Right edge of the particle gradient.
backgroundColorstring'#05060D'Night-sky background color.
interactionRadiusnumber60Radius of the interactive repulsion field in points.
wordmarkFontDataSourceParamundefinedFont file used to rasterize the wordmark into particles.
fontFamilystringundefinedTypeface used for the tagline and replay control.
mediumFontFamilystringundefinedTypeface used for the replay control.
autoStartbooleantrueStarts the entrance after the component and font are ready.
showReplaybooleantrueShows the built-in replay control.
onFormed() => voidundefinedCalled after the wordmark finishes forming.
accessibilityLabelstring${wordmark}. ${tagline}Screen-reader label for the animated scene.
styleStyleProp<ViewStyle>undefinedOptional style for the outer container.
testIDstringundefinedTest identifier applied to the outer container.
durationnumber680Wordmark highlight sweep duration in milliseconds. Spring physics and reduced-motion timing are unchanged.

Compatibility

  • Expo SDK 58
  • React Native 0.88.0
  • Reanimated 4.7.1 and Worklets 0.13.0
  • React Native Skia 2.14.0
  • iOS, Android, and web: supported
  • Expo Go: supported by the SDK 58 bundled modules; use a development build after adding native dependencies to another Expo app

Accessibility

The scene has a single descriptive accessibility label, and Replay is a labeled 44-point button. Screen-reader activation on the scene also replays it. Reduced Motion removes scatter, drift, breathing, shimmer, and gesture repulsion; the completed wordmark and supporting copy appear with a short fade instead.

More animations