Jumping Text (Instagram)

Docs

Jumping text effect similar to the one seen in Instagram's text effects

Installation

CLI

pnpm dlx shadcn@latest add https://animata.design/r/text/jumping-text-instagram.json

Manual

Install dependencies

npm install motion

Run 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.tsx

Paste 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

Edit this page on GitHub

Jitter Text Kinetic Center Build