feat: update BoxRevealProps to accept React.ReactNode and add multiple example components for animated text, buttons, and effects to Magicui

src/components/magicui/box-reveal.tsx

@@ -4,7 +4,7 @@ import { motion, useAnimation, useInView } from "motion/react";
 import { useEffect, useRef } from "react";
 
 interface BoxRevealProps {
-  children: JSX.Element;
+  children: React.ReactNode;
   width?: "fit-content" | "100%";
   boxColor?: string;
   duration?: number;

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

@@ -0,0 +1,20 @@
+import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text"
+
+export default function AnimatedGradientTextExample() {
+  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
+      </AnimatedGradientText>
+    </div>
+  )
+} 

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

@@ -0,0 +1,18 @@
+import { AnimatedShinyText } from "@/components/magicui/animated-shiny-text"
+
+export default function AnimatedShinyTextExample() {
+  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}
+      >
+        Wide Shine
+      </AnimatedShinyText>
+    </div>
+  )
+} 

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

@@ -0,0 +1,21 @@
+import { AnimatedSubscribeButton } from "@/components/magicui/animated-subscribe-button"
+
+export default function AnimatedSubscribeButtonExample() {
+  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>
+  )
+} 

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

@@ -0,0 +1,23 @@
+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>
+  )
+} 

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

@@ -0,0 +1,18 @@
+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>
+  )
+} 

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

@@ -0,0 +1,21 @@
+import { NumberTicker } from "@/components/magicui/number-ticker"
+
+export default function NumberTickerExample() {
+  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>
+  )
+} 

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

@@ -0,0 +1,18 @@
+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>
+  )
+} 

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

@@ -0,0 +1,17 @@
+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>
+  )
+} 

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

@@ -0,0 +1,18 @@
+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>
+  )
+} 

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

@@ -0,0 +1,19 @@
+import { ShimmerButton } from "@/components/magicui/shimmer-button"
+
+export default function ShimmerButtonExample() {
+  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">
+        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>
+  )
+} 

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

@@ -0,0 +1,19 @@
+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>
+  )
+} 

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

@@ -0,0 +1,19 @@
+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>
+  )
+}