Bucket

An interactive card component that simulates a bucket where chips are tossed and replaced with smooth physics-inspired animations.

byUrvish Mali from Uselayouts

Installation

terminal

pnpm dlx layro-cli add @iurvish/bucket

npx layro-cli add @iurvish/bucket

npx layro-cli add @iurvish/bucket

bunx layro-cli add @iurvish/bucket

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";
import { AnimatePresence, motion } from "motion/react";
import React, { useEffect, useState } from "react";
import { Sparkles, ShieldCheck, Zap, Users } from "lucide-react";
import {
  SecurityCheckIcon,
  ZapIcon,
  UserStoryIcon,
  SparklesIcon,
} from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { useIsMobile } from "@/hooks/use-mobile";
const INITIAL_CHIPS = [
  {