# Text Shimmer Animation

A shadcn/ui block from the [@uui](https://uui.app) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uui/text-shimmer-animation-on-hover).

- Page, with a live preview: https://shadcn.exchange/r/uui/text-shimmer-animation-on-hover
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uui/text-shimmer-animation-on-hover-light-2a4dd6e454041439.png
- Registry item: https://uui.app/r/text-shimmer-animation-on-hover.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uui.app/r/text-shimmer-animation-on-hover.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `components/uui/text-shimmer-animation-on-hover/example.tsx`

```tsx
'use client';

import { Button } from '@/components/ui/button';
import { TextShimmer } from './text-shimmer';

const features = ['Unlimited API requests', 'Priority inference queue', '128K context window', 'Dedicated support'];

export function PricingCard() {
  return (
    <div className="h-svh flex items-center justify-center px-4">
      <article className="bg-card w-full mx-auto md:max-w-sm p-6">
        <header>
          <TextShimmer className="font-medium">Ultra Tier</TextShimmer>
        </header>

        <div className="mt-6">
          <h1 className="text-lg font-medium text-muted-foreground">Usage-based</h1>
          <div className="mt-2 flex items-baseline gap-1.5">
            <span className="text-xl font-medium">$0.01</span>
            <span className="text-sm text-muted-foreground">/ 1K tokens</span>
          </div>
          <p className="mt-2 text-sm text-muted-foreground">Pay only for what you use. No monthly minimum.</p>
        </div>

        <ul className="mt-6 space-y-3">
          {features.map(feature => (
            <li key={feature} className="flex items-center gap-2 text-sm">
              <span className="size-2 bg-primary" />
              <span>{feature}</span>
            </li>
          ))}
        </ul>
        <footer className="mt-6">
          <Button variant="secondary" className="bg-muted w-full h-11 text-sm">
            <TextShimmer className="delay-1500">Get Started Now</TextShimmer>
          </Button>
        </footer>
      </article>
    </div>
  );
}
```

### `components/uui/text-shimmer-animation-on-hover/text-shimmer.tsx`

```tsx
import { cn } from '@/lib/utils';
import * as React from 'react';

export const TextShimmer = ({ children, className }: { children: React.ReactNode; className?: string }) => {
  return (
    <span
      className={cn(
        'bg-[linear-gradient(90deg,var(--foreground)_0%,var(--foreground)_var(--highlight-x),#f98dbe_calc(var(--highlight-x)+8%),#edb541_calc(var(--highlight-x)+28%),#54c546_calc(var(--highlight-x)+48%),var(--foreground)_calc(var(--highlight-x)+56%),var(--foreground)_100%)] animate-shimmer [-webkit-text-fill-color:transparent] bg-clip-text inline-block',
        className,
      )}
    >
      {children}
    </span>
  );
};
```