Migrating from React Bits and friends

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/). 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). 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: 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	1.3 kB raw + runtime
SplitText, BlurText (React Bits); TextReveal (Magic UI); GSAP SplitText	SplitText	0 B (+ Reveal)
TextType (React Bits); astro-typewriter; typed.js	Typewriter	0 B
RotatingText (React Bits); FlipWords (Aceternity); WordRotate (Magic UI)	RotatingText	0 B
ShinyText (React Bits); AnimatedShinyText (Magic UI)	ShinyText	0 B
GradientText (React Bits); AnimatedGradientText (Magic UI)	GradientText	0 B
CountUp (React Bits); NumberTicker (Magic UI); react-countup	CountUp	0 B (+ Reveal)
DecryptedText (React Bits); HyperText (Magic UI); TextScramble (Aceternity)	TextScramble	0.9 kB raw + runtime
VariableProximity (React Bits)	WeightWave	0 B
SplitFlap / FlipText effects (React Bits, Aceternity); split-flap canvas boards	SplitFlap	0 B (+ Reveal)
TextRoll (Motion Primitives); link roll hovers (Skiper, motion.dev)	TextRoll	0 B
CircularText (React Bits); rotating badges (Magic UI, Animata)	CircularText	0 B
GlitchText (React Bits, Kokonut, Animata)	GlitchText	0 B
stroke-text effects (React Bits); SVG text with GSAP DrawSVG	StrokeDraw	0 B (+ Reveal)
Highlighter (Magic UI); HeroHighlight (Aceternity)	HighlightMarker	0 B (+ Reveal)
underline hover effects (Animata, uiverse); Framer Motion layout underlines	UnderlineHover	0 B
BubbleText (Hover.dev)	BubbleText	0 B
NumberFlow (number-flow, Motion Primitives); AnimatedNumber (Skiper, motion.dev)	NumberFlow	0 B
pricing toggles (motion.dev, Tailwind Plus); framer-motion price flips	PriceSwitch	0 B
CountdownTimer (Hover.dev); FlipClock.js, flipdown	CountdownFlip	1.1 kB raw + runtime
Sparkline (Preline); react-sparklines; ApexCharts sparklines	Sparkline	0 B (+ Reveal)
bar charts (Animata, Preline); Chart.js for a seven-bar chart	BarGrow	0 B (+ Reveal)
page-transition examples (motion.dev); curtain and pixel transitions (Codrops); Barba.js, Swup	Curtain	0.5 kB raw
SPA global players (React context + Howler); iframes kept alive for audio	PersistPlayer	0 B
LogoLoop (React Bits); Marquee (Magic UI); InfiniteMovingCards (Aceternity)	Marquee	0 B
Aurora (React Bits, OGL); AuroraBackground (Aceternity)	Aurora	0 B
BorderBeam (Magic UI); MovingBorder (Aceternity); StarBorder (React Bits)	BorderBeam	0 B
GridPattern, DotPattern (Magic UI); GridBackground, DotBackground (Aceternity)	GridPattern, DotPattern	0 B
Noise (React Bits)	Noise	0 B
Ripple (Magic UI)	Ripple	0 B
InteractiveGridPattern (Magic UI); DotGrid (React Bits)	CursorGrid	0 B
ASCII canvas hero (motion.dev); ASCIIText, LetterGlitch (React Bits); canvas character fields	GlyphField	0 B (swish: one inline listener, measured)
SpotlightCard (React Bits); MagicCard (Magic UI); CardSpotlight (Aceternity)	Spotlight	0.3 kB raw + runtime
TiltedCard (React Bits); 3D card (Aceternity); vanilla-tilt	Tilt	0.6 kB raw + runtime
Magnet (React Bits)	Magnetic	0.6 kB raw + runtime
react-scroll-parallax; Rellax	Parallax	0 B
ScrollProgress (Magic UI); useScroll progress bar	ScrollProgress	0 B
ScrollStack (React Bits); StickyScroll (Aceternity); GSAP pinned stacks	CardStack	0 B
GSAP ScrollTrigger pin + horizontal tween	HorizontalScroll	0 B
GSAP ScrollTrigger scrub: true; useScroll + useTransform	ScrollScrub	0 B
Accordion (Radix / shadcn / Aceternity)	Accordion	0 B
Dialog (Radix / shadcn); Modal (Aceternity)	Dialog	0 B
Popover (Radix / shadcn); Floating UI	Popover	0 B
Tabs (Radix / shadcn / Aceternity)	Tabs	0 B
Embla; Swiper; Carousel (shadcn / React Bits)	Carousel	0 B
PillNav (React Bits); FloatingNav (Aceternity); layoutId tabs (Framer Motion)	PillNav	0 B
Dock (Magic UI / React Bits); FloatingDock (Aceternity)	Dock	0 B
StaggerMenu (React Bits); Sheet (shadcn); AnimatePresence menus	StaggerMenu	0 B
Command (cmdk / shadcn); kbar	CommandPalette	3.0 kB raw + runtime
Banner (Aceternity); AnnouncementBar (Tailwind Plus)	StickyBanner	0 B (remember: 286 B raw inline)
LinkPreview (Aceternity); HoverCard (shadcn)	LinkPreview	0.7 kB raw + runtime
Lightbox libraries; LayoutGrid (Aceternity); layoutId images	Lightbox	0.9 kB raw + Dialog morph + runtime + morph
Compare (Aceternity); ImageComparison (Motion Primitives); react-compare-image	ImageCompare	0.2 kB raw + runtime
HoverVideo (Cult UI); react-hover-video-player	HoverVideo	0.7 kB raw + runtime
HeroVideoDialog (Magic UI); VideoModal (Cult UI)	VideoDialog	0.6 kB raw + runtime
AnimatedList (Magic UI / React Bits); AnimatePresence lists	AnimatedList	0 B
Isotope; MixItUp; LayoutGroup grids (Framer Motion)	FilterGrid	1.0 kB raw + runtime + morph
FileTree (Magic UI / Fumadocs); Tree (shadcn)	FileTree	0 B
HoverImageLinks (Hover.dev); FloatingImage (Aceternity)	HoverImageLinks	0.6 kB raw + runtime
Switch (Motion Primitives); Switch (shadcn); Toggle (Tailwind Plus)	Switch	0 B
Checkbox (Motion Primitives); AnimatedCheckbox (Aceternity)	CheckDraw	0 B
InputOTP (shadcn); OTPInput (Motion Primitives); react-otp-input	OtpInput	0 B
Select (shadcn); AnimatedSelect (Motion Primitives); Listbox (Headless UI)	AnimatedSelect	0 B
PromptInput (Kokonut UI); AI Input (Kibo UI); react-textarea-autosize	PromptInput	0 B (submitOnEnter: 0.3 kB raw + runtime)
PlaceholdersAndVanishInput (Aceternity); VanishInput (Cult UI)	VanishInput	0.6 kB raw + runtime
AnimatedTooltip (Aceternity); AvatarCircles (Magic UI)	AvatarStack	0 B
Preloader (Osmo); Loader (Aceternity)	CounterPreloader	0 B (once: 187 B raw inline)
DynamicIsland (Cult UI); Dynamic Island (Kokonut UI)	DynamicIsland	0 B
Iphone15Pro (Magic UI); DeviceFrame (Cult UI)	PhoneFrame	0 B
LiquidGlass (React Bits); liquid-glass-react	LiquidGlass	0 B
Vaul; Drawer (shadcn)	Drawer	0.9 kB raw + runtime
Sonner; react-hot-toast; Toast (shadcn)	Toast	1.0 kB raw + runtime
Skeleton, Spinner, Progress (shadcn)	Skeleton, Spinner, Progress	0 B (Progress: + Reveal)
AnimatePresence page transitions; Barba; Swup	PageTransition	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, each with its JavaScript cost on its page: Plasma, LiquidChrome, Silk, Dither, Hyperspeed, MetaBalls as Gooey and SplashCursor as FluidField. Galaxy, Ballpit and full physics drag systems have no equivalent. For one of those, use an island on client:visible, labelled with its cost.