3 variants

Text Animations

Animated React text effects for headlines. A color sweep reveal and a marker highlight that draws itself in.

Dia text reveal

A color band sweeps across text once, left to right, then settles on the theme foreground color.

Build something beautiful

usage.tsx

import { DiaTextReveal } from "@/components/registry/dia-text-reveal";

export function Headline() {
  return <DiaTextReveal text="Ship faster" className="text-4xl font-semibold" />;
}

"use client";

import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react";
import { useEffect, useRef } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

/** On-brand accents sampled across the sweeping band. */
const DEFAULT_COLORS = ["var(--violet)", "var(--danger)", "var(--warning)", "var(--success)", "var(--neon)"];
/** Half-width of the band, in percent of the text's own width. */
const BAND_HALF = 18;
/** The band travels from off the left edge to off the right, so the word starts transparent and ends settled. */

120 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/dia-text-reveal

Text highlight

A marker stroke that draws itself across text once, as a highlight behind it or a wavy underline beneath it.

Ship your next idea with a marker touch.

usage.tsx

import { TextHighlight } from "@/components/registry/text-highlight";

export function Callout() {
  return (
    <p>
      Ship your <TextHighlight action="highlight">next idea</TextHighlight> today.
    </p>
  );
}

"use client";

import { type ReactNode, useEffect, useRef } from "react";
import { EASE_OUT_CSS } from "@/lib/ease";
import { cn } from "@/lib/utils";

/** A rough-edged rectangle instead of a perfect one, so the marker box reads as hand drawn. */
const HIGHLIGHT_CLIP =
  "polygon(1% 10%, 18% 3%, 42% 7%, 68% 2%, 90% 6%, 100% 3%, 99% 88%, 80% 96%, 55% 91%, 30% 98%, 10% 93%, 0% 97%)";

/** Two strokes that cross rather than run parallel, like a line redrawn slightly off. */
const UNDERLINE_PATHS: [string, string] = [

127 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/text-highlight

Split flap

Text that flips through the alphabet letter by letter until it lands, like an airport departures board. Only the letters that change flip again.

Boarding

usage.tsx

import { SplitFlap } from "@/components/registry/split-flap";

export function Departure({ flight }) {
  return <SplitFlap text={flight.status} columns={8} />;
}

"use client";

import { useInView, useReducedMotion } from "motion/react";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface SplitFlapProps {
  text: string;
  /** Pads to this many letters. Set it to the longest word, so the line never changes width. */
  columns?: number;
  /** Letters each column rolls past before it lands. Default 6. */
  spin?: number;

93 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/split-flap