A product detail where the bottle turns a full 360 degrees as you drag it, with view presets that rotate to front, side or back. Finish, size and a live laser engraving restyle the product as you type.
Kova · Drinkware
Double-wall steel that keeps water cold for 24 hours. Drag the bottle to turn it, then make it yours with a laser engraving.
Kova Everyday Bottle, 750 ml in Glacier, engraved MAYA. Ships in 3 days.
npx shadcn@latest add https://hyperblur.dev/r/shop-spin-configurator.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/shop-spin-configurator.tsx.
import { ShopSpinConfigurator } from "@/components/hyperblur/shop-spin-configurator"
<ShopSpinConfigurator onAddToCart={(c) => console.log(c)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Kova" | Brand printed on the bottle and above the name. |
| name | string | "Kova Everyday Bottle" | Product name. |
| blurb | string | "Double-wall steel that keeps water cold..." | Short description. |
| finishes | { name: string; color: string; stock: number }[] | 5 finishes, one sold out | Color swatches. Stock under 6 shows a low-stock note; 0 disables the swatch. |
| sizes | { label: string; price: number; height: number }[] | 500 ml, 750 ml, 1 L | Sizes with price and bottle height in drawing units (about 290 to 410). |
| engravingPrice | number | 8 | Extra charge when engraving is on. |
| maxEngraving | number | 12 | Maximum engraving characters. |
| currency | string | "$" | Currency symbol. |
| autoSpin | boolean | true | Turn slowly until the visitor interacts. |
| accent | string | "#f97316" | Accent for the add button, selection rings and dial marker. |
| onAddToCart | (config: { finish: string; size: string; engraving: string; total: number }) => void | Called when the product is added. |