Text Shimmer

Motoko UI

Installation


pnpm dlx shadcn@latest add @motokoui/text-shimmer

Usage

import { TextShimmer } from "@/components/ui/text-shimmer"
 
export default function Example() {
  return (
    <TextShimmer className="text-4xl font-semibold tracking-tight">
      Motoko UI
    </TextShimmer>
  )
}

A soft white band drifts across the glyphs via background-clip: text, driven by Motion’s useAnimationFrame — a continuous tile scroll with no cycle restart.

Props

Prop	Type	Default
`children`	`ReactNode`	required
`duration`	`number`	`2.2`
`delay`	`number`	`0`
`className`	`string`	—

Respects prefers-reduced-motion — the sweep freezes when motion is reduced.