feat: enhance Magicui with new demo components including BoxReveal, FlipText, and various animated buttons and text effects

src/app/[locale]/(marketing)/(pages)/magicui/page.tsx

@@ -1,12 +1,23 @@
+import { AnimatedGradientTextDemo } from '@/components/magicui/example/animated-gradient-text-example';
 import { AnimatedGridPatternDemo } from '@/components/magicui/example/animated-grid-pattern-example';
 import { AnimatedListDemo } from '@/components/magicui/example/animated-list-example';
+import { AnimatedShinyTextDemo } from '@/components/magicui/example/animated-shiny-text-example';
+import { AnimatedSubscribeButtonDemo } from '@/components/magicui/example/animated-subscribe-button-example';
 import { BentoDemo } from '@/components/magicui/example/bento-grid-example';
 import { DotPatternDemo } from '@/components/magicui/example/dot-pattern-example';
 import { GridPatternDemo } from '@/components/magicui/example/grid-pattern-example';
 import { HeroVideoDialogDemoTopInBottomOut } from '@/components/magicui/example/hero-video-dialog-example';
+import { HyperTextDemo } from '@/components/magicui/example/hyper-text-example';
 import { InteractiveGridPatternDemo } from '@/components/magicui/example/interactive-grid-pattern-example';
+import { InteractiveHoverButtonDemo } from '@/components/magicui/example/interactive-hover-button-example';
 import { MarqueeDemoVertical } from '@/components/magicui/example/marquee-example';
+import { NumberTickerDemo } from '@/components/magicui/example/number-ticker-example';
+import { PulsatingButtonDemo } from '@/components/magicui/example/pulsating-button-example';
+import { RainbowButtonDemo } from '@/components/magicui/example/rainbow-button-example';
 import { RippleDemo } from '@/components/magicui/example/ripple-example';
+import { ShimmerButtonDemo } from '@/components/magicui/example/shimmer-button-example';
+import { ShinyButtonDemo } from '@/components/magicui/example/shiny-button-example';
+import { WordRotateDemo } from '@/components/magicui/example/word-rotate-example';
 
 /**
  * Magic UI Components Showcase Page
@@ -16,16 +27,51 @@ import { RippleDemo } from '@/components/magicui/example/ripple-example';
 export default async function MagicuiPage() {
   return (
     <div className="mx-auto space-y-8">
-      <DotPatternDemo />
-      <GridPatternDemo />
-      <AnimatedGridPatternDemo />
-      <InteractiveGridPatternDemo />
       <RippleDemo />
       <BentoDemo />
       <div className="grid md:grid-cols-2 gap-4">
         <MarqueeDemoVertical />
         <AnimatedListDemo />
       </div>
+      <div className="grid md:grid-cols-4 gap-8">
+        <div className="flex items-center justify-center">
+          <AnimatedGradientTextDemo />
+        </div>
+        <div className="flex items-center justify-center">
+          <AnimatedShinyTextDemo />
+        </div>
+        <div className="flex items-center justify-center">
+          <AnimatedSubscribeButtonDemo />
+        </div>
+        <div className="flex items-center justify-center">
+          <ShimmerButtonDemo />
+        </div>
+        <div className="flex items-center justify-center">
+          <ShinyButtonDemo />
+        </div>
+        <div className="flex items-center justify-center">
+          <RainbowButtonDemo />
+        </div>
+        <div className="flex items-center justify-center">
+          <PulsatingButtonDemo />
+        </div>
+        <div className="flex items-center justify-center">
+          <NumberTickerDemo />
+        </div>
+        <div className="flex items-center justify-center">
+          <InteractiveHoverButtonDemo />
+        </div>
+        <div className="flex items-center justify-center">
+          <HyperTextDemo />
+        </div>
+        <div className="flex items-center justify-center">
+          <WordRotateDemo />
+        </div>
+      </div>
+      <DotPatternDemo />
+      <GridPatternDemo />
+      <AnimatedGridPatternDemo />
+      <InteractiveGridPatternDemo />
       <HeroVideoDialogDemoTopInBottomOut />
     </div>
   );

src/components/magicui/example/animated-gradient-text-example.tsx

@@ -1,20 +1,31 @@
-import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text"
+import { cn } from "@/lib/utils";
+import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
+import { ChevronRight } from "lucide-react";
 
-export default function AnimatedGradientTextExample() {
+export function AnimatedGradientTextDemo() {
   return (
-    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-10 bg-black/95 p-10">
-      <AnimatedGradientText className="text-6xl font-bold">
-        Gradient Text
-      </AnimatedGradientText>
-      
-      <AnimatedGradientText 
-        className="text-4xl font-bold"
-        colorFrom="#f59e0b"
-        colorTo="#3b82f6"
-        speed={2}
-      >
-        Custom Gradient
+    <div className="group relative mx-auto flex items-center justify-center rounded-full px-4 py-1.5 shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500 ease-out hover:shadow-[inset_0_-5px_10px_#8fdfff3f] ">
+      <span
+        className={cn(
+          "absolute inset-0 block h-full w-full animate-gradient rounded-[inherit] bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:300%_100%] p-[1px]",
+        )}
+        style={{
+          WebkitMask:
+            "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+          WebkitMaskComposite: "destination-out",
+          mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+          maskComposite: "subtract",
+          WebkitClipPath: "padding-box",
+        }}
+      />
+      🎉 <hr className="mx-2 h-4 w-px shrink-0 bg-neutral-500" />
+      <AnimatedGradientText className="text-sm font-medium">
+        Introducing Magic UI
       </AnimatedGradientText>
+      <ChevronRight
+        className="ml-1 size-4 stroke-neutral-500 transition-transform
+ duration-300 ease-in-out group-hover:translate-x-0.5"
+      />
     </div>
-  )
-} 
+  );
+}

src/components/magicui/example/animated-shiny-text-example.tsx

@@ -1,18 +1,21 @@
-import { AnimatedShinyText } from "@/components/magicui/animated-shiny-text"
+import { ArrowRightIcon } from "@radix-ui/react-icons";
 
-export default function AnimatedShinyTextExample() {
+import { cn } from "@/lib/utils";
+import { AnimatedShinyText } from "@/components/magicui/animated-shiny-text";
+
+export function AnimatedShinyTextDemo() {
   return (
-    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-10 bg-black/95 p-10">
-      <AnimatedShinyText className="text-6xl font-bold text-white">
-        Shiny Text
-      </AnimatedShinyText>
-      
-      <AnimatedShinyText 
-        className="text-4xl font-bold text-white"
-        shimmerWidth={200}
+    <div className="z-10 flex min-h-64 items-center justify-center">
+      <div
+        className={cn(
+          "group rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800",
+        )}
       >
-        Wide Shine
-      </AnimatedShinyText>
+        <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400">
+          <span>✨ Introducing Magic UI</span>
+          <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
+        </AnimatedShinyText>
+      </div>
     </div>
-  )
-} 
+  );
+}

src/components/magicui/example/animated-subscribe-button-example.tsx

@@ -1,21 +1,17 @@
-import { AnimatedSubscribeButton } from "@/components/magicui/animated-subscribe-button"
+import { AnimatedSubscribeButton } from "@/components/magicui/animated-subscribe-button";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
 
-export default function AnimatedSubscribeButtonExample() {
+export function AnimatedSubscribeButtonDemo() {
   return (
-    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-10 bg-black/95 p-10">
-      <AnimatedSubscribeButton 
-        className="bg-blue-500 px-8 py-4 text-xl font-bold text-white"
-        onClick={() => alert("Subscribed!")}
-      >
-        Subscribe Now
-      </AnimatedSubscribeButton>
-      
-      <AnimatedSubscribeButton 
-        className="bg-purple-500 px-8 py-4 text-xl font-bold text-white"
-        onClick={() => alert("Joined!")}
-      >
-        Join Us
-      </AnimatedSubscribeButton>
-    </div>
-  )
-} 
+    <AnimatedSubscribeButton className="w-36">
+      <span className="group inline-flex items-center">
+        Follow
+        <ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" />
+      </span>
+      <span className="group inline-flex items-center">
+        <CheckIcon className="mr-2 size-4" />
+        Subscribed
+      </span>
+    </AnimatedSubscribeButton>
+  );
+}

src/components/magicui/example/box-reveal-example.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@/components/ui/button";
+import { BoxReveal } from "@/components/magicui/box-reveal";
+
+export function BoxRevealDemo() {
+  return (
+    <div className="size-full max-w-lg items-center justify-center overflow-hidden pt-8">
+      <BoxReveal boxColor={"#5046e6"} duration={0.5}>
+        <p className="text-[3.5rem] font-semibold">
+          Magic UI<span className="text-[#5046e6]">.</span>
+        </p>
+      </BoxReveal>
+
+      <BoxReveal boxColor={"#5046e6"} duration={0.5}>
+        <h2 className="mt-[.5rem] text-[1rem]">
+          UI library for{" "}
+          <span className="text-[#5046e6]">Design Engineers</span>
+        </h2>
+      </BoxReveal>
+
+      <BoxReveal boxColor={"#5046e6"} duration={0.5}>
+        <div className="mt-6">
+          <p>
+            -&gt; 20+ free and open-source animated components built with
+            <span className="font-semibold text-[#5046e6]">React</span>,
+            <span className="font-semibold text-[#5046e6]">Typescript</span>,
+            <span className="font-semibold text-[#5046e6]">Tailwind CSS</span>,
+            and
+            <span className="font-semibold text-[#5046e6]">Motion</span>
+            . <br />
+            -&gt; 100% open-source, and customizable. <br />
+          </p>
+        </div>
+      </BoxReveal>
+
+      <BoxReveal boxColor={"#5046e6"} duration={0.5}>
+        <Button className="mt-[1.6rem] bg-[#5046e6]">Explore</Button>
+      </BoxReveal>
+    </div>
+  );
+}

src/components/magicui/example/flip-text-example.tsx

@@ -0,0 +1,9 @@
+import { FlipText } from "@/components/magicui/flip-text";
+
+export function FlipTextDemo() {
+  return (
+    <FlipText className="text-4xl font-bold -tracking-widest text-black dark:text-white md:text-7xl md:leading-[5rem]">
+      Flip Text
+    </FlipText>
+  );
+}

src/components/magicui/example/hyper-text-example.tsx

@@ -1,23 +1,5 @@
-import { HyperText } from "@/components/magicui/hyper-text"
+import { HyperText } from "@/components/magicui/hyper-text";
 
-export default function HyperTextExample() {
-  return (
-    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-10 bg-black/95 p-10">
-      <HyperText
-        className="text-4xl font-bold text-white"
-        duration={800}
-        animateOnHover={true}
-      >
-        Hover over me
-      </HyperText>
-      <HyperText
-        className="text-4xl font-bold text-white"
-        duration={1200}
-        delay={200}
-        animateOnHover={true}
-      >
-        Another example
-      </HyperText>
-    </div>
-  )
-} 
+export function HyperTextDemo() {
+  return <HyperText>Hover Me!</HyperText>;
+}

src/components/magicui/example/interactive-hover-button-example.tsx

@@ -1,18 +1,5 @@
-import { InteractiveHoverButton } from "@/components/magicui/interactive-hover-button"
+import { InteractiveHoverButton } from "@/components/magicui/interactive-hover-button";
 
-export default function InteractiveHoverButtonExample() {
-  return (
-    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-10 bg-black/95 p-10">
-      <InteractiveHoverButton className="bg-blue-500 px-8 py-4 text-xl font-bold text-white">
-        Hover Me
-      </InteractiveHoverButton>
-      
-      <InteractiveHoverButton 
-        className="bg-purple-500 px-8 py-4 text-xl font-bold text-white"
-        onClick={() => alert("Clicked!")}
-      >
-        Interactive Button
-      </InteractiveHoverButton>
-    </div>
-  )
-} 
+export function InteractiveHoverButtonDemo() {
+  return <InteractiveHoverButton>Hover Me</InteractiveHoverButton>;
+}

src/components/magicui/example/morphing-text-example.tsx

@@ -0,0 +1,17 @@
+import { MorphingText } from "@/components/magicui/morphing-text";
+
+const texts = [
+  "Hello",
+  "Morphing",
+  "Text",
+  "Animation",
+  "React",
+  "Component",
+  "Smooth",
+  "Transition",
+  "Engaging",
+];
+
+export function MorphingTextDemo() {
+  return <MorphingText texts={texts} />;
+}

src/components/magicui/example/number-ticker-example.tsx

@@ -1,21 +1,10 @@
-import { NumberTicker } from "@/components/magicui/number-ticker"
+import { NumberTicker } from "@/components/magicui/number-ticker";
 
-export default function NumberTickerExample() {
+export function NumberTickerDemo() {
   return (
-    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-10 bg-black/95 p-10">
-      <NumberTicker 
-        className="text-6xl font-bold text-white"
-        value={1234}
-        direction="up"
-      />
-      
-      <NumberTicker 
-        className="text-4xl font-bold text-white"
-        value={9876}
-        direction="down"
-        delay={0.5}
-        decimalPlaces={2}
-      />
-    </div>
-  )
-} 
+    <NumberTicker
+      value={100}
+      className="whitespace-pre-wrap text-8xl font-medium tracking-tighter text-black dark:text-white"
+    />
+  );
+}

src/components/magicui/example/pulsating-button-example.tsx

@@ -1,18 +1,5 @@
-import { PulsatingButton } from "@/components/magicui/pulsating-button"
+import { PulsatingButton } from "@/components/magicui/pulsating-button";
 
-export default function PulsatingButtonExample() {
-  return (
-    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-10 bg-black/95 p-10">
-      <PulsatingButton className="bg-blue-500 px-8 py-4 text-xl font-bold text-white">
-        Pulsating Button
-      </PulsatingButton>
-      
-      <PulsatingButton 
-        className="bg-purple-500 px-8 py-4 text-xl font-bold text-white"
-        onClick={() => alert("Clicked!")}
-      >
-        Click Me
-      </PulsatingButton>
-    </div>
-  )
-} 
+export function PulsatingButtonDemo() {
+  return <PulsatingButton>Join Affiliate Program</PulsatingButton>;
+}

src/components/magicui/example/rainbow-button-example.tsx

@@ -1,17 +1,5 @@
-import { RainbowButton } from "@/components/magicui/rainbow-button"
+import { RainbowButton } from "@/components/magicui/rainbow-button";
 
-export default function RainbowButtonExample() {
-  return (
-    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-10 bg-black/95 p-10">
-      <RainbowButton className="px-8 py-4 text-xl font-bold">
-        Rainbow Button
-      </RainbowButton>
-      
-      <RainbowButton 
-        className="px-8 py-4 text-xl font-bold"
-      >
-        Another Rainbow
-      </RainbowButton>
-    </div>
-  )
-} 
+export function RainbowButtonDemo() {
+  return <RainbowButton>Get Unlimited Access</RainbowButton>;
+}

src/components/magicui/example/ripple-button-example.tsx

@@ -1,18 +1,5 @@
-import { RippleButton } from "@/components/magicui/ripple-button"
+import { RippleButton } from "@/components/magicui/ripple-button";
 
-export default function RippleButtonExample() {
-  return (
-    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-10 bg-black/95 p-10">
-      <RippleButton className="bg-blue-500 px-8 py-4 text-xl font-bold text-white">
-        Click Me
-      </RippleButton>
-      
-      <RippleButton 
-        className="bg-purple-500 px-8 py-4 text-xl font-bold text-white"
-        rippleColor="rgba(255, 255, 255, 0.4)"
-      >
-        Custom Ripple
-      </RippleButton>
-    </div>
-  )
-} 
+export function RippleButtonDemo() {
+  return <RippleButton rippleColor="#ADD8E6">Click me</RippleButton>;
+}

src/components/magicui/example/scroll-based-velocity.tsx

@@ -0,0 +1,11 @@
+import { VelocityScroll } from "@/components/magicui/scroll-based-velocity";
+
+export function ScrollBasedVelocityDemo() {
+  return (
+    <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
+      <VelocityScroll>Velocity Scroll</VelocityScroll>
+      <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background"></div>
+      <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background"></div>
+    </div>
+  );
+}

src/components/magicui/example/shimmer-button-example.tsx

@@ -1,19 +1,11 @@
-import { ShimmerButton } from "@/components/magicui/shimmer-button"
+import { ShimmerButton } from "@/components/magicui/shimmer-button";
 
-export default function ShimmerButtonExample() {
+export function ShimmerButtonDemo() {
   return (
-    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-10 bg-black/95 p-10">
-      <ShimmerButton className="px-8 py-4 text-xl font-bold">
+    <ShimmerButton className="shadow-2xl">
+      <span className="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white dark:from-white dark:to-slate-900/10 lg:text-lg">
         Shimmer Button
-      </ShimmerButton>
-      
-      <ShimmerButton 
-        className="px-8 py-4 text-xl font-bold"
-        shimmerColor="rgba(255, 255, 255, 0.2)"
-        shimmerSize="lg"
-      >
-        Custom Shimmer
-      </ShimmerButton>
-    </div>
-  )
-} 
+      </span>
+    </ShimmerButton>
+  );
+}

src/components/magicui/example/shiny-button-example.tsx

@@ -1,19 +1,5 @@
-import { ShinyButton } from "@/components/magicui/shiny-button"
+import { ShinyButton } from "@/components/magicui/shiny-button";
 
-export default function ShinyButtonExample() {
-  return (
-    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-10 bg-black/95 p-10">
-      <ShinyButton className="bg-blue-500 px-8 py-4 text-xl font-bold text-white">
-        Shiny Button
-      </ShinyButton>
-      
-      <ShinyButton 
-        className="bg-purple-500 px-8 py-4 text-xl font-bold text-white"
-        animate={{ "--x": "-200%" }}
-        transition={{ duration: 2 }}
-      >
-        Custom Animation
-      </ShinyButton>
-    </div>
-  )
-} 
+export function ShinyButtonDemo() {
+  return <ShinyButton>Shiny Button</ShinyButton>;
+}

src/components/magicui/example/sparkles-text-example.tsx

@@ -1,19 +1,5 @@
-import { SparklesText } from "@/components/magicui/sparkles-text"
+import { SparklesText } from "@/components/magicui/sparkles-text";
 
-export default function SparklesTextExample() {
-  return (
-    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-10 bg-black/95 p-10">
-      <SparklesText className="text-4xl font-bold text-white">
-        ✨ Sparkly Text ✨
-      </SparklesText>
-      
-      <SparklesText 
-        className="text-3xl font-bold text-white"
-        colors={{ first: "#FFA07A", second: "#87CEEB" }}
-        sparklesCount={15}
-      >
-        Custom Sparkles
-      </SparklesText>
-    </div>
-  )
-} 
+export function SparklesTextDemo() {
+  return <SparklesText>Magic UI</SparklesText>;
+}

src/components/magicui/example/typing-animation-example.tsx

@@ -0,0 +1,5 @@
+import { TypingAnimation } from "@/components/magicui/typing-animation";
+
+export function TypingAnimationDemo() {
+  return <TypingAnimation>Typing Animation</TypingAnimation>;
+}

src/components/magicui/example/word-rotate-example.tsx

@@ -0,0 +1,10 @@
+import { WordRotate } from "@/components/magicui/word-rotate";
+
+export function WordRotateDemo() {
+  return (
+    <WordRotate
+      className="text-4xl font-bold text-black dark:text-white"
+      words={["Word", "Rotate"]}
+    />
+  );
+}