clawd-react

The ClawdGotchi mascot (Clawd) as a reusable React component. Drop it into any React project, Remotion video, or frontend design.

Install

npm install clawd-react

Peer dependencies: react >=18, framer-motion >=11

Usage

Basic

import { Clawd } from 'clawd-react'

function App() {
  return <Clawd mood="happy" />
}

With accessories

import { Clawd, ACCESSORY_NAMES } from 'clawd-react'

// accessoryId 0-9 maps to: Badge, Bow, Bandana, Star, Flower, Leaf, Heart, Ribbon, Blush, Antenna
<Clawd mood="okay" scale={1.4} accessoryId={3} />

Egg stage

import { EggCreature } from 'clawd-react'

<EggCreature mood="happy" />

Effects standalone

import { Sparkle, HeartBurst, SleepingZs, SweatDrop } from 'clawd-react'

In Remotion

import { Clawd } from 'clawd-react'

export const ClawdScene: React.FC = () => {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
      <Clawd mood="happy" scale={3} accessoryId={1} />
    </div>
  )
}

Props

<Clawd>

| Prop | Type | Default | Description | |------|------|---------|-------------| | mood | 'happy' \| 'okay' \| 'sad' \| 'sick' \| 'sleeping' | — | Required. Controls expression and animation | | scale | number | 1 | Size multiplier | | accessoryId | number | — | Accessory index (0-9) | | className | string | — | CSS class for the wrapper | | style | CSSProperties | — | Inline styles for the wrapper |

<EggCreature>

| Prop | Type | Default | Description | |------|------|---------|-------------| | mood | Mood | — | Required. Controls animation style | | className | string | — | CSS class for the wrapper | | style | CSSProperties | — | Inline styles for the wrapper |

Accessories

10 built-in accessories, accessed by index:

| ID | Name | Component | |----|------|-----------| | 0 | Badge | ColorBadge | | 1 | Bow | TinyBow | | 2 | Bandana | Bandana | | 3 | Star | StarMark | | 4 | Flower | FlowerMark | | 5 | Leaf | LeafMark | | 6 | Heart | HeartMark | | 7 | Ribbon | Ribbon | | 8 | Blush | BlushMarks | | 9 | Antenna | Antenna |

Types

type Mood = 'happy' | 'okay' | 'sad' | 'sick' | 'sleeping'
type Stage = 'egg' | 'baby' | 'child' | 'adult'
type AccessoryId = number

Disclaimer

The Clawd character design is the property of Anthropic. This package is a community project and is not officially affiliated with or endorsed by Anthropic.

License

MIT