Design with emotion, fluid motion, & adaptive shapes.
Production-ready React 19 component ecosystem powered by Tailwind CSS v4 and Framer Motion spring physics. Crafted for spatial, tactile, and expressive web applications.
Tactile components that react to human touch
Experience fluid shape shifting, connected action menus, and adaptive waveforms designed to deliver immediate emotional feedback.
Split buttons leverage expressive shape and spring motion strategies to visually cluster related operations.
Hover or tap the cards above to feel physics-based spring border-radius morphing.
35 Organic Shapes with Built-in Morphing
Material Design 3 introduces 35 expressive polygonal shapes. Smoothly interpolate between any two shapes using our GPU-accelerated SVG & clip-path engine.
Choose Shapes to Morph
Click a shape to set as the starting shape, or hover to preview instant transition.
<ShapeMedia> and <ShapeSvg>Emotion-Driven Spring Dynamics
Material Design 3 replaces static cubic-bezier curves with physics-based spring tokens. Compare standard damping with expressive playful bounce.
Active Motion Scheme
Switch schemes and interact with the elements below
Tap to Test Spring
Triggered 0 times
Drag & Release
Elastic rebound with spring physics
- Motion TokenFAST_SPATIAL
- Damping Ratio0.60 (Playful)
- Stiffness700f
- Damping Constant12 (Elastic)
Bring tactile expression to your React apps
Tree-shakeable subpath architecture, zero-runtime Tailwind v4 styling, and physics-calibrated animations.
pnpm add @bug-on/m3-expressive
import { MD3ThemeProvider } from "@bug-on/m3-expressive/core";
import { Button, SplitButton } from "@bug-on/m3-expressive/buttons";
import { ShapeSvg } from "@bug-on/m3-expressive/shapes";
export default function App() {
return (
<MD3ThemeProvider variant="expressive">
<Button size="lg">Hello M3 Expressive</Button>
</MD3ThemeProvider>
);
}