feat: add glitch text component

animata/text/glitch-text.stories.tsx

@@ -0,0 +1,22 @@
+import GlitchText from "@/animata/text/glitch-text";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Text/Glitch Text",
+  component: GlitchText,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof GlitchText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "1000 Stars",
+    starCount: 50,
+  },
+};

animata/text/glitch-text.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Tomorrow } from "next/font/google";
+
+import { cn } from "@/lib/utils";
+
+const tomorrow = Tomorrow({
+  subsets: ["latin"],
+  weight: ["800", "900"],
+  variable: "--font-tomorrow",
+});
+
+export default function GlitchText({
+  text = "1000 Stars",
+  className,
+  starCount = 50,
+}: {
+  text: string;
+  className?: string;
+  starCount?: number;
+}) {
+  return (
+    <div className="relative flex items-center justify-center overflow-hidden">
+      <div className="relative flex flex-col items-center justify-center bg-gradient-to-b from-[#4B0082] via-[#3B0066] to-[#2B004A]">
+        {[...Array(starCount)].map((_, i) => (
+          <div
+            key={i}
+            className="star absolute aspect-square animate-[twinkle_5s_infinite] rounded-full bg-[#fafafa] opacity-75"
+            style={{
+              width: `${Math.random() * 4}px`,
+              left: `${Math.random() * 100}%`,
+              top: `${Math.random() * 100}%`,
+              animationDelay: `${Math.random() * 5}s`,
+            }}
+          />
+        ))}
+        <h1
+          className={cn(
+            "glitch-text z-10 animate-[glitch_0.5s_infinite] p-6 text-4xl font-black md:p-12 md:text-8xl",
+            className,
+            tomorrow.className,
+          )}
+          aria-label={text}
+        >
+          {text}
+        </h1>
+      </div>
+    </div>
+  );
+}

content/docs/text/glitch-text.mdx

@@ -0,0 +1,75 @@
+---
+title: Glitch Text
+description: Glitch text effect
+author: harimanok_
+---
+
+<ComponentPreview name="text-glitch-text--docs" />
+
+## Installation
+
+<Steps>
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following to your tailwind.config.js file.
+
+```json
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        glitch: {
+          "0%": {
+            color: "#fff",
+            textShadow: "2px 2px 0px #00ffff, -2px -2px 0px #ff00ff",
+          },
+          "25%": {
+            color: "#00ffff",
+            textShadow: "-2px -2px 0px #fff, 2px 2px 0px #ff00ff",
+          },
+          "50%": {
+            color: "#ff00ff",
+            textShadow: "2px -2px 0px #00ffff, -2px 2px 0px #fff",
+          },
+          "75%": {
+            color: "#eee",
+            textShadow: "-2px 2px 0px #ff00ff, 2px -2px 0px #00ffff",
+          },
+          "100%": {
+            color: "#fff",
+            textShadow: "2px 2px 0px #00ffff, -2px -2px 0px #ff00ff",
+          },
+        },
+        twinkle: {
+          "0%": { opacity: "0" },
+          "50%": { opacity: "1" },
+          "100%": { opacity: "0" },
+        },
+      },
+    },
+  },
+}
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file `glitch-text.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/glitch-text.tsx
+```
+
+<Step>Paste the code</Step>{" "}
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/glitch-text.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Built by [hari](https://github.com/hari)

tailwind.config.ts

@@ -171,6 +171,33 @@ const config = {
           "50%": { fill: "#a855f7", brightness: "500%" },
           "100%": { fill: "currentColor", brightness: "1" },
         },
+        glitch: {
+          "0%": {
+            color: "#fff",
+            textShadow: "2px 2px 0px #00ffff, -2px -2px 0px #ff00ff",
+          },
+          "25%": {
+            color: "#00ffff",
+            textShadow: "-2px -2px 0px #fff, 2px 2px 0px #ff00ff",
+          },
+          "50%": {
+            color: "#ff00ff",
+            textShadow: "2px -2px 0px #00ffff, -2px 2px 0px #fff",
+          },
+          "75%": {
+            color: "#eee",
+            textShadow: "-2px 2px 0px #ff00ff, 2px -2px 0px #00ffff",
+          },
+          "100%": {
+            color: "#fff",
+            textShadow: "2px 2px 0px #00ffff, -2px -2px 0px #ff00ff",
+          },
+        },
+        twinkle: {
+          "0%": { opacity: "0" },
+          "50%": { opacity: "1" },
+          "100%": { opacity: "0" },
+        },
       },
       animation: {
         fill: "fill 1s forwards",