Text Shimmer

An animated gradient sweep across text.

Better Components

Example.tsx

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

export function Example() {
  return (
    <TextShimmer className="text-3xl font-medium" duration={1.5} spread={2}>
      Better Components
    </TextShimmer>
  )
}

Dependencies

motion

Props

Prop	Type	Default	Description
children*	string	—
as	ElementType	—
className	string	—
duration	number	2	Animation duration in seconds.
spread	number	2	Width of the moving highlight, in `ch` units.