F1 Reaction Lights
The Formula 1 start test: five red lights, lights out, react. Jump starts are penalised. Share your time.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Saves your best time, rates you from 'Sunday driver' to 'F1 driver', and has a share button that turns a result into a link back to your site.
Installation
$ npm i @guetix/reaction-lights
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
Usage
example.tsx
import { ReactionLights } from "@/components/guetix/reaction-lights";
export default function Example() {
return <ReactionLights />;
}
Car brandsEvent standsGamified landing pages
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| storageKey | string | null | "gx-reaction-best" | Where the best time is saved. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Space / Enter play it; results are announced.