morphinui

The shared reduced-motion policy and motion tokens used by every Morphin animation.

The interface-sound policy every Morphin component follows: SoundProvider, useSound and the cue queue. Silent until a provider turns it on; loads no audio by itself.

Plays Morphin's interface sounds with Cuelume (MIT): fourteen cues synthesized live with Web Audio, no audio files.

The extra tokens Morphin components need on top of a shadcn theme: hover and pressed states derived from your colors, a third text level, status colors (and softer success and failure colors for light surfaces), the brand color, disabled states, the corner shape and the menu shadow. Existing values are never overwritten.

The Morphin palette for light and dark mode: warm neutrals and blue focus rings. Hover, pressed and brand colors come from @morphin/tokens.

The Morphin type scale on the standard Tailwind sizes (text-2xs to text-6xl): sizes, line heights and letter spacing. Pair with font-medium for labels and headings.

Six variants, four sizes, icons, loading states and animated content changes.

A menu with a sliding highlight, checked items, submenus, segmented rows and icon chips.

A select built on Base UI Select, styled like the button and the dropdown: a form control with a sliding highlight, groups, icons and descriptions.

Buttons joined into one control with a shared outline: filters, view switches and toolbars.

A main action and an arrow that opens a menu on hover or click, joined into one pill.

An inline text action that renders a link or a button, with underline on hover, sizes and icons.

A small pill for counts, statuses and labels, with neutral, primary, outline, brand and status variants, three sizes, a dot and icons.

A roomy pill for tags, statuses and filters: filled or outline, three sizes, a shimmering label, icons, and a toggle, button or link when it is given a handler, `selected` or an href. ChipGroup joins two into a pair.

A person or a team as an image with initials behind it, a status dot, and a group that overlaps avatars with a +N count.

A surface for grouped content with header, content, footer and media parts, filled or outlined, as a link or a button.

A compact card for a sidebar footer or a corner of the page: an icon, a title, a description, an action and a dismiss button, with an animated close.

A small 116 × 128 card that is one action: a preview tile (icon, image or video) with a label, as a link or a button, with an active state for filters and navigation.

An action card that opens into a menu in its own place: the card morphs into the popup, its title and icon travel into the header and the rows follow, all with GSAP.

Stacked notifications on Base UI Toast: loading, success and error states, hover to expand, swipe to dismiss, promise helper. The animated state effects (pulse, glow, shake, text morph) are in the Pro item toast-pro.