Components

180 components for React and Tailwind, ready to copy or pull in with npx shadcn add @chocolate/…. Everything shares the same tokens, so it all fits together.

FoundationsColorTypography

Text

13Headline effects that read well and move well.

Moving highlight across text.

Counts to a value when it scrolls into view.

Drifting gradient fill for headings.

Types and deletes a list of words.

Scroll-linked paragraph whose words brighten one by one as you scroll.

Words or characters blur into focus with a stagger when in view.

Each character springs in from a chosen direction.

Rotating words that blur in letter by letter and flip away.

Text that decodes from random glyphs on mount, in view, or on hover.

Words slide vertically through a clipped window.

Marker-pen highlight that sweeps in behind text when in view.

Text surrounded by randomly twinkling sparkles.

Outlined text whose stroke is a gradient, optionally drifting.