2 variants

Text Animations

Color sweeps and reveals for headlines and labels.

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's center travels from fully off the left edge to fully off the right, so the

126 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Props

textRequiredstring

The words the color band sweeps across.

colorsstring[]Default the theme accents

Sampled across the band, left to right.

textColorstringDefault var(--foreground)

What the text settles to once the band has passed.

durationnumberDefault 1.4

Sweep length, in seconds.

delaynumberDefault 0

Wait before the sweep starts, in seconds.

repeatbooleanDefault false

Loops the sweep instead of running it once.

repeatDelaynumberDefault 1

Pause between sweeps, in seconds. Only used when repeat is on.

startOnViewbooleanDefault true

Holds the sweep until the text scrolls into view, so it is not already over by the time it is read.

classNamestring

Merged last, so anything passed here wins over the component's own classes.

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 differently-shaped strokes that cross rather than run parallel, like a line quickly redrawn slightly off. */
const UNDERLINE_PATHS: [string, string] = [

130 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Props

childrenRequiredReactNode

The text the mark is drawn across.

action"highlight" | "underline"Default "highlight"

A marker box behind the text, or a wavy stroke beneath it.

colorstringDefault var(--accent)

Marker color.

durationnumberDefault 0.7

Draw length, in seconds.

delaynumberDefault 0

Wait before the draw starts, in seconds.

startOnViewbooleanDefault true

Holds the draw until the text scrolls into view.

classNamestring

Merged last, so anything passed here wins over the component's own classes.