Installation

# Using npm
npm install react-native-magic-animations

# Using yarn
yarn add react-native-magic-animations

Peer dependencies

# Using npm
npm install react-native-reanimated react-native-svg

# Using yarn
yarn add react-native-reanimated react-native-svg

Follow the react-native-reanimated install guide for native setup.

Quick start

import { Typewriter, Magnetic, JellyPress, Confetti, Aurora } from 'react-native-magic-animations'

<Aurora style={{ flex: 1 }}>
  <Typewriter text="Welcome ✨" speed={50} />
  <Magnetic>
    <JellyPress onPress={celebrate}>
      <Button title="Tap me" />
    </JellyPress>
  </Magnetic>
  <Confetti trigger={paid} pieces={120} />
</Aurora>

Table of Contents

• 📝 Text
• 🎁 View
• 🌌 Background
• 🚪 Transition (in/out)
• ✋ Gesture
• 🎉 Decoration
• 📊 Charts

Each section is split by complexity: 🟢 simple · 🟡 medium · 🔴 complex.

📝 Text

🟢 Simple

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <Typewriter /> | | Types out text character by character.<Typewriter text="Hello World!" speed={50} /> | | <Wave /> | | Each character bobs up and down in a wave.<Wave text="Magic!" amplitude={6} duration={400} /> | | <Blink /> | | Classic cursor blink — opacity loop.<Blink interval={530}>\|</Blink> | | <Highlight /> | | Marker highlight that grows across the text.<Highlight text="Important" color="#FDE68A" duration={600} /> | | <Underline /> | | Self-drawing underline.<Underline text="Click here" color="#10B981" thickness={2} /> | | <Strike /> | | Strikethrough line drawing across.<Strike text="$99" color="#EF4444" /> | | <BounceIn /> | | Per-character drop with spring bounce.<BounceIn text="Welcome" stagger={60} drop={30} /> | | <FadeWord /> | | Words fade in one by one.<FadeWord text="One word at a time" stagger={100} /> | | <RevealMask /> | | Text unmasked left to right via clip.<RevealMask text="Reveal" duration={700} /> |

🟡 Medium

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <Scramble /> | | Random characters resolving into target text.<Scramble text="DECODED" duration={1200} /> | | <Counter /> | | Animated number with format support.<Counter from={0} to={12847} duration={1500} format={(n) => "$"+n.toLocaleString()} /> | | <Sparkle /> | | Text decorated with twinkling star particles.<Sparkle text="✨ AI Magic" count={8} /> | | <Shuffle /> | | Characters shuffle from random positions into place.<Shuffle text="Welcome" stagger={40} scatter={80} /> | | <Marquee /> | | Infinite horizontal scroll ticker.<Marquee text="🔥 Sale ends tonight" speed={60} spacing={40} /> | | <Rotator /> | | Cycles through words with slide+fade.<Rotator words={['code','coffee','RN']} interval={2000} /> | | <Decode /> | | Hacker-style decoding (Matrix charset).<Decode text="ACCESS GRANTED" charset="01ABCDEF" duration={1500} /> | | <Capitalize /> | | Characters pop to uppercase sequentially.<Capitalize text="emphasis" stagger={80} /> |

🔴 Complex

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <Glitch /> | | RGB split + offset for cyberpunk glitch.<Glitch text="SYSTEM ERROR" intensity={1} speed={80} /> | | <Neon /> | | Neon glow with realistic flicker.<Neon text="OPEN 24/7" color="#FF00E5" glowRadius={12} flicker /> |

🎁 View

🟢 Simple

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <Breathe /> | | Subtle pulsing scale.<Breathe minScale={0.97} maxScale={1.03}><Card /></Breathe> | | <Float /> | | Continuous up/down float.<Float amplitude={8} duration={1800}><Logo /></Float> | | <FadeIn /> | | Mount-time fade + slide from direction.<FadeIn from="bottom" duration={500} delay={200}><Text /></FadeIn> | | <Pop /> | | Scale-in with spring overshoot.<Pop delay={0}><Badge /></Pop> | | <Drop /> | | Falls from above with spring bounce.<Drop height={40}><Toast /></Drop> | | <Spin /> | | Continuous rotation.<Spin duration={2000} direction="cw"><RefreshIcon /></Spin> | | <Tilt /> | | Continuous gentle tilt back-and-forth.<Tilt angle={3}><Icon /></Tilt> | | <Wobble /> | | Quick wobble rotation on trigger.<Wobble trigger={error}><Input /></Wobble> |

🟡 Medium

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <PaperPlane /> | | Paper-plane flight path animation.<PaperPlane trigger={sent} duration={1500}><MailIcon /></PaperPlane> | | <JellyPress /> | | Squash & stretch on press — replaces Touchables.<JellyPress onPress={buy} amount={0.06}><Button /></JellyPress> | | <Magnetic /> | | Component is attracted toward dragging finger.<Magnetic strength={0.4}><CTA /></Magnetic> | | <Shake /> | | Horizontal shake for error feedback.<Shake trigger={loginFailed} amount={8}><TextInput /></Shake> | | <Wiggle /> | | iOS edit-mode wiggle.<Wiggle active={editing}><AppIcon /></Wiggle> | | <Pulse /> | | Pulsing ring around content (notifications).<Pulse color="#EF4444"><LiveBadge /></Pulse> | | <RubberBand /> | | Elastic scale stretch on trigger.<RubberBand trigger={pop}><Logo /></RubberBand> | | <Heart /> | | Realistic heartbeat pulse with BPM control.<Heart beating bpm={72}><HeartIcon /></Heart> | | <Flash /> | | Quick color flash overlay.<Flash trigger={photoTaken} color="#FFF"><Camera /></Flash> | | <Glow /> | | Pulsing glow shadow.<Glow color="#60A5FA" intensity={1}><Card /></Glow> | | <Sparkles /> | | Twinkling stars scattered around content.<Sparkles count={14} colors={['#FDE68A']}><Award /></Sparkles> | | <Stamp /> | | "PAID/APPROVED" stamp slam with dust ring.<Stamp trigger={approved} text="PAID" color="#16A34A" /> | | <Ripple /> | | Material-style ripple from tap point.<Ripple color="rgba(255,255,255,0.45)" onPress={fn}><Tile /></Ripple> | | <FlipCard /> | | 3D card flip between front/back faces.<FlipCard flipped={open} front={<F />} back={<B />} /> |

🔴 Complex

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <ThanosSnap /> | | Cinematic disintegration with directional wipe.<ThanosSnap trigger={dismiss} direction="right" duration={1800}><Card /></ThanosSnap> | | <FireBurn /> | | Flames burning at the base of content.<FireBurn intensity={1.2}><Item /></FireBurn> | | <TearReveal /> | | Drag-to-tear paper reveal interaction.<TearReveal direction="right" onTorn={fn}><Content /></TearReveal> | | <Tilt3D /> | | 3D parallax tilt that follows the drag.<Tilt3D maxTilt={15} glare><Card /></Tilt3D> | | <Shatter /> | | Breaks content into shards falling with gravity.<Shatter trigger={broken} shards={24} gravity={1}><Glass /></Shatter> |

🌌 Background

🟢 Simple

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <GradientShift /> | | Background color interpolates through a palette.<GradientShift colors={['#FBCFE8','#C7D2FE']} speed={4000}><App /></GradientShift> |

🟡 Medium

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <Aurora /> | | Pastel gradient blobs drifting slowly.<Aurora colors={['#86EFAC','#A7F3D0']} style={{ flex: 1 }}><Content /></Aurora> | | <Stars /> | | Twinkling starfield.<Stars density={80} twinkle color="#FFFFFF"><Hero /></Stars> | | <Snow /> | | Drifting snowflakes with wind + sway.<Snow flakes={60} wind={25}><Scene /></Snow> | | <Rain /> | | Falling rain streaks at angle.<Rain drops={100} angle={15}><Scene /></Rain> | | <Bubbles /> | | Rising bubbles with sway.<Bubbles count={30}><Scene /></Bubbles> | | <Fireflies /> | | Glowing particles wandering with pulse.<Fireflies count={25} color="#FDE68A"><Scene /></Fireflies> | | <Waves /> | | Layered SVG waves at bottom of container.<Waves colors={['#0EA5E9','#0284C7']} height={180}><Hero /></Waves> |

🔴 Complex

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <MatrixRain /> | | Falling columns of Matrix code rain.<MatrixRain charset="01アイウエオ" color="#22C55E" /><Content /></MatrixRain> |

🚪 Transition (in/out)

Use show={boolean} to toggle in/out, or trigger={boolean} + onDone for one-shot.

🟢 Simple

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <CrossFade /> | | Opacity fade transition.<CrossFade show={visible}><View /></CrossFade> | | <Zoom /> | | Scale from 0 with spring bounce.<Zoom show={visible} duration={400}><View /></Zoom> |

🟡 Medium

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <Iris /> | | Circular reveal/conceal from a point.<Iris show={visible} origin={{ x: 0.5, y: 0.5 }} duration={600}><Modal /></Iris> | | <Curtain /> | | Stage curtain split open/close.<Curtain show={open} direction="horizontal" color="#1F2937"><View /></Curtain> | | <Pixelate /> | | Tile-based dissolve.<Pixelate show={visible} pixelSize={20}><Image /></Pixelate> | | <Vortex /> | | Swirl into center with rotation + scale.<Vortex show={visible} rotations={2.5} duration={900}><Card /></Vortex> |

🔴 Complex

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <Materialize /> | | Particles assemble into view — pair with ThanosSnap.<Materialize trigger={mounted} direction="left" duration={1800}><Card /></Materialize> | | <Mosaic /> | | Tile cascade flip — LED display reveal.<Mosaic show={visible} cols={10} rows={6}><Banner /></Mosaic> |

✋ Gesture

🟢 Simple

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <TapFeedback /> | | Subtle scale-down on press.<TapFeedback scale={0.95}><Button /></TapFeedback> | | <LongPressGrow /> | | Content grows while held.<LongPressGrow growScale={1.1} onLongPress={fn}><Item /></LongPressGrow> | | <DoubleTapHeart /> | | Instagram-style double-tap heart pop.<DoubleTapHeart onLike={fn}><Photo /></DoubleTapHeart> |

🟡 Medium

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <SwipeReveal /> | | Swipe-left to reveal action buttons.<SwipeReveal actions={[{ label: 'Delete', color: '#EF4444', onPress: fn }]}><Row /></SwipeReveal> |

🎉 Decoration

🟢 Simple

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <Check /> | | Animated SVG checkmark drawing.<Check size={32} color="#16A34A" trigger={success} /> | | <Cross /> | | Animated SVG X drawing.<Cross size={32} color="#EF4444" trigger={failed} /> | | <Star /> | | Star icon with optional twinkle.<Star size={24} color="#FDE68A" twinkle /> | | <Badge /> | | Number badge with pop animation on change.<Badge value={5} color="#EF4444" size={22} /> | | <Notification /> | | Bell shake animation when ringing is active.<Notification ringing={hasNew}><BellIcon /></Notification> |

🟡 Medium

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <Confetti /> | | Falling confetti burst animation.<Confetti trigger={paid} pieces={100} /> | | <LikeButton /> | | Heart fill + particle burst on toggle.<LikeButton liked={isLiked} onToggle={setLiked} size={32} /> | | <EmojiBurst /> | | Burst of emojis from point with gravity.<EmojiBurst trigger={cheer} emojis={['🎉','✨']} count={18} /> | | <RatingStars /> | | Stars bounce in one-by-one.<RatingStars value={4} max={5} size={24} /> | | <Coins /> | | Coin rain from the top of container.<Coins trigger={reward} count={30} size={28} /> |

📊 Charts

🟢 Simple

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <ProgressRing /> | | Animated circular progress.<ProgressRing value={0.72} size={120} strokeWidth={10} color="#10B981" /> | | <AnimatedBar /> | | Horizontal progress bar that grows.<AnimatedBar value={0.6} height={12} color="#10B981" /> | | <Sparkline /> | | Mini line chart that draws itself.<Sparkline data={[3,5,2,8,6,9]} width={120} height={40} /> |

🟡 Medium

| Component | Preview | Description & Usage | | :--- | :---: | :--- | | <LineChart /> | | Line chart with stroke-dash animation + dots.<LineChart data={[12,19,8,15,22,18,25]} width={320} height={180} /> | | <BarChart /> | | Bars grow from bottom with stagger.<BarChart data={[40,80,30,60,90,55]} width={320} height={180} /> | | <Gauge /> | | Semi-circle gauge with animated arc.<Gauge value={0.65} size={200} color="#10B981" /> |

License

MIT © Nguyen Pham (Percy)