Browse animated React components
Search 80 free components by what you are building or the runtime, interaction and preview theme that fit your project.
80 components
BackgroundsCSS/Reactambientdark preferredAurora BackgroundFree animated aurora background for Next.js and React. Drifting gradient blobs with a dithered noise overlay, GPU-only transforms, reduced motion safe.View component BackgroundsCSS/Reactambientdark preferredDot MatrixFree animated dot matrix background for Next.js and React: a soft glow sweeps across a dotted grid, pure CSS transforms, offscreen paused, reduced motion safe.View component BackgroundsCSS/Reactambientdark preferredGradient MeshFree animated mesh gradient background for Next.js and React: corner-anchored colour fields breathing on GPU transforms, dithered, reduced motion safe.View component BackgroundsGSAPambientdark preferredGrid BeamsFree animated grid background for Next.js and React: glowing beams travel along a subtle grid, built with GSAP, offscreen paused and reduced motion safe.View component BackgroundsCSS/Reactambientdark preferredNoise FieldFree animated noise background for Next.js and React: layered SVG film grain flickers as living static, pure CSS, offscreen paused, reduced motion safe.View component BackgroundsCSS/Reactambientdark preferredFloating OrbsFree floating orbs background for Next.js and React: soft glow orbs drift upward on GPU transforms, dithered, offscreen paused, reduced motion safe.View component BackgroundsCSS/Reactambientdark preferredLight RaysFree light rays background for Next.js and React: volumetric beams sway from the top edge on CSS transforms, dithered, offscreen paused, reduced motion safe.View component BackgroundsGSAPambientdark preferredSpotlight FollowFree spotlight background for Next.js and React: a soft glow follows the cursor with GSAP springs, fine pointers only, static and calm under reduced motion.View component BackgroundsCSS/Reactambientdark preferredTopographyFree topographic background for Next.js and React: drifting SVG contour lines drawn in the border token, CSS driven, offscreen paused, reduced motion safe.View component ButtonsCSS/ReactpointerEither themeBorder Beam ButtonFree animated border button for React: a light beam orbits the pill's edge via a masked conic gradient. Pure CSS, pauses under reduced motion.View component ButtonsMotionpointerEither themeIcon Morph ButtonFree animated icon button for Next.js and React: label and arrow swap with a spring on hover and focus, zero layout shift, reduced motion safe.View component ButtonsCSS/ReactpointerEither themeLiquid ButtonFree liquid fill button for Next.js and React: the CTA fills from the bottom on hover and focus, pure CSS, AA contrast, reduced motion safe.View component ButtonsMotionpointerEither themeMagnetic ButtonFree magnetic button for React: the pill leans toward your cursor, its label leans a touch further, and everything springs home on leave.View component ButtonsMotionpointerEither themeMorph State ButtonFree React submit button that morphs through idle, loading and success states — width animates, spinner spins, check draws in. Announced to AT.View component ButtonsCSS/ReactpointerEither themeShine ButtonFree shine button for Next.js and React: a diagonal sheen sweeps across the CTA on hover and keyboard focus, pure CSS and reduced-motion safe.View component CardsCSS/ReactpointerEither theme3D Flip CardFree 3D flip card for Next.js and React: click or hover reveals the back face with CSS transforms, accessible controls and a reduced-motion fallback.View component CardsCSS/ReactpointerEither themeGradient Border CardFree gradient border card for Next.js and React: a conic gradient slowly rotates around the card edge, pure CSS, offscreen paused, reduced motion safe.View component CardsCSS/ReactpointerEither themeHover Reveal CardFree hover reveal card for Next.js and React: an action row rises on hover and keyboard focus, always visible on touch, CSS driven, reduced motion safe.View component CardsCSS/ReactpointerEither themeSpotlight CardFree spotlight card for Next.js and React: a soft glow and lit border trail the cursor over the card, CSS driven, fully readable without hover or motion.View component CardsMotionpointerEither themeCard StackFree draggable card stack for Next.js and React: drag the top card to cycle the deck with springs, keyboard buttons included, reduced motion safe.View component CardsMotionpointerEither themeTilt CardFree 3D tilt card for Next.js and React built with Motion springs: perspective tilt and moving glare on hover, disabled on touch and under reduced motion.View component CTA SectionsCSS/Reactambientdark preferredBeam Banner CTAFree animated CTA section for React: full-width banner with drifting accent beams behind a headline and button pair. Pure CSS, dithered, Next.js ready.View component CTA SectionsMotionambientdark preferredCountdown Band CTAFree countdown CTA section for React: time units flip towards a target date beside a headline and button. Motion digits, accessible and ready for Next.js.View component Cursor EffectsGSAPpointerdark preferredDot Ring CursorFree custom cursor for React: a crisp dot with a trailing ring driven by GSAP quickTo springs, growing over interactive elements. Fine pointers only.View component Cursor EffectsGSAPpointerdark preferredGlow TrailFree cursor glow trail for React sections: a soft radial highlight drifts after the pointer with GSAP lag, lighting content beneath. Decorative only.View component Cursor EffectsMotionpointerdark preferredMagnetic FieldFree magnetic hover wrapper for React: children lean toward the cursor with spring physics and snap back on leave. Fine pointers only, a11y neutral.View component FAQCSS/ReactinputEither themeFAQ AccordionFree accessible FAQ accordion for Next.js and React: CSS grid height animation, real buttons with aria-expanded, keyboard friendly, reduced motion safe.View component FAQMotioninputEither themeSearchable FAQFree searchable FAQ for React: a filter box narrows an animated accordion in real time, highlighting matches. Motion height, accessible, Next.js and Tailwind.View component FeaturesMotionambientEither themeBento GridFree bento grid for Next.js and React: cells reveal in a stagger on view with Motion, hover lift on fine pointers, responsive CSS grid, reduced motion safe.View component FeaturesGSAPambientEither themeFeature RowsFree feature section for Next.js and React: alternating two column rows reveal on scroll with GSAP, media and copy slots, accessible, reduced motion safe.View component FootersMotionambientEither themeGlow Top FooterFree animated footer for React: a breathing accent glow lights the top edge over dithered noise, columns reveal on scroll. Motion, accessible, Next.js.View component FootersCSS/ReactambientEither themeReveal Parallax FooterFree animated footer for React: the page appears to lift away, revealing a parallax footer pinned beneath it. Pure CSS sticky technique, accessible, Next.js.View component HeroesGSAPambientdark preferredAurora HeroFree animated hero section for Next.js and React: masked headline reveal over a drifting aurora background, GSAP powered, accessible, reduced motion safe.View component HeroesGSAPambientdark preferredDot Matrix HeroFree animated hero section for Next.js and React: masked word reveal over a dot grid swept by a soft glow, GSAP powered, accessible, reduced motion safe.View component HeroesGSAPambientdark preferredGradient Mesh HeroFree mesh gradient hero for Next.js and React: masked GSAP headline reveal over a drifting gradient mesh background, accessible, reduced motion safe.View component HeroesGSAPambientdark preferredGrid Beams HeroFree animated hero section for Next.js and React: staggered headline and CTA reveal over a grid of traveling light beams, GSAP powered, reduced motion safe.View component HeroesGSAPambientdark preferredMarquee HeroFree hero section with marquee for Next.js and React: GSAP block reveal plus a full width scrolling text strip under the CTAs, reduced motion safe.View component HeroesGSAPambientdark preferredSpotlight HeroFree interactive hero section for Next.js and React: a cursor-following spotlight behind a staggered reveal, GSAP powered, calm and complete on any device.View component HeroesGSAPambientdark preferredStats HeroFree hero section with animated stats for Next.js and React: headline reveal plus GSAP counters that count up on view, SSR safe and reduced motion safe.View component Forms and InputsCSS/Reactinputlight preferredFloating Label InputFree floating label input for Next.js and React: the label glides from placeholder to docked caption on focus or value, using CSS and real label semantics.View component LoadersCSS/ReactambientEither themeSkeleton ShimmerFree skeleton loader for React: composable line, circle and block placeholders with a soft transform-only shimmer, static under reduced motion.View component Logos and StatsMotionambientEither themeFade Cycle Logo CloudFree logo cloud for React: a fixed grid where logos crossfade in randomized-feeling waves to rotate through a larger set. Motion, accessible, Next.js ready.View component Logos and StatsGSAPambientEither themeVelocity Logo MarqueeFree animated logo marquee for React: infinite logo cloud whose drift speed reacts to scroll velocity, pauses on hover. GSAP, accessible, Next.js ready.View component Logos and StatsCSS/ReactambientEither themeLogo CloudFree logo cloud for Next.js and React: marquee or grid modes, pauses on hover and focus, CSS driven, accessible and reduced motion safe.View component Modals and OverlaysMotionoverlayEither themeCommand PaletteFree React command palette: ⌘K opens a spring panel, results filter as you type with staggered reveals and full combobox keyboard navigation.View component Modals and OverlaysMotionoverlayEither themeSlide-Over DrawerFree React slide-over drawer: panel glides in from the right with staggered content reveal, focus trapped, Escape closes. Native dialog underneath.View component Modals and OverlaysMotionoverlayEither themeFullscreen Takeover ModalFree fullscreen modal for React: a trigger expands into a fullscreen overlay with a clip-path takeover, native dialog focus trap, Escape to close. Motion, a11y.View component Modals and OverlaysMotionoverlayEither themeSpring DialogFree React modal dialog with spring scale-in, backdrop blur fade, full focus trap and Escape handling. Built on the native dialog element.View component NavbarsMotionambientEither themeGlass Shrink NavbarFree sticky navbar for React: shrinks and gains blur-glass surface on scroll, spring underline tracks the active link. Motion, keyboard-first, Next.js ready.View component NavbarsMotionambientEither themeMega Menu Reveal NavbarFree mega menu navbar for React: full-width panels reveal with height spring and staggered link groups. Motion, keyboard-first, Escape-safe, Next.js ready.View component NavbarsCSS/ReactambientEither themeReading Progress NavbarFree sticky navbar for React with a reading-progress bar that fills as the page scrolls and active-section links. Pure CSS scroll timeline, accessible, Next.js.View component PricingMotioninputlight preferredHighlight Sweep Pricing TableFree comparison pricing table for React: a spring highlight frame sweeps to whichever plan column you hover or focus. Motion layoutId, accessible, Next.js.View component PricingMotioninputlight preferredSlider Pricing CalculatorFree usage-based pricing calculator for React: a slider sets the tier and the price rolls to match, with a plan summary. Motion digits, accessible, Next.js.View component PricingMotioninputlight preferredToggle Pricing CardsFree animated pricing section for React: monthly/annual switch with rolling price digits and highlighted-plan lift. Motion, accessible, Next.js and Tailwind.View component TestimonialsCSS/ReactambientEither themeMarquee Quote ColumnsFree testimonial wall for React: quote cards scroll in vertical marquee columns at offset speeds, pausing on hover. CSS-driven, accessible, Next.js ready.View component TestimonialsMotionambientEither themeSpotlight Quote CarouselFree testimonial carousel for React: one spotlight quote at a time with directional slide transitions and dot navigation. Motion springs, accessible, Next.js.View component Scroll StorytellingGSAPscrollEither themeHorizontal ScrollFree horizontal scroll section for Next.js and React: panels glide sideways as you scroll, GSAP ScrollTrigger pin and scrub, escapable, reduced motion stacks.View component Scroll StorytellingGSAPscrollEither themeParallax LayersFree parallax section for Next.js and React: layers translate at different depths as you scroll, GSAP ScrollTrigger scrub, reduced motion static.View component Scroll StorytellingGSAPscrollEither themePinned PanelsFree pinned scroll section for Next.js and React: panels crossfade in place as you scroll, GSAP ScrollTrigger scrub, escapable, reduced motion shows a stack.View component Scroll StorytellingGSAPscrollEither themeScroll ProgressFree reading progress bar for Next.js and React: a top bar fills as you scroll the page, GSAP ScrollTrigger scrub, one transform, reduced motion safe.View component Scroll StorytellingGSAPscrollEither themeScroll Text HighlightFree scroll-highlight text for React: a paragraph lights up word by word as it scrolls through the viewport, dimmed text resolving to full. GSAP ScrollTrigger.View component Logos and StatsMotionambientEither themeCount-Up Stat GridFree animated stats section for React: metrics count up on scroll into view with staggered reveals. SSR-rendered final values, Motion springs, Next.js ready.View component Logos and StatsMotionambientEither themeProgress Ring StatsFree animated stat rings for React: circular SVG progress rings sweep to their value on scroll into view, with a count-up number. Motion, accessible, Next.js.View component TablesCSS/Reactinputlight preferredExpandable RowsFree React table with expandable detail rows: panels unfold with a grid-rows transition, chevrons rotate, semantics stay pure table. Zero JS animation.View component TablesGSAPinputlight preferredRow Stagger TableFree animated data table for Next.js and React: rows cascade in with a scroll-triggered stagger while header and semantics stay rock solid.View component TablesMotioninputlight preferredFLIP Sort TableFree sortable React table where rows glide to their new order with FLIP layout animation. aria-sort headers, keyboard operable, reduced-motion safe.View component Text EffectsGSAPambientEither themeBlur Reveal TextFree blur reveal text effect for Next.js and React: words sharpen from a soft blur as they enter view, GSAP SplitText stagger, SSR and reduced motion safe.View component Text EffectsGSAPambientEither themeCount UpFree animated counter for Next.js and React: numbers count up on scroll with GSAP, render the real value in SSR HTML, and respect reduced motion settings.View component Text EffectsGSAPambientEither themeFade StaggerFree GSAP text reveal for Next.js and React: children fade and rise into view with a smooth stagger, scroll triggered once, reduced motion safe.View component Text EffectsCSS/ReactambientEither themeGradient Shine TextFree gradient text component for Next.js and React: brand gradient fill with a shine sweep every 4s, pure CSS, offscreen paused, reduced motion static.View component Text EffectsCSS/ReactambientEither themeMarquee TextFree marquee text component for Next.js and React: a seamless CSS loop that pauses on hover and focus, stays scrollable under reduced motion, no JS timers.View component Text EffectsMotionambientEither themeRotating TextFree rotating text component for Next.js and React: one word in the headline cycles with exit and enter motion, zero layout shift, reduced motion safe.View component Text EffectsGSAPambientEither themeScramble TextFree scramble text effect for Next.js and React: characters decrypt into your copy with GSAP ScrambleText, SSR safe, accessible and reduced motion safe.View component Text EffectsGSAPambientEither themeSplit RevealFree GSAP SplitText animation for Next.js and React: words rise out of masked lines with a smooth stagger, screen reader safe and reduced motion safe.View component Text EffectsGSAPambientEither themeTypewriter TextFree typewriter text effect for Next.js and React: headline types itself with a blinking block cursor, SSR renders the full string, reduced motion safe.View component Timelines and StepsGSAPscrollEither themeVertical TimelineFree React vertical timeline: the spine fills as you scroll while entries and their markers light up in sequence. GSAP ScrollTrigger, list semantics.View component Theme SwitchersMotioninputEither themeSystem SegmentFree light/system/dark segmented theme control for React: a spring-loaded thumb slides between three options with icon crossfades. Radio-group a11y.View component Theme SwitchersMotioninputEither themeSun Moon MorphFree animated theme toggle for Next.js and React: the sun's core morphs into a crescent moon with spring physics, rays retracting. Accessible switch.View component Theme SwitchersMotioninputEither themeTheme WipeFree React theme switcher with a circular wipe: the new theme expands from the toggle button across the container with a clip-path animation.View component Image and MediaMotionpointerEither themeBefore After SliderFree before/after comparison slider for React: drag or arrow-key the divider to reveal the second image with a spring handle. Fully keyboard operable.View component