feat: create jumping text effect

animata/text/jumping-text-instagram.stories.tsx

@@ -0,0 +1,21 @@
+import JumpingTextInstagram from "@/animata/text/jumping-text-instagram";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Text/Jumping Text Instagram",
+  component: JumpingTextInstagram,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof JumpingTextInstagram>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "This is a jumping text effect",
+  },
+};

animata/text/jumping-text-instagram.tsx

@@ -0,0 +1,51 @@
+import { motion } from "framer-motion";
+
+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={{
+            translateY: 30,
+            rotate: -30,
+            opacity: 0,
+          }}
+          animate={{
+            opacity: [0, 0.5, 1],
+            translateY: [30, -30, 0],
+            rotate: [-30, 30, 0],
+            transition: {
+              type: "spring",
+              damping: 10,
+              mass: 2,
+              delay: (isWordMode ? 0.05 : 0.01) * index,
+              duration: nodes.length * 0.05,
+            },
+          }}
+          className="inline-block origin-center"
+        >
+          {node === " " ? "\u00A0" : node}
+        </motion.span>
+      ))}
+      <span className="sr-only">{text}</span>
+    </div>
+  );
+}

animata/text/text-explode-imessage.tsx

@@ -166,6 +166,7 @@ export default function TextExplodeIMessage({
           {char === " " ? "\u00A0" : char}
         </motion.span>
       ))}
+      <span className="sr-only">{text}</span>
     </motion.div>
   );
 }

content/docs/text/jumping-text-instagram.mdx

@@ -0,0 +1,38 @@
+---
+title: Jumping Text (Instagram)
+description: Jumping text effect similar to the one seen in Instagram's text effects
+author: harimanok_
+---
+
+<ComponentPreview name="text-jumping-text-instagram--docs" />
+
+## Installation
+
+<Steps>
+<Step>Install dependencies</Step>
+
+```bash
+npm install framer-motion
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file `jumping-text-instagram.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/jumping-text-instagram.tsx
+```
+
+<Step>Paste the code</Step>{" "}
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/jumping-text-instagram.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Built by [hari](https://github.com/hari)