Dynamic Ripple Demo

1import { DynamicRipple } from "../ui/dynamic-ripple";
2import { Button } from "../../components/ui/button";
3import { Badge } from "../../components/ui/badge";
4import { Droplets, Waves, Sparkles } from "lucide-react";
5 
6export function DynamicRippleDemo() {
7  return (
8    <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 gap-4 sm:gap-6 p-4 sm:p-6 w-full max-w-7xl mx-auto">
9      {/* Blue Theme Card */}
10      <DynamicRipple
11        theme="blue"
12        intensity={3}
13        speed={3}
14        className="p-4 sm:p-6 h-full border border-blue-200 dark:border-blue-800"
15      >
16        <div className="flex flex-col gap-3 sm:gap-4">
17          <div className="flex items-center justify-between flex-wrap gap-2">
18            <div className="flex items-center gap-2">
19              <Droplets className="w-4 h-4 sm:w-5 sm:h-5 text-blue-500" />
20              <h3 className="text-base sm:text-lg font-semibold">
21                Water Ripple Effect
22              </h3>
23            </div>
24            <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200 text-xs sm:text-sm">
25              Interactive
26            </Badge>
27          </div>
28          <p className="text-xs sm:text-sm text-gray-600 dark:text-gray-300">
29            Move your cursor over this card to create dynamic water ripple
30            effects. Perfect for creating engaging UI elements.
31          </p>
32          <div className="flex justify-end mt-1 sm:mt-2">
33            <Button
34              variant="outline"
35              size="sm"
36              className="text-blue-600 border-blue-200 hover:bg-blue-50 hover:text-blue-700 text-xs sm:text-sm"
37            >
38              Explore Effect
39            </Button>
40          </div>
41        </div>
42      </DynamicRipple>
43 
44      {/* Purple Theme Card */}
45      <DynamicRipple
46        theme="purple"
47        intensity={4}
48        speed={2}
49        className="p-4 sm:p-6 h-full border border-purple-200 dark:border-purple-800"
50      >
51        <div className="flex flex-col gap-3 sm:gap-4">
52          <div className="flex items-center justify-between flex-wrap gap-2">
53            <div className="flex items-center gap-2">
54              <Waves className="w-4 h-4 sm:w-5 sm:h-5 text-purple-500" />
55              <h3 className="text-base sm:text-lg font-semibold">
56                Cosmic Waves
57              </h3>
58            </div>
59            <Badge className="bg-purple-100 text-purple-800 hover:bg-purple-200 text-xs sm:text-sm">
60              High Intensity
61// … truncated