Text effects

Word reveal

Name: SketchXFlow
Availability: InStock

A headline whose words rise out of a soft blur one after another, then the supporting line follows.

headline · accent word · follow-up line

Make the thing people come back to

Plan, design and ship in one place — with the team you already have.

/* globals.css
@keyframes word-in { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } }
*/
import { Fragment } from "react";
import { cn } from "@/lib/utils";

interface WordRevealProps {
  text: string;
  /** Indexes of words to colour with the brand. */
  accent?: number[];
  className?: string;
}

export function WordReveal({ text, accent = [], className }: WordRevealProps) {
  const words = text.split(" ");
  return (
    <h2 aria-label={text} className={cn("text-balance text-3xl font-medium tracking-tight text-fg", className)}>
      {words.map((word, i) => (
        <Fragment key={i}>
          {i > 0 ? " " : null}
          <span
            aria-hidden
            className={cn(
              "inline-block animate-[word-in_.75s_cubic-bezier(.2,.7,.1,1)_both] motion-reduce:animate-none",
              accent.includes(i) && "text-primary",
            )}
            style={{ animationDelay: 100 + i * 70 + "ms" }}
          >
            {word}
          </span>
        </Fragment>
      ))}
    </h2>
  );
}

// Follow-up lines: className="animate-rise motion-reduce:animate-none" style={{ animationDelay: "600ms" }}

The code uses the Taste Tailwind preset. Make yours on the Taste page with Export my system.