v0.1.0 — Open Source

Your toolkit for
seamless AI interaction design .

Build and ship AI interactions in minutes. Easily install and integrate with React and Next.js using simple, developer-friendly components.

by Toffee studio

npm install @toffee.studio/ai-interaction-design @emotion/react

Effects

A moving gradient shimmer over text — ideal for AI thinking labels, loading states, and generative content previews.

Token-by-token text reveal that mimics ChatGPT and Claude streaming — with caret cursor and speed control.

Unified API

Every component shares variant, speed, tone, reducedMotion, and render slots.

Next.js Ready

ToffeeProvider handles Emotion SSR with useServerInsertedHTML — zero FOUC.

Accessible

Respects prefers-reduced-motion by default. Override per-component or globally.

Design Tokens

Speed, tone, and easing tokens keep animations consistent across your app.

Render Slots

before, after, and overlay slots give you full control without forking.

Tree-Shakeable

Dual ESM + CJS builds. Server-safe index, client-only components.