Rolling Text Demo

PreviousNext

Demo showing an animated rolling text.

Docs
animate-uiui

Preview

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

interface RollingTextDemoProps {
  delay: number;
}

export const RollingTextDemo = ({ delay }: RollingTextDemoProps) => {
  return (
    <RollingText
      key={delay}
      delay={delay}
      className="text-4xl font-semibold"
      text="Rolling Text"
    />
  );
};

Installation

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

Usage

import { DemoPrimitivesTextsRolling } from "@/components/ui/demo-primitives-texts-rolling"
<DemoPrimitivesTextsRolling />