# extendify/3.1.1/src/Agent/components/messages/AnimateChunks.jsx

Extendify, version 3.1.1. 28 lines.

- Page: https://pluginprobe.com/plugins/extendify/3.1.1/code/src/Agent/components/messages/AnimateChunks.jsx
- Raw: https://pluginprobe.com/plugins/extendify/3.1.1/raw/src/Agent/components/messages/AnimateChunks.jsx
- Modified: 2026-02-26T23:48:52+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/extendify/3.1.1/code/src/Agent/components/messages/AnimateChunks.jsx#L10-L20`.

```jsx
import { customComponents } from '@agent/lib/markdown';
import { AnimatePresence, motion } from 'framer-motion';
import ReactMarkdown from 'react-markdown';

export const AnimateChunks = ({ words, delay = 0.4, duration = 0.25 }) => {
	const isChars = words.every((word) => word.length === 1);

	return (
		<AnimatePresence>
			{words.map((word, i) => (
				<motion.span
					key={i}
					initial={{ opacity: 0, y: 8 }}
					animate={{ opacity: 1, y: 0 }}
					exit={{ opacity: 0 }}
					transition={{ duration, delay: i * delay }}
				>
					{isChars ? (
						word
					) : (
						<ReactMarkdown components={customComponents}>{word}</ReactMarkdown>
					)}
				</motion.span>
			))}
		</AnimatePresence>
	);
};

```