# Migrating from React Bits and friends

> Maps each React Bits, Aceternity, Magic UI, shadcn and Framer Motion component to its Moonarc equivalent and the byte delta.

Using a React animation library in Astro means hydrating a React island. React
and ReactDOM cost about 67 kB gzip before any effect runs
([measured on /compare/react/](/compare/react/)). The motion library comes on
top: Motion for React (formerly Framer Motion) adds about 41 kB gzip on the same
page. OGL, which React
Bits' Aurora draws with, is 33 kB gzip for the whole package
([Bundlephobia](https://bundlephobia.com/package/ogl@1.0.11)). All of it pays
for effects that
are mostly CSS. Each row below is the same effect without the island. The
"own JS" column is measured from a production build; the shared runtime is
1.9 kB raw once per site, and 68 of the 102 primitives never load it.

The live version of this table is the **Replaces** facet on the
[catalogue](/components/): pick the library you are leaving and see only the
components that map to it, each running.

| You use | Instead | Own JS |
|---|---|---|
| AOS; AnimatedContent, FadeContent, ScrollReveal, BlurText (React Bits); `motion.div whileInView` | [Reveal](/components/reveal/) | 1.3 kB raw + runtime |
| SplitText, BlurText (React Bits); TextReveal (Magic UI); GSAP SplitText | [SplitText](/components/split-text/) | 0 B (+ Reveal) |
| TextType (React Bits); astro-typewriter; typed.js | [Typewriter](/components/typewriter/) | 0 B |
| RotatingText (React Bits); FlipWords (Aceternity); WordRotate (Magic UI) | [RotatingText](/components/rotating-text/) | 0 B |
| ShinyText (React Bits); AnimatedShinyText (Magic UI) | [ShinyText](/components/shiny-text/) | 0 B |
| GradientText (React Bits); AnimatedGradientText (Magic UI) | [GradientText](/components/gradient-text/) | 0 B |
| CountUp (React Bits); NumberTicker (Magic UI); react-countup | [CountUp](/components/count-up/) | 0 B (+ Reveal) |
| DecryptedText (React Bits); HyperText (Magic UI); TextScramble (Aceternity) | [TextScramble](/components/text-scramble/) | 0.9 kB raw + runtime |
| VariableProximity (React Bits) | [WeightWave](/components/weight-wave/) | 0 B |
| SplitFlap / FlipText effects (React Bits, Aceternity); split-flap canvas boards | [SplitFlap](/components/split-flap/) | 0 B (+ Reveal) |
| TextRoll (Motion Primitives); link roll hovers (Skiper, motion.dev) | [TextRoll](/components/text-roll/) | 0 B |
| CircularText (React Bits); rotating badges (Magic UI, Animata) | [CircularText](/components/circular-text/) | 0 B |
| GlitchText (React Bits, Kokonut, Animata) | [GlitchText](/components/glitch-text/) | 0 B |
| stroke-text effects (React Bits); SVG text with GSAP DrawSVG | [StrokeDraw](/components/stroke-draw/) | 0 B (+ Reveal) |
| Highlighter (Magic UI); HeroHighlight (Aceternity) | [HighlightMarker](/components/highlight-marker/) | 0 B (+ Reveal) |
| underline hover effects (Animata, uiverse); Framer Motion layout underlines | [UnderlineHover](/components/underline-hover/) | 0 B |
| BubbleText (Hover.dev) | [BubbleText](/components/bubble-text/) | 0 B |
| NumberFlow (number-flow, Motion Primitives); AnimatedNumber (Skiper, motion.dev) | [NumberFlow](/components/number-flow/) | 0 B |
| pricing toggles (motion.dev, Tailwind Plus); framer-motion price flips | [PriceSwitch](/components/price-switch/) | 0 B |
| CountdownTimer (Hover.dev); FlipClock.js, flipdown | [CountdownFlip](/components/countdown-flip/) | 1.1 kB raw + runtime |
| Sparkline (Preline); react-sparklines; ApexCharts sparklines | [Sparkline](/components/sparkline/) | 0 B (+ Reveal) |
| bar charts (Animata, Preline); Chart.js for a seven-bar chart | [BarGrow](/components/bar-grow/) | 0 B (+ Reveal) |
| page-transition examples (motion.dev); curtain and pixel transitions (Codrops); Barba.js, Swup | [Curtain](/components/curtain/) | 0.5 kB raw |
| SPA global players (React context + Howler); iframes kept alive for audio | [PersistPlayer](/components/persist-player/) | 0 B |
| LogoLoop (React Bits); Marquee (Magic UI); InfiniteMovingCards (Aceternity) | [Marquee](/components/marquee/) | 0 B |
| Aurora (React Bits, OGL); AuroraBackground (Aceternity) | [Aurora](/components/aurora/) | 0 B |
| BorderBeam (Magic UI); MovingBorder (Aceternity); StarBorder (React Bits) | [BorderBeam](/components/border-beam/) | 0 B |
| GridPattern, DotPattern (Magic UI); GridBackground, DotBackground (Aceternity) | [GridPattern](/components/grid-pattern/), [DotPattern](/components/dot-pattern/) | 0 B |
| Noise (React Bits) | [Noise](/components/noise/) | 0 B |
| Ripple (Magic UI) | [Ripple](/components/ripple/) | 0 B |
| InteractiveGridPattern (Magic UI); DotGrid (React Bits) | [CursorGrid](/components/cursor-grid/) | 0 B |
| ASCII canvas hero (motion.dev); ASCIIText, LetterGlitch (React Bits); canvas character fields | [GlyphField](/components/glyph-field/) | 0 B (swish: one inline listener, measured) |
| SpotlightCard (React Bits); MagicCard (Magic UI); CardSpotlight (Aceternity) | [Spotlight](/components/spotlight/) | 0.3 kB raw + runtime |
| TiltedCard (React Bits); 3D card (Aceternity); vanilla-tilt | [Tilt](/components/tilt/) | 0.6 kB raw + runtime |
| Magnet (React Bits) | [Magnetic](/components/magnetic/) | 0.6 kB raw + runtime |
| react-scroll-parallax; Rellax | [Parallax](/components/parallax/) | 0 B |
| ScrollProgress (Magic UI); `useScroll` progress bar | [ScrollProgress](/components/scroll-progress/) | 0 B |
| ScrollStack (React Bits); StickyScroll (Aceternity); GSAP pinned stacks | [CardStack](/components/card-stack/) | 0 B |
| GSAP ScrollTrigger pin + horizontal tween | [HorizontalScroll](/components/horizontal-scroll/) | 0 B |
| GSAP ScrollTrigger `scrub: true`; `useScroll` + `useTransform` | [ScrollScrub](/components/scroll-scrub/) | 0 B |
| Accordion (Radix / shadcn / Aceternity) | [Accordion](/components/accordion/) | 0 B |
| Dialog (Radix / shadcn); Modal (Aceternity) | [Dialog](/components/dialog/) | 0 B |
| Popover (Radix / shadcn); Floating UI | [Popover](/components/popover/) | 0 B |
| Tabs (Radix / shadcn / Aceternity) | [Tabs](/components/tabs/) | 0 B |
| Embla; Swiper; Carousel (shadcn / React Bits) | [Carousel](/components/carousel/) | 0 B |
| PillNav (React Bits); FloatingNav (Aceternity); `layoutId` tabs (Framer Motion) | [PillNav](/components/pill-nav/) | 0 B |
| Dock (Magic UI / React Bits); FloatingDock (Aceternity) | [Dock](/components/dock/) | 0 B |
| StaggerMenu (React Bits); Sheet (shadcn); AnimatePresence menus | [StaggerMenu](/components/stagger-menu/) | 0 B |
| Command (cmdk / shadcn); kbar | [CommandPalette](/components/command-palette/) | 3.0 kB raw + runtime |
| Banner (Aceternity); AnnouncementBar (Tailwind Plus) | [StickyBanner](/components/sticky-banner/) | 0 B (remember: 286 B raw inline) |
| LinkPreview (Aceternity); HoverCard (shadcn) | [LinkPreview](/components/link-preview/) | 0.7 kB raw + runtime |
| Lightbox libraries; LayoutGrid (Aceternity); `layoutId` images | [Lightbox](/components/lightbox/) | 0.9 kB raw + Dialog morph + runtime + morph |
| Compare (Aceternity); ImageComparison (Motion Primitives); react-compare-image | [ImageCompare](/components/image-compare/) | 0.2 kB raw + runtime |
| HoverVideo (Cult UI); react-hover-video-player | [HoverVideo](/components/hover-video/) | 0.7 kB raw + runtime |
| HeroVideoDialog (Magic UI); VideoModal (Cult UI) | [VideoDialog](/components/video-dialog/) | 0.6 kB raw + runtime |
| AnimatedList (Magic UI / React Bits); AnimatePresence lists | [AnimatedList](/components/animated-list/) | 0 B |
| Isotope; MixItUp; LayoutGroup grids (Framer Motion) | [FilterGrid](/components/filter-grid/) | 1.0 kB raw + runtime + morph |
| FileTree (Magic UI / Fumadocs); Tree (shadcn) | [FileTree](/components/file-tree/) | 0 B |
| HoverImageLinks (Hover.dev); FloatingImage (Aceternity) | [HoverImageLinks](/components/hover-image-links/) | 0.6 kB raw + runtime |
| Switch (Motion Primitives); Switch (shadcn); Toggle (Tailwind Plus) | [Switch](/components/switch/) | 0 B |
| Checkbox (Motion Primitives); AnimatedCheckbox (Aceternity) | [CheckDraw](/components/check-draw/) | 0 B |
| InputOTP (shadcn); OTPInput (Motion Primitives); react-otp-input | [OtpInput](/components/otp-input/) | 0 B |
| Select (shadcn); AnimatedSelect (Motion Primitives); Listbox (Headless UI) | [AnimatedSelect](/components/animated-select/) | 0 B |
| PromptInput (Kokonut UI); AI Input (Kibo UI); react-textarea-autosize | [PromptInput](/components/prompt-input/) | 0 B (submitOnEnter: 0.3 kB raw + runtime) |
| PlaceholdersAndVanishInput (Aceternity); VanishInput (Cult UI) | [VanishInput](/components/vanish-input/) | 0.6 kB raw + runtime |
| AnimatedTooltip (Aceternity); AvatarCircles (Magic UI) | [AvatarStack](/components/avatar-stack/) | 0 B |
| Preloader (Osmo); Loader (Aceternity) | [CounterPreloader](/components/counter-preloader/) | 0 B (once: 187 B raw inline) |
| DynamicIsland (Cult UI); Dynamic Island (Kokonut UI) | [DynamicIsland](/components/dynamic-island/) | 0 B |
| Iphone15Pro (Magic UI); DeviceFrame (Cult UI) | [PhoneFrame](/components/phone-frame/) | 0 B |
| LiquidGlass (React Bits); liquid-glass-react | [LiquidGlass](/components/liquid-glass/) | 0 B |
| Vaul; Drawer (shadcn) | [Drawer](/components/drawer/) | 0.9 kB raw + runtime |
| Sonner; react-hot-toast; Toast (shadcn) | [Toast](/components/toast/) | 1.0 kB raw + runtime |
| Skeleton, Spinner, Progress (shadcn) | [Skeleton](/components/skeleton/), [Spinner](/components/spinner/), [Progress](/components/progress/) | 0 B (Progress: + Reveal) |
| AnimatePresence page transitions; Barba; Swup | [PageTransition](/components/page-transition/) | 0 B (Astro's router) |

## WebGL backgrounds and physics

The free catalogue has no WebGL. Several of React Bits' WebGL effects have a
GPU counterpart in [Pro](/pro/), each with its JavaScript cost on its page:
[Plasma](/components/plasma/), [LiquidChrome](/components/liquid-chrome/),
[Silk](/components/silk/), [Dither](/components/dither/),
[Hyperspeed](/components/hyperspeed/), MetaBalls as
[Gooey](/components/gooey/) and SplashCursor as
[FluidField](/components/fluid-field/). Galaxy, Ballpit and full physics drag
systems have no equivalent. For one of those, use an island on
`client:visible`, labelled with its cost.