Text Shimmer Animation

Pricing 17

About

An animated text effect that sweeps a multi-color gradient shimmer across the characters for emphasis or highlights.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Shimmer Animation to your project and fits it to your theme.

Code

How Text Shimmer Animation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

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

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

export default 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>
  );
}