Impossible Checkbox

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/impossible-checkbox

import { ImpossibleCheckbox } from "mischief-ui/impossible-checkbox"

1"use client"2 3import * as React from "react"4import { motion, useAnimationControls, useReducedMotion } from "motion/react"5import { cn } from "@/lib/utils"6 7export interface ImpossibleCheckboxProps extends Omit<8  React.InputHTMLAttributes<HTMLInputElement>,9  "checked" | "defaultChecked" | "onChange" | "type"10> {11  onAttempt?: (attempt: number) => void12  revealAfter?: number13  angryAfter?: number14  className?: string

Usage

export function Demo() {
  return (
    <ImpossibleCheckbox
      aria-label="Enable bear mode"
      onAttempt={(attempt) => console.log({ attempt })}
    />
  )
}

Do not use this for anything that matters

This is a joke. A paw reaches out and unchecks the box, and it keeps doing it until you have tried enough times. It is genuinely funny once, and it is genuinely infuriating if it stands between someone and something they need.

So: never for consent, terms, permissions, a privacy choice, or anything a form submits. Anything a person must be able to set, they must be able to set on the first try. A 404 page, an easter egg, a demo, a settings toggle for something that does not exist -- those are where it belongs.

revealAfter and angryAfter decide how long the bit runs before it gives up and lets the box stay checked. Keep them low if there is any chance someone actually wanted the checkbox.

Following along

onAttempt fires with a running count each time someone tries, which is what you would build the rest of the joke around -- a line of copy that escalates, a sound, a message that gives in before the paw does.

<ImpossibleCheckbox
  angryAfter={3}
  revealAfter={5}
  onAttempt={(attempt) => setTaunt(taunts[attempt] ?? taunts.at(-1))}
/>

Motion is an optional peer and drives the whole performance. With reduced motion the animation collapses to nothing, so consider whether the joke still lands for that reader, and offer them the plain checkbox instead.

API

Accessibility

The control is a native checkbox and works with pointer, touch, and keyboard input. A polite live region explains that the bear switched it off. Reduced motion skips the swat sequence while keeping the result clear. Do not use it for consent, safety, or any setting a person genuinely needs to change.