āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/ibelick/motion-primitives/text-loop/page ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
export const metadata = { title: 'Text Loop - Motion-Primitives', description: 'Text animation that transitions between multiple items, creating an engaging looping effect. Built for React, Next.js, and Tailwind CSS.', };
import { TextLoopBasic } from './text-loop-basic'; import { TextLoopCustomVariantsTransition } from './text-loop-custom-variants-transition'; import { TextLoopOnIndexChange } from './text-loop-on-index'; import ComponentCodePreview from '@/components/website/component-code-preview';
Text animation that transitions between multiple items, creating an engaging looping effect
<ComponentCodePreview component={<TextLoopBasic />} filePath='app/docs/text-loop/text-loop-basic.tsx' classNameComponentContainer='min-h-0 py-12 px-12 justify-start items-start' />
<ComponentCodePreview component={<TextLoopCustomVariantsTransition />} filePath='app/docs/text-loop/text-loop-custom-variants-transition.tsx' classNameComponentContainer='min-h-0 py-12 px-12 justify-start items-start' />
You can use the onIndexChange prop to trigger a callback function when the index changes. In this example, we use it to create alternating animation directions.
<ComponentCodePreview component={<TextLoopOnIndexChange />} filePath='app/docs/text-loop/text-loop-on-index.tsx' classNameComponentContainer='min-h-[124px] py-12 px-12 justify-start items-start' />
<Step>Copy and paste the following code into your project.</Step>
<CodeBlock filePath='components/core/text-loop.tsx' /><Step>Update the import paths to match your project setup.</Step>
</Steps> </TabsContent> </Tabs>| Prop | Type | Default | Description | | :------------ | :--------------------------- | :-------- | :-------------------------------------------------------------- | | children | React.ReactNode[] | | The text content to be animated. | | className | string | | Additional CSS classes for styling. | | interval | number | 2 | Time interval between text changes in seconds. | | transition | Transition | | Animation transition settings. Can't be more than the interval. | | variants | Variants | | Custom animation variants. | | onIndexChange | (index: number) => void | | Callback function that triggers when the index changes. | | trigger | boolean | true | Whether to trigger the animation. | | mode | AnimatePresenceProps['mode'] | popLayout | Mode of for the AnimatePresence component. |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā