Bucket

1"use client";
2import { AnimatePresence, motion } from "motion/react";
3import React, { useEffect, useState } from "react";
4import { Sparkles, ShieldCheck, Zap, Users } from "lucide-react";
5import {
6  SecurityCheckIcon,
7  ZapIcon,
8  UserStoryIcon,
9  SparklesIcon,
10} from "@hugeicons/core-free-icons";
11import { HugeiconsIcon } from "@hugeicons/react";
12import { useIsMobile } from "@/hooks/use-mobile";
13const INITIAL_CHIPS = [
14  {
15    id: 1,
16    title: "Production Ready",
17    description: "Fully type-safe and tested",
18    icon: SecurityCheckIcon,
19  },
20  {
21    id: 2,
22    title: "Fluid Motion",
23    description: "60fps optimizations built-in",
24    icon: ZapIcon,
25  },
26  {
27    id: 3,
28    title: "Accessible",
29    description: "Works perfectly for everyone",
30    icon: UserStoryIcon,
31  },
32  {
33    id: 4,
34    title: "Modern Design",
35    description: "Crafted for high-end feel",
36    icon: SparklesIcon,
37  },
38];
39 
40const Bucket = () => {
41  const [items, setItems] = useState(INITIAL_CHIPS);
42 
43  const isMobile = useIsMobile();
44  useEffect(() => {
45    const interval = setInterval(() => {
46      setItems((prev) => {
47        const [first, ...rest] = prev;
48        return [...rest, first];
49      });
50    }, 2000);
51 
52    return () => clearInterval(interval);
53  }, []);
54 
55  return (
56    <div className="flex flex-col gap-4 items-center justify-center h-fit relative w-full">
57      <div
58        className="relative isolate w-full max-w-[655px]"
59        style={{ aspectRatio: "655/352" }}
60      >
61        <svg
62          width="100%"
63          height="100%"
64          viewBox="0 0 655 352"
65          fill="none"
66          xmlns="http://www.w3.org/2000/svg"
67          className="absolute inset-0 z-0"
68        >
69          <foreignObject
70            x="443.561"
71            y="-10.5141"
72            width="211.24"
73            height="166.977"
74          >
75            <div
76              style={{
77                backdropFilter: "blur(11.03px)",
78                clipPath: "url(#bgblur_0_51_65_clip_path)",
79                height: "100%",
80                width: "100%",
81              }}
82            ></div>
83          </foreignObject>
84          <g
85            filter="url(#filter1_dddi_51_65)"
86            data-figma-bg-blur-radius="22.0545"
87          >
88            <path
89// … truncated