Text Shimmer

Muted text with a light sweep, good for “thinking…” and loading copy.

Text effectsServer-safe

Thinking through it…

Install

bash

npx @agents-npm-packages/vibeui add text-shimmer --dir ./src/components/ui

Import

tsx

import { TextShimmer } from "@/components/ui/text-shimmer"

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<TextShimmer>

Prop	Type	Default	Description
children*	ReactNode	—	Content rendered inside the component.
className	string	—	Extra classes, merged with the component's own.

Source

src/components/ui/text-shimmer.tsx

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

/** Muted text with a light sweep, good for “thinking…” and loading copy. */
export function TextShimmer({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <span
      className={cn(
        "inline-block animate-shimmer bg-[linear-gradient(100deg,var(--muted)_35%,var(--ink)_50%,var(--muted)_65%)] bg-[length:250%_100%] bg-clip-text text-transparent",
        className,
      )}
    >
      {children}
    </span>
  );
}

Exports TextShimmer. Peer dependencies: clsx, tailwind-merge.