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