Docs
Jumping Text (Instagram)
Jumping text effect similar to the one seen in Instagram's text effects
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/text/jumping-text-instagram.jsonManual
Install dependencies
npm install motionRun the following command
It will create a new file jumping-text-instagram.tsx inside the components/animata/text directory.
mkdir -p components/animata/text && touch components/animata/text/jumping-text-instagram.tsxPaste the code
Open the newly created file and paste the following code:
import { motion } from "motion/react";
const splitText = (text: string, word = false) => {
if (word) {
return String(text).split(/(?:\b)/u);
}
return String(text).split(/(?:)/u);
};
export default function JumpingTextInstagram({
text = "This is a jumping text effect",
mode = "word",
className,
}: {
text: string;
className?: string;
mode?: "word" | "character";
}) {
const isWordMode = mode === "word";
const nodes = splitText(text, isWordMode);
return (
<div className={className} key={text}>
{nodes.map((node, index) => (
<motion.span
key={index}
initial={{
y: 30,
rotate: -30,
opacity: 0,
}}
animate={{
opacity: 1,
y: 0,
rotate: 0,
}}
transition={{
type: "spring",
damping: 10,
mass: 2,
delay: (isWordMode ? 0.05 : 0.01) * index,
}}
className="inline-block origin-center"
>
{node === " " ? "\u00A0" : node}
</motion.span>
))}
<span className="sr-only">{text}</span>
</div>
);
}Credits
Built by hari