Skip to content
Native Animation
Payment Success Burst animation preview

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

npx nativeanimation add payment-success-burst
Skia

Payment Success Burst

A payment confirmation with a drawn ring, rolling amount, and receipt reveal, with configurable amount, recipient details, success color, and fonts.

$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 payment confirmation with a drawn ring, rolling amount, and receipt reveal, with configurable amount, recipient details, success color, and fonts.

Why this one

Most payment confirmations replace the whole screen or drop a generic checkmark into place. This version preserves spatial continuity: the action itself contracts, processes, rises, and becomes the success symbol. The celebration combines a continuous ring, a traced Lucide check, deterministic physical particles, and a rolling amount without placing opaque effect blocks over the interface. The receipt remains useful after the wow moment, with readable details and interruptible reverse motion.

How it works

  1. One Reanimated shared value drives the receipt from idle (0) to complete (1); crossing the check threshold starts a separate linear celebration clock.
  2. The send pill springs into a processing circle, then moves to the success position and expands.
  3. Skia draws the progress ring and Lucide check from their path end values.
  4. Sixteen curated particles rendered in Reanimated views burst upward and sideways from the check over 1.4 seconds on web and native (animated Skia props are static in this SDK's web renderer), staying visible for more than 0.8 seconds regardless of the receipt easing or reveal duration. Analytic air resistance slows their travel and rotation, soft gravity bends the upper fan, and a smooth fade removes every particle above the launch center before it can fall onto the receipt.
  5. The supplied amount slides into clipped one-line masks without placeholder digits while the glass receipt rises and reveals rows at 50 ms intervals.
  6. Calling reset() clears the burst and animates the receipt progress backward, so every transition can be interrupted.

Install

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

Usage

import { useRef } from 'react';
import {
  PaymentSuccessBurst,
  type PaymentSuccessBurstRef,
} from './PaymentSuccessBurst';

const ref = useRef<PaymentSuccessBurstRef>(null);

<PaymentSuccessBurst ref={ref} amount="$84.00" recipientName="Alex Rivera" />;
<PaymentSuccessBurst
  ref={ref}
  brandName="Aster"
  amount="$240.00"
  recipientName="Maya Reyes"
  recipientInitials="MR"
  recipientHandle="@mayareyes"
  note="Dinner + concert tickets"
  successColor="#34D399"
  brandColor="#A78BFA"
  sourceAccount="Checking ···· 8210"
  arrival="Instantly"
  reference="PAY-48213-K"
  date="10/10/2026, 6:42 PM"
  onShare={shareReceipt}
/>

The forwarded ref exposes send() and reset().

Props

PropTypeDefaultDescription
brandNamestring'Payments'Product brand shown in the header.
recipientInitialsstring'AR'Recipient initials.
recipientNamestring'Alex Rivera'Recipient display name.
recipientHandlestring'@alexrivera'Recipient handle.
amountstring'$240.00'Formatted payment amount.
notestring'Dinner and tickets'Payment note shown on the form.
sourceAccountstring'Checking ···· 8210'Source account detail.
arrivalstring'Instantly'Arrival detail.
referencestring'PAY-48213-K'Receipt reference.
datestring'10/10/2026, 6:42 PM'Localized receipt date.
backgroundColorstring'#07060B'Background color.
successColorstring'#34D399'Success accent color.
brandColorstring'#A78BFA'Brand accent color.
fontFamilystringundefinedInterface font family.
mediumFontFamilystringundefinedMedium interface font family.
titleFontFamilystringundefinedEditorial success-title font family.
monoFontFamilystringundefinedMonospaced receipt-reference font family.
onSuccess() => voidundefinedCalled after the complete success sequence settles.
onShare() => voidundefinedCalled when Share receipt is pressed.
onDone() => voidundefinedCalled when Done is pressed after reset begins.
sendAccessibilityLabelstringundefinedAccessible label for the send action.
styleStyleProp<ViewStyle>undefinedOptional outer-container style.
testIDstringundefinedOptional test identifier.
durationnumber1120Success receipt reveal duration in milliseconds. The 1.4-second particle burst, spring physics, and reduced-motion timing are unchanged.

Icons: Lucide (ISC).

Compatibility

Built for Expo SDK 58, React Native 0.88, Reanimated 4.7, Worklets 0.13, and React Native Skia 2.14. Supports iOS, Android, and web. The installed modules work in Expo Go for the matching SDK.

Accessibility

Send, Share receipt, Done, and Replay expose button roles and descriptive labels with touch targets of at least 44 pt. The success result uses a polite live region. Reduced Motion replaces travel, rotation, particles, and spring celebration with a direct 190 ms state fade while preserving the complete receipt.

More animations