Animated Text Components

Dev Design Library indexes 371 Animated text components from 54 open-source UI libraries, with the most coming from Animations (Svelte), React Bits, Pixel Perfect, Magic UI and Amicro Micro Transitions. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the text components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion.

Showing 120 of 371, a mix from every library. Open a library to see all of its components.

• AsciitextReact Bits · ReactRenders text with an animated ASCII background for a retro feel.
• Animated Gradient TextMagic UI · ReactAn animated gradient background which transitions between colors for text.
• Text AnimateCult UI · ReactAnimated text component with customizable reveal effects and timing
• Decrypt RevealCanvas UI · ReactUI encrypted into ASCII, decoded by the cursor.
• Shimmer Texttransitions.dev · HTML/CSSText with a band of light sweeping across it in a loop.
• Apple Text RevealAmicro Micro Transitions · ReactApple Text Reveal loading animation.
• ShimmerAI Elements · ReactAn animated text shimmer component for creating eye-catching loading states and progressive reveal effects.
• Awesome Typewriter EffectLobe UI · ReactText typed out one character at a time, cycling through several sentences, with a cursor.
• AI Text LoadingKokonut UI · ReactAI thinking text with a soft wave through the letters and words that swap letter by letter.
• Text FlagCursify · React
• Text CascadebeUI · ReactLetter-by-letter slot roll for standalone text — the old letters drop away as the new ones land, left to right. Same…
• Gravity LettersRare UI · ReactA playful gravity field where letters, numbers, emoji, or any components you pass fall and pile up like real objects.
• Heading With AnchorSpectrum UI · Reactcomponent for the Heading With Anchor
• Blur RevealSpell UI · ReactAnimated text reveal with blur effect.
• Cyber Glitch TextVengeance UI · ReactText with a cyberpunk glitch: split colour channels and jittering slices.
• Thinking IndicatorFluid Functionalism · ReactAnimated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through…
• Circular TextPanel UI · React NativeText set around a circle, turning.
• Animated Text-01 - Shiny TextShadcn Space · ReactAnimated Text component
• Circle CreditsPixel Perfect · ReactTwo credit columns that wrap a round hole, easing in from the centre and scrambling into symbols on hover.
• Text LoaderOpenSourceUI · ReactAnimated text loader with a spinning color orb and staggered letter pulses. Pass text, variant, and textColor to match…
• Perspective Text Scrolluselayouts · ReactA polished example interaction built with React and Motion.
• TypewriterKinetics · HTML/CSSTypes and deletes through a list with a blinking caret
• Annotated TextComponentry · ReactHand-drawn marks — circles, highlights, underlines, cross-outs — sketched around inline text.
• Animated Gradient TextAnimations (Svelte) · SvelteAn animated gradient background which transitions between colors for text.
• ShimmerAI Elements (Svelte) · SvelteA text shimmer utility component with configurable spread and duration.
• Text RevealSwiftPieces · SwiftUIReveals a headline by characters, words or lines, then grows a stroke of tinted glass behind the phrases that matter.
• Blur RevealBadtz UI · ReactA text component that reveals its content with a smooth blur-to-focus animation, activated by default when the text…
• Flip TextObsidianUI · ReactText whose letters flip over in sequence to reveal the content.
• AI Overview HighlightNotra · ReactA mark that sweeps in Google's blue highlight.
• Split Line Fly InGreatUI · ReactText split into lines that fly in one after another.
• Dia TextNexvyn UI · ReactDiagonal clip-path reveal for bold display typography. Text sweeps into view with an angled edge as the component…
• Text RevealForge UI · ReactA stylish effect that sequentially fades in text on page load, creating a dynamic reveal.
• Character Scramble TextRewamp UI · ReactText whose characters scramble through random glyphs before settling on the final letters.
• Streaming TextAI CSS · React
• ASCII Logo23rd.dev · ReactInteractive ASCII wordmark: glyphs shove away from the cursor, then click-cycle through scatter, gravity drop, and…
• SpinningTextSona UI · ReactThe `SpinningText` component is a dynamic and visually engaging UI element that animates text in a circular spinning…
• Radial IntroWatermelon UI · React
• Expandable textArc Library · ReactLong text clamped to a few lines with a soft fade that glides open with Read more and closes with Show less, shown…
• Liquid Textglasscn · ReactAnimated text filled with a liquid shader mask.
• Code MorphUI Lab · ReactGlides every surviving token to its new spot as a tutorial moves to the next step.
• Article HeadingsCojeev UI · ReactSemantic article headings resolve through a brief, grapheme-safe noise frontier.
• Staggered Letter Text SwapMicroKit · ReactA surface-free text interaction with a staggered per-letter upward replacement.
• Animated Gradient TextVelora UI · ReactBrand gradient sweeping continuously through text.
• Text BounceAtelier UI · React
• Copy Paste PadPin UI · React
• Blur Reveal TextSpaceUI · ReactA progressive word, character, or line-by-line blur reveal animation with customizable motion vectors and viewport…
• Scroll Reveal TextSkecher UI · ReactA scroll-linked text reveal with spring-smoothed progress and reduced-motion support.
• Dia Text RevealSora UI · ReactA gradient sweep that reveals text with a chromatic wash, powered by Motion.
• Dot Matrix Cascade TypographyCue Foundations · React
• Metallic ShimmerD2Studio UI · ReactBrushed-metal text: a bright band travels across the glyphs like a reflection, not a glow. Wraps any inline content…
• Gradient TextEaseUI · ReactText filled with a slowly drifting rainbow. It pauses while off screen and holds still when reduced motion is on.
• Glass TextOpaline · ReactHeadlines cast in liquid glass — every glyph is a bevelled lens with rim light and a travelling sheen.
• Liquid TextReactFrame · ReactText distorted through an animated SVG noise filter, 5 presets (liquid, melt, blob, ghost, crystal), cursor-proximity…
• Container Text FlipAceternity UI · ReactBoxed word inside a sentence that flips through a list of words, with the box resizing to fit each one.
• Blur TextReact Bits · ReactText starts blurred then crisply resolves for a soft-focus reveal effect.
• Animated Shiny TextMagic UI · ReactA light glare effect which pans across text making it appear as if it is shimmering.
• Text GifCult UI · ReactText component with GIF-like animation effects and customizable styling
• Pro Gradient Texttransitions.dev · HTML/CSS
• Blur TextAmicro Micro Transitions · ReactBlur transition for text container/headings.
• Cradle TextKokonut UI · ReactA headline hung like a Newton's cradle, so a knock on one letter clacks through the word, built with React and…
• Text Icon CursorCursify · React
• Text ScramblebeUI · ReactA controlled character scramble that resolves changed text while keeping its final value accessible.
• Orbital LettersSpectrum UI · Reactcomponent for the Orbital Letters
• Gradient Wave TextSpell UI · ReactApple-style animated gradient text with wave effect.
• Flip Fade TextVengeance UI · ReactWord flip and fade cycle
• Scroll TextPanel UI · React NativeText that resolves word by word as you scroll.
• Animated Text-02 - Gradient TextShadcn Space · ReactAnimated Gradient Text component
• Flip Text RevealPixel Perfect · ReactA GSAP Flip orb transition followed by a staggered word reveal.
• Annotated TextOpenSourceUI · React
• Stacked Outline Textuselayouts · ReactHeavy outlined type you can drag. Speed leaves a stacked white-on-black trail that springs back when you stop.
• Glitch TextKinetics · HTML/CSSRGB-split copies clip and jitter on hover — pure CSS
• Flipping Word SwapComponentry · ReactA clean character-by-character flip between two words on interaction.
• Animated Shiny TextAnimations (Svelte) · SvelteA shimmering text effect component that creates a moving shine animation across text.
• Fade Up WordBadtz UI · ReactA text component that reveals its content with a smooth fade-up animation, activated by default when the text enters…
• Text StreamObsidianUI · ReactA continuous vertical text stream changes speed and direction with your scroll.
• ShimmerNotra · ReactA light sweep across text for thinking and loading states.
• Text On Path ScrollGreatUI · ReactText laid along a curved SVG path that moves along it as the page scrolls.
• Text ShimmerForge UI · ReactA React component that creates an animated text shimmer effect using Motion, customizable by tag, duration, spread…
• Flip 3 D TextRewamp UI · ReactText whose letters flip in 3D around their axis.
• Thinking StateAI CSS · React
• Split TextSona UI · ReactSplits text into characters, words, or lines and reveals them with a staggered, optionally scroll-triggered animation.
• Text GradientWatermelon UI · React
• In-view titleArc Library · ReactBring a section title in as it scrolls into view.
• Directional UnderlineUI Lab · ReactThe underline comes in from the side your cursor entered and leaves toward the side it left.
• Caret SwapCojeev UI · ReactA colored caret block consumes a phrase before typing its replacement in whole graphemes.
• View More Text SwapMicroKit · ReactA borderless View More label that swaps vertically on hover.
• Flip WordsVelora UI · ReactCycles words with a springy blur-flip transition.
• Text FluidAtelier UI · React
• Doodle CalloutSpaceUI · ReactA hand-drawn arrow that draws itself next to a handwritten label, replaying on a loop.
• Snap TextSkecher UI · ReactA spring-driven text interaction that reacts to pointer movement and settles cleanly.
• Fog Text RevealSora UI · ReactInline text that materializes through a soft, turbulent WebGL fog mask, inherits font and color from CSS, and cycles…
• Streaming TextEaseUI · ReactReveals a model response as it streams in, fading each newly arrived word in on its own without replaying what's…
• Text Scramble ProReactFrame · ReactCycling phrases that decrypt from scrambled characters into readable text, left-to-right, right-to-left, or random…
• Flip WordsAceternity UI · ReactWord inside a sentence that is replaced by the next one of a list, letters blurring out and in.
• Circular TextReact Bits · ReactLayouts characters around a circle with optional rotation animation.
• Aurora TextMagic UI · ReactA beautiful aurora text effect
• TypewriterCult UI · ReactTypewriter effect component with customizable typing speed and cursor animation
• Streaming Texttransitions.dev · HTML/CSS
• Character StaggerAmicro Micro Transitions · ReactCharacter-by-character radial or linear stagger animation.
• Dynamic TextKokonut UI · ReactMorphing text where shared letters travel, old ones fall and new ones land, with decode and cycle modes.
• Text ShimmerbeUI · ReactText with a band of light sweeping across it in a loop.
• Text StatesSpectrum UI · ReactA status label that swaps its text in place, exiting up with blur and entering from below.
• Highlighted TextSpell UI · ReactText with sliding background highlight animation using mix-blend-mode.
• Flip TextVengeance UI · ReactCharacter flip text animation
• Text AnimationPanel UI · React NativeFive ways a piece of text or a number arrives.
• Animated Text-03 - TypingShadcn Space · ReactAnimated Typing component
• Gooey TextPixel Perfect · ReactGooey text hover morph — faithful GSAP ports of the three Codrops
• Apple Hello LoaderOpenSourceUI · React
• Gradient Shimmer TextKinetics · HTML/CSSA light band flows through clipped gradient text — pure CSS
• Kinetic Text RevealComponentry · ReactDirectional text reveal with soft blur and configurable word, character, or line stagger timing.
• Aurora TextAnimations (Svelte) · SvelteA text component with animated aurora gradient effect that smoothly transitions between customizable colors.
• Stagger Blur EffectBadtz UI · ReactInspired by Vercel's homepage, this text component creates a 3D rotation effect with blur on hover, revealing text…
• Multilingual QuoteGreatUI · React
• Kinetic Reel TextRewamp UI · ReactCentered 3D mechanical cylinder reel matching: "we make buttons sidebars shaders loaders orbs
• StaggerTextSona UI · ReactA text component with staggered animation.
• Page headerArc Library · ReactA project page header that folds into a compact bar as you scroll, with tabs whose counts roll.
• Focus ParagraphUI Lab · ReactBrings the sentence you're reading forward and lets the rest step back.
• Falling TextCojeev UI · ReactMeasured word rectangles fall, collide and settle inside a bounded stage.
• Wavy heroVelora UI · ReactBold centered hero over flowing waves, with a rotating headline word and avatar social proof.
• Flip TextSpaceUI · ReactPer-character 3D flip animation with a sine-eased stagger wave across the text.

Libraries with Animated text components

• Animations (Svelte)
• React Bits
• Pixel Perfect
• Magic UI
• Amicro Micro Transitions

Related categories

• Text Components
• React Text Components
• Tailwind CSS Text Components
• Svelte Text Components
• shadcn/ui Text Components
• Animated Text Highlight Components
• Animated Heading Components