mood-blobs — Expressive SVG blobs for React

Usage

Import and render any mood anywhere in your React app.

import { MoodBlob } from 'mood-blobs';

// Minimal — default size (m) and mood color
<MoodBlob mood="happy" />

// With size and custom color
<MoodBlob mood="angry" size="l" />
<MoodBlob mood="sad" color="#74B9FF" />

// With click handler — triggers the built-in animation
<MoodBlob
  mood="excited"
  size="xl"
  onClick={() => console.log('blob clicked!')}
/>

All Moods

10 hand-crafted blobs — click any to see its animation.

happy

sad

angry

surprised

nervous

cool

love

disgusted

sleepy

excited

API

All props accepted by <MoodBlob>.

Prop	Type	Default	Description
`mood`	`Mood`	—	Required. The emotional expression to render.
`size`	`Size`	`"m"`	`"xs"` 80 px · `"s"` 120 px · `"m"` 160 px · `"l"` 220 px · `"xl"` 300 px
`color`	`string`	mood default	Any valid CSS color. Falls back to each mood's built-in color.
`className`	`string`	—	Extra CSS class on the root `<svg>`.
`style`	`CSSProperties`	—	Inline styles on the root `<svg>`.
`onClick`	`MouseEventHandler`	—	Click handler. Each mood plays its own built-in animation on click.

TypeScript types

type Mood =
  | 'happy' | 'sad'      | 'angry'    | 'surprised'
  | 'nervous' | 'cool'   | 'love'     | 'disgusted'
  | 'sleepy' | 'excited';

type Size = 'xs' | 's' | 'm' | 'l' | 'xl';