bonkersUI

A compiled/locked library of extreme, physics-based, animated React + TypeScript components. Every component is converted from Framer originals to plain React + CSS/rAF: no framer or framer-motion runtime dependency, SSR-safe, responsive (fluid layout + auto-scaling visuals), per-instance scoped identifiers, and keyboard/ARIA support.

This scaffold

This package currently contains four components:

• ConstellationAvatar — avatar framed by orbiting, twinkling stars.
• EmotionSlider — slider with a morphing sad→ecstatic face handle.
• LivingAvatar — avatar with a rotating gradient border and ripple.
• OrigamiButton — button whose paper panels fold/unfold with a confirm swap.

More components will be added to src/components/ and wired into src/components/index.ts as they are converted.

Install & use

import { EmotionSlider, LivingAvatar } from "bonkersui";

Only the component and its Props type are exported through the barrel. Sub-types (unions, item shapes) live in each component file by design.

Scripts

npm run typecheck   # tsc --noEmit, strict + verbatimModuleSyntax
npm run build       # emit dist/ with .d.ts declarations

Conventions

• Named export const <Name> with an exported <Name>Props interface.
• Controlled + uncontrolled patterns for stateful inputs.
• @keyframes, SVG filter/gradient ids, and clip-path ids are per-instance unique to avoid multi-instance collisions.
• prefers-reduced-motion respected throughout.

See COMPONENTS.md for per-component props, usage, and conversion notes.