Trickle UI: CSS Text Animation Components for React & Next.js

trickle is a React text animation component library with 40+ CSS-based effects for headings, labels, and short UI copy.

It uses shadcn CLI to install editable TSX components for word reveals, shimmering gradients, glitches, and rotating phrases.

Features

• Fade, blur, slide, and scale reveals with word or character staggering.
• Hover-triggered shimmer, animated color gradients, and pixel or scanline textures.
• CSS keyframes and transitions, with no Motion, GSAP, or React Spring dependency.
• Reduced-motion overrides for CSS animation, with preference handling in stateful effects.
• MIT-licensed source files for editing component behavior and animation styles.

How to Use trickle

Use a React or Next.js project with Tailwind CSS v4. Initialize shadcn in your project:

npx shadcn@latest init

Basic Example: Install TextReveal

npx shadcn@latest add https://tricklekit.dev/r/text-reveal.json

Use the Component in Your App

import { TextReveal } from "@/components/trickle/text-reveal";
export default function ProductHero() {
  return (
    <h1 className="text-5xl font-semibold tracking-tight">
      <TextReveal mode="blur" split="word" stagger={90}>
        Design the next release
      </TextReveal>
    </h1>
  );
}

Cycle Phrases with Typewriter

Typewriter uses client state and depends on the shared text-root registry item. A Next.js Server Component page can render it as a child.

npx shadcn@latest add https://tricklekit.dev/r/typewriter.json

import { Typewriter } from "@/components/trickle/typewriter";
export default function HeroMessage() {
  return (
    <h2 className="text-3xl font-medium">
      Built for{" "}
      <Typewriter
        strings={["design teams", "developers", "creators"]}
        loop
        charDelay={70}
        holdDuration={1800}
      />
    </h2>
  );
}

Available Text Animation Components

Reveal

TextReveal, Typewriter, WordCascade, CharStagger, DecryptScramble, TypoCorrect, InkBleed.

Emphasis

HighlighterSweep, UnderlineDraw, Spotlight, Stamp, ConfettiText.

Color

AuroraText, ShinyShimmer, GradientShift, RainbowRoll, NeonFlicker, Plasma.

Motion

Bounce, Float, Magnetize, ScaleSlam, SpinIn, Wave, Stretch, Compress, Wobble3D, Flutter, PulseText.

Glitch

GlitchSplit, Shatter, Tear, MorphSwap.

Texture

Grain, Pixelate, Scanline, Halftone, Wireframe, Mosaic.

Sequence

WordRotate, CarouselFlip, Echo, Phase, Shutter, MarqueeRibbon, StaticText, Reflect.

Customize Shimmer Colors

ShinyShimmer reads --trickle-shimmer-base and --trickle-shimmer-highlight. Set these values in your global stylesheet:

:root {
  --trickle-shimmer-base: #64748b;
  --trickle-shimmer-highlight: #f8fafc;
}

Alternatives and Related Resources

• Calligraph: React Text Transitions with Motion
• Animated UI Components Built with GSAP for Next.js Apps – PaceUI
• Animated Next.js UI Components with Tailwind CSS and Motion – Spark UI