Animated text that shimmers with a flowing gradient effect. Great for highlighting new features, primary calls-to-action, or hero section headlines.

Installation

CLI

npx @modus-ui/cli add shimmer-text

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/shimmer-text.tsx.
3. Paste the code.

Usage

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

export default function Example() {
  return (
    <h1>
      <ShimmerText text="Build Interfaces Faster" />
    </h1>
  );
}

Props