Bucket

Installation

npx shadcn@latest add "https://uselayouts.com/r/bucket.json"

npm install motion @hugeicons/react @hugeicons/core-free-icons

Usage

Customizing Data

You can customize the initial chips shown in the bucket by modifying the INITIAL_CHIPS array:

const INITIAL_CHIPS = [
  {
    id: 1,
    title: "Production Ready",
    description: "Fully type-safe and tested",
    icon: SecurityCheckIcon,
  },
  // ... add more items
];

Basic Implementation

import Bucket from "@/components/bucket";

export default function Page() {
  return (
    <div className="h-screen flex items-center justify-center">
      <Bucket />
    </div>
  );
}

Understanding the Logic

The Bucket component creates a sense of depth and physical interaction using a layered SVG approach and Framer Motion's exit animations.

1. The Layered "Glass" Effect

The "bucket" is not a single image, but a collection of SVG paths and foreignObject elements stacked on top of each other:

• Base Layer: Defines the back and bottom of the bucket with subtle gradients.
• Middle Layer: Where the active motion.div chip resides.
• Top Layer: A translucent front cover with heavy backdrop-blur. This makes the chips appear as if they are falling into a container.

2. The Toss Animation

The component uses AnimatePresence with mode="popLayout" to manage the lifecycle of the chips. Every 2 seconds (configurable in the useEffect interval), the first item is moved to the end of the array.

• Entry (initial): The chip starts high up with opacity: 0 and drops down.
• Exit (exit): The chip falls further down "out" of the bucket, creating a continuous tossing effect.

3. High-Fidelity Filters

The component makes extensive use of SVG filters for:

• Inner Shadows: Giving the container edges a rounded, 3D feel.
• Multi-stage Dropshadows: Providing soft, realistic shadows for complex shapes.
• Dynamic Blurs: The front face uses a high-radius blur to create a premium glassmorphism finish.

4. Responsive Adaptation

Using a custom useIsMobile hook, the component dynamically scales the chips and adjusts the vertical travel distance of the animations. This ensures the "toss" effect doesn't overlap with other page elements on small screens.

Features

• Continuous Tossing: Smooth, looping animation that keeps the user engaged.
• Layered Depth: True z-axis feel without using a 3D engine.
• Premium Aesthetics: Glassmorphism, tailored gradients, and high-spec icons.
• Performance Optimized: Uses CSS-accelerated SVG properties and motion values.
• Flexible Content: Easily swappable titles, descriptions, and icons.