Shimmering Text Demo

PreviousNext

Demo showing an animated shimmering text.

Docs
animate-uiui

Preview

Loading preview…
registry/demo/primitives/texts/shimmering/index.tsx
import { ShimmeringText } from '@/components/animate-ui/primitives/texts/shimmering';

interface ShimmeringTextDemoProps {
  wave: boolean;
  duration: number;
}

export const ShimmeringTextDemo = ({
  wave,
  duration,
}: ShimmeringTextDemoProps) => {
  return (
    <ShimmeringText
      key={`${wave}-${duration}`}
      className="text-4xl font-semibold"
      wave={wave}
      duration={duration}
      text="Shimmering Text"
    />
  );
};

Installation

npx shadcn@latest add @animate-ui/demo-primitives-texts-shimmering

Usage

import { DemoPrimitivesTextsShimmering } from "@/components/ui/demo-primitives-texts-shimmering"
<DemoPrimitivesTextsShimmering />