Unboxing Bucket

Live Interactive Stage

Interactive 3D unboxing container animation with emerging spring-physics feature chips powered by Motion (motion). Watch the sequence of feature chips float up from the package cavity, hover in 3D perspective, and dissolve upward.

Installation

$ pnpm add lucide-react motion

Usage

import { UnboxingBucket } from "@/components/unboxing-bucket"
;<UnboxingBucket intervalMs={2600} className="py-12" />

Technical Insights & Architecture

This component is constructed using a 3-layer sandwich visual architecture:

1. Layer 1 (Background SVGs): The open lid flaps, inside back wall, and interior shadow folds of the carton box.
2. Layer 2 (Middle Motion Stage): The animated floating chip managed by AnimatePresence mode="popLayout", starting tucked inside the box cavity, springing upward, and floating away.
3. Layer 3 (Foreground SVGs): The front carton body and dropped lip flap with pointer-events-none, naturally occluding the lower part of the chip as it emerges from inside the package.

API Reference

UnboxingBucket

Interactive 3D unboxing container animation with emerging spring-physics feature chips.

UnboxingChipItem

Data structure for an individual emerging chip item.