feat: create text explosion effect (codse#189)

Author: hari

.gitignore

@@ -39,3 +39,4 @@ next-env.d.ts
 
 *storybook.log
 public/preview
+_internal/

animata/text/text-explode-imessage.stories.tsx

@@ -0,0 +1,22 @@
+import TextExplodeIMessage from "@/animata/text/text-explode-imessage";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Text/Text Explode Imessage",
+  component: TextExplodeIMessage,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof TextExplodeIMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "iMessage text explode effect 🧨 🔥 🎃 🎉 🪅",
+    className: "text-red-500",
+  },
+};

animata/text/text-explode-imessage.tsx

@@ -0,0 +1,171 @@
+import { useCallback, useEffect, useRef } from "react";
+import { motion, useAnimationControls, Variants } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+const containerVariants: Variants = {
+  initial: {
+    opacity: 1,
+    translateY: 0,
+    transition: {
+      duration: 0.5,
+    },
+    letterSpacing: "0px",
+  },
+  shrink: {
+    // Scale might need to be adjust according to font size for better effect
+    scale: 0.8,
+    letterSpacing: "-10%",
+  },
+  jitter: {
+    x: [0, -3, 3, -3, 3, 0],
+    y: [0, -2, 2, -2, 2, 0],
+    transition: {
+      duration: 0.5,
+      times: [0, 0.2, 0.4, 0.6, 0.8, 1],
+      ease: "easeInOut",
+    },
+  },
+  explode: {
+    scale: [0.7, 0.9, 1],
+    opacity: [1, 0.7, 0],
+    letterSpacing: "0px",
+    transition: {
+      times: [0, 0.9, 1],
+    },
+  },
+  end: {
+    scale: 1,
+    letterSpacing: "0px",
+    translateY: 50,
+  },
+};
+
+const createExplosion = ({ index, total }: { index: number; total: number }) => {
+  const direction = Math.random() > Math.random() ? -1 : 1;
+
+  const x = Math.random() * 10 * total * direction;
+
+  const radius = total * 4;
+  const angleRange = Math.PI;
+  const angle = (index / (total - 1)) * angleRange;
+  const y = radius * -Math.sin(angle) * Math.random();
+
+  const rotation = Math.random() * 360 * direction;
+
+  return {
+    translateX: [0, x * 0.5, x * 0.7, x],
+    translateY: [0, y, -y / 5, 0, 5],
+    rotate: [0, rotation * 0.4, rotation * 0.8, rotation],
+    scale: [0.9, 1.2, 1 + Math.random() + 0.2, 1 + Math.random() * 2],
+    opacity: [1, 0.8, 0.5, 0],
+  };
+};
+
+const characterVariants: Variants = {
+  jitter: () => ({
+    x: [0, -3 + Math.random() * 6, 3 - Math.random() * 6, 0],
+    y: [0, -2 + Math.random() * 4, 2 - Math.random() * 4, 0],
+    transition: {
+      duration: 0.5,
+      times: [0, 0.33, 0.66, 1],
+      ease: "easeInOut",
+    },
+  }),
+  shrink: {
+    scale: 1.1,
+  },
+  explode: createExplosion,
+  end: {
+    translateY: 0,
+    translateX: 0,
+    rotate: 0,
+    scale: 1,
+  },
+  initial: {
+    opacity: 1,
+  },
+};
+
+const splitText = (text: string) => String(text).split(/(?:)/u);
+
+export default function TextExplodeIMessage({
+  text,
+  mode = "loop",
+  className,
+}: {
+  text: string;
+  className?: string;
+  mode?: "loop" | "hover";
+}) {
+  const characters = splitText(text);
+  const controls = useAnimationControls();
+  const isPlaying = useRef(false);
+
+  const animateSequence = useCallback(async () => {
+    await Promise.all([
+      controls.start("shrink", {
+        duration: 1,
+        ease: "easeOut",
+      }),
+      controls.start("jitter", {
+        delay: 0.1,
+      }),
+    ]);
+    await controls.start("explode", {});
+    await controls.start("end");
+    await controls.start("initial", {
+      delay: 0.5,
+      duration: 1,
+      type: "spring",
+    });
+
+    if (mode === "loop") {
+      requestAnimationFrame(() => animateSequence());
+    } else {
+      isPlaying.current = false;
+    }
+  }, [mode, controls]);
+
+  useEffect(() => {
+    if (!characters.length || mode === "hover") {
+      return;
+    }
+
+    animateSequence();
+  }, [characters.length, mode, animateSequence]);
+
+  return (
+    <motion.div
+      variants={containerVariants}
+      animate={controls}
+      onPointerDown={() => {
+        if (mode === "hover" && !isPlaying.current) {
+          isPlaying.current = true;
+          animateSequence();
+        }
+      }}
+      onMouseEnter={() => {
+        if (mode === "hover" && !isPlaying.current) {
+          isPlaying.current = true;
+          animateSequence();
+        }
+      }}
+      className={cn(
+        "flex items-center justify-center text-3xl tracking-normal text-foreground",
+        className,
+      )}
+    >
+      {characters.map((char, index) => (
+        <motion.span
+          key={index}
+          variants={characterVariants}
+          custom={{ index, total: characters.length }}
+          className="inline-block"
+        >
+          {char === " " ? "\u00A0" : char}
+        </motion.span>
+      ))}
+    </motion.div>
+  );
+}

content/docs/text/text-explode-imessage.mdx

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

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -17,18 +13,15 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "target": "ESNext",
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ],
-      "contentlayer/generated": [
-        "./.contentlayer/generated"
-      ]
+      "@/*": ["./*"],
+      "contentlayer/generated": ["./.contentlayer/generated"]
     }
   },
   "include": [
@@ -38,7 +31,5 @@
     ".next/types/**/*.ts",
     ".contentlayer/generated"
   ],
-  "exclude": [
-    "node_modules"
-  ]
-}
+  "exclude": ["node_modules"]
+}