Color die

A glossy 3D die with a color on every face. Click to throw it or drag to spin it; whichever face lands toward you is the pick. Three.js loads only when it nears the screen, and phones and reduced motion get a flat face instead.

Install

$ npx shadcn@latest add https://savi.fyi/r/color-die.json

Use it

import { ColorDie } from "@/components/color-die";
 
export function Picker() {
  return (
    <ColorDie
      colors={["#ff4a1c", "#526cff", "#3bff7a"]}
      onChange={(face) => console.log("Landed on", face)}
      className="w-64"
    />
  );
}

Props

colors: string[]; Six colors, one per face. Fewer repeat.
value: number; The face showing, 0 to 5. Set it to throw the die from outside.
onChange: (face: number) => void; Called with the face it lands on.
defaultValue: number; The starting face when you don't pass value.
label: string; What screen readers hear.
className: string; Size it here. Without one it fills its container.

On this site

Recolor everything, on the homepage →