Hue Hunt
A color-memory game for designers: memorise a color for 3 seconds, then rebuild it with HSL sliders.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Scored with perceptual color distance (OKLab ΔE) over five rounds. Surprisingly hard, very shareable.
Installation
$ npm i @guetix/hue-hunt
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
Usage
example.tsx
import { HueHunt } from "@/components/guetix/hue-hunt";
export default function Example() {
return <HueHunt />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| rounds | number | 5 | Rounds. |
| peek | number | 3 | Seconds to memorise. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Native range inputs with labels; scores announced.