AnimatedCSS

Shimmer Text

A slow band of light passing across text, for loading states or a quiet highlight. Works as a Server Component.

Building your preview

Thinking through 14 files…

Installation

npx shadcn@latest add https://ui-collections.vercel.app/r/glass/shimmer-text.json

Also installs the theme, cn(). Packages: clsx, tailwind-merge.

Usage

shimmer-text-demo.tsx

import { ShimmerText } from "@/registry/kit/ui/shimmer-text";

export default function ShimmerTextDemo() {
  return (
    <div className="flex flex-col items-center gap-6 text-center">
      <ShimmerText as="h2" className="font-display text-5xl tracking-[-0.03em] md:text-6xl">
        Building your preview
      </ShimmerText>
      <div className="surface flex items-center gap-3 rounded-control px-5 py-2.5 text-sm">
        <ShimmerText duration={2}>Thinking through 14 files…</ShimmerText>
      </div>
    </div>
  );
}

API

as

= "span"

"span" | "p" | "h1" | "h2" | "h3"

Element to render.

duration

= 2.6

number

Seconds per sweep.

Source

components/ui/shimmer-text.tsx

import type { CSSProperties } from "react";

import { cn } from "@/registry/kit/lib/utils";

// Hoisted and de-duplicated by React (href + precedence).
const keyframes = `
@keyframes kit-shimmer { from { background-position: 150% 0 } to { background-position: -50% 0 } }
`;

export interface ShimmerTextProps {
  children: React.ReactNode;
  as?: "span" | "p" | "h1" | "h2" | "h3";
  /** Seconds per sweep. */
  duration?: number;
  className?: string;
}

/**
 * Text with a slow band of light passing across it, for loading states or
 * a quiet highlight. A clipped, moving background; no JavaScript, works as
 * a Server Component.
 */
export function ShimmerText({ children, as: Tag = "span", duration = 2.6, className }: ShimmerTextProps) {
  return (
    <>
      <style href="kit-shimmer" precedence="medium">
        {keyframes}
      </style>
      <Tag
        className={cn(
          "kit-shimmer inline-block bg-[linear-gradient(110deg,var(--color-muted)_35%,var(--color-fg)_50%,var(--color-muted)_65%)] bg-size-[250%_100%] bg-clip-text text-transparent",
          className,
        )}
        style={{ animation: `kit-shimmer ${duration}s linear infinite` } as CSSProperties}
      >
        {children}
      </Tag>
    </>
  );
}

Usage

shimmer-text-demo.tsx

import { ShimmerText } from "@/registry/kit/ui/shimmer-text";

export default function ShimmerTextDemo() {
  return (
    <div className="flex flex-col items-center gap-6 text-center">
      <ShimmerText as="h2" className="font-display text-5xl tracking-[-0.03em] md:text-6xl">
        Building your preview
      </ShimmerText>
      <div className="surface flex items-center gap-3 rounded-control px-5 py-2.5 text-sm">
        <ShimmerText duration={2}>Thinking through 14 files…</ShimmerText>
      </div>
    </div>
  );
}

Source

components/ui/shimmer-text.tsx

import type { CSSProperties } from "react";

import { cn } from "@/registry/kit/lib/utils";

// Hoisted and de-duplicated by React (href + precedence).
const keyframes = `
@keyframes kit-shimmer { from { background-position: 150% 0 } to { background-position: -50% 0 } }
`;

export interface ShimmerTextProps {
  children: React.ReactNode;
  as?: "span" | "p" | "h1" | "h2" | "h3";
  /** Seconds per sweep. */
  duration?: number;
  className?: string;
}

/**
 * Text with a slow band of light passing across it, for loading states or
 * a quiet highlight. A clipped, moving background; no JavaScript, works as
 * a Server Component.
 */
export function ShimmerText({ children, as: Tag = "span", duration = 2.6, className }: ShimmerTextProps) {
  return (
    <>
      <style href="kit-shimmer" precedence="medium">
        {keyframes}
      </style>
      <Tag
        className={cn(
          "kit-shimmer inline-block bg-[linear-gradient(110deg,var(--color-muted)_35%,var(--color-fg)_50%,var(--color-muted)_65%)] bg-size-[250%_100%] bg-clip-text text-transparent",
          className,
        )}
        style={{ animation: `kit-shimmer ${duration}s linear infinite` } as CSSProperties}
      >
        {children}
      </Tag>
    </>
  );
}