About this animation
A gift-card composer with an envelope-folding send animation and configurable amounts, card designs, fonts, and accent color.
Why this one
A gift should feel like an object worth giving. A slow violet (#7C3AED), pink (#EC4899), and amber (#F59E0B) mesh flows inside the card. Tilt changes its iridescent hue and specular band, fine glitter catches the light, and fully opaque white branding and an embossed amount stay readable. The card folds away as the paper envelope closes; an embossed violet wax seal drops, compresses once, and stays attached through the flight. An 8-point anticipation leads into a curved launch, a fading light trail, twelve particles, and a soft background ripple before confirmation.
How it works
- The container measures itself with
onLayout; card width is 86% of the container, capped at 420 points. - Gesture Handler combines tap-to-send, horizontal design swiping, and continuous tilt. Nearly critically damped springs return the card to rest; touch cancels preview sway.
- A Skia runtime shader blends moving mesh centers and tilt-dependent iridescence inside the rounded card. Thirty-four deterministic glitter points twinkle on the UI thread. The amount uses a glyph-only color shimmer and a close shadow for relief.
- A single send progress drives the card fold, layered paper flap, persistent wax seal, anticipation, curved flight, trail, particles, ripple, and confirmation.
- Reduced Motion keeps the material stationary and changes directly to confirmation. Reset interrupts the sequence and restores the composer.
Install
npx expo install expo-linear-gradient @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-workletsUsage
<GiftCardSend /><GiftCardSend
amounts={[25, 50, 100]}
initialAmount={50}
note="For the calmest year yet — L."
recipient="maya@aurora.co"
onComplete={() => track('gift_sent')}
serifFontFamily="InstrumentSerif_400Regular"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
amounts | number[] | [25, 50, 100] | Gift amounts shown in the chip row. |
initialAmount | number | 50 | Initial gift amount. |
designs | GiftCardDesign[] | DESIGN_NAMES | Card designs in carousel order. |
initialDesign | GiftCardDesign | 'Bloom' | Initial card design. |
recipient | string | 'maya@aurora.co' | Recipient shown in the composing state. |
note | string | 'For the calmest year yet — L.' | Note shown in the composing state. |
onSend | (amount: number) => void | undefined | Callback when the gift starts moving into the envelope. |
onComplete | () => void | undefined | Callback after the sent state is visible. |
fontFamily | string | undefined | Sans font family for interface text. |
serifFontFamily | string | undefined | Serif font family for the amount and note. |
monoFontFamily | string | undefined | Monospace font family for labels. |
style | StyleProp<ViewStyle> | undefined | Style for the responsive outer container. |
accessibilityLabel | string | 'Gift card. Drag to tilt or swipe to change the card design.' | Accessibility label for the card gesture surface. |
testID | string | undefined | Test identifier for the outer container. |
accentColor | string | '#F472B6' | Accent used by the send-action gradient. |
duration | number | 1700 | Envelope send sequence duration in milliseconds. Spring physics and reduced-motion timing are unchanged. |
Compatibility
Built for Expo SDK 58, React Native 0.88, Reanimated 4.7, Worklets 0.13, and Skia 2.14. Supports iOS, Android, and web. Works in Expo Go.
Accessibility
Preset amounts, designs, send, and reset expose labeled button roles. The card exposes an adjustable gesture label, increment/decrement/activate accessibility actions, and also supports tap. Reduced Motion removes tilt, spring travel, flight, and wax bounce while retaining the composing and sent states.
Icons: Lucide (ISC). Demo brand: Aurora from the Native Animation kit.
Preview controls and timing
The ref exposes send(), reset(), setDesign(index), setAmount(amount), and rock(). rock() performs one interruptible preview sway; touching the card cancels it. Reduced Motion keeps the material stationary.
Autoplay repeats every six seconds: sway at 120 ms, Foil at 600 ms, $100 at 1,000 ms, and send at 1,400 ms. The 1,700 ms send timeline folds the card by 595 ms, closes the flap by 816 ms, drops and compresses the seal from 731–1,020 ms, anticipates from 952–1,054 ms, and flies along an arc from 1,054–1,530 ms. Light and particles dissolve behind it; a soft ripple begins at 1,394 ms and confirmation fades in from 1,530–1,700 ms. Seal impact and launch both occur within the first three seconds of autoplay. The compact stage and reserved header padding keep the viewer close area clear.
For web, load Skia's CanvasKit before mounting the component (LoadSkiaWeb or your application's existing Skia loader).
