Hanging Bag

Pastel project bags on wire hangers ride a chrome elliptical rail — auto-rotate, wheel to spin, orbit to inspect. Built with @react-three/fiber, drei, and a Vignette pass. Needs a GPU; Chromium is recommended.

Default

Scroll to spin the rack, drag to orbit, Ctrl+scroll to zoom. Heavy WebGL — Chromium recommended; HDR Environment loads from the network.

Loading…

Installation

CLI

npx @sonojs/ui@latest add hanging-bag

Also needs

npm i @react-three/drei @react-three/fiber @react-three/postprocessing @types/three postprocessing three

Usage

page.tsx

"use client"

import { HangingBag } from "@/components/3d/hanging-bag"

export default function Page() {
  return <HangingBag height="min(100vh, 640px)" />
}

Props

Prop	Type	Default	Description
items	HangingBagItem[]	DEFAULT_HANGING_BAG_ITEMS	Project bags on the rack, in order around the ellipse.
height	number · string	"min(100vh, 640px)"	Stage height (CSS length or px number).
className	string	-	Class names on the stage wrapper.
showHint	boolean	true	Orbit / scroll hint strip in the corner.