Interaction / component

Bot Avatar

Eighteen expressive companions with full plush fibres, five materials, real pose and accessories across solo, roster and conversation scenes.

Example

Preparing preview…

Make it yours

Preset

Shape

Face

State

Size px

Theme

Auto follows the preview background.

Custom body color

Custom face ink

Custom tone

Material

Depth

Roundness

Shadow

Highlight

Key light °

Rim

Spread

Fur length

Fur density

Fur fuzz

Fur clumps

Fur curl

Fur gravity

Back light °

Light front °

Fibre shine

Satin sheen

Back light softness

Hat

Glasses

Headphones

Bow tie

Accessory color

Pointer play

Speed

Idle turn

Seed

Hold pose

Whirl

Whirl size

Whirl width

Whirl length

Whirl tilt

Jump height

Jump time s

Jump stretch

Jump turns

Jump lean °

Idle jump interval s

Landing offset s

Landing squash

Squash time s

Squash easing

Ground time s

Ground easing

Rise time s

Rise easing

Click squash time s

Take it with you.

SOURCE ACCESS

Preview freely. Unlock the files.

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Component notes

All eighteen source shapes and five materials retain the full shape, simulation, face, fibre and accessory renderers. Omitted primitive shading stays plastic; the Plush signature scene chooses fabric explicitly.
Solo, Roster and Conversation are portable complete scenes. Roster contains three active canvases at most, with independent seeds and a native Rest/Wake action. Selector previews are static.
Primitive, Complete, Controlled and Advanced source include full materials, helpers, MIT notice, scoped CSS and OFL Geist fonts. Legacy Demo.tsx and primitive imports remain available.
Live controls and exported primitive/Complete usage agree, including conditional body color, face ink, tone, fur and held pose. Material switching keeps your current lighting; Plastic night shift applies the original non-fabric lighting defaults.
Paused state changes settle to the actual new pose. Reduced motion preserves held pose and native controls. Material jobs are shared through active consumer leases and cancelled after the last requester leaves; frames, idle callbacks, listeners, observers and custom-outline cache retention are bounded.
Controlled source owns state and orientation; Advanced source uses an original pillow outline and tuned jump. Conversation computes word counts and Unicode initials locally; no agent service, recording, reference images or paid Studio recipes are bundled.

React 19.2Modern browsers

Libraries.dev — Jakub Antalik · MIT. See bundled notice.

Geist and Geist Mono — Vercel, Inc. · SIL Open Font License 1.1; bundled assets and full notice.

Props

Prop	Type	Default	Description
`type`	"clover" \| "flower" \| "triangle" \| "square" \| "blob" \| "ghost" \| "circle" \| "drop" \| "star" \| "droid" \| "mech" \| "alien" \| "hexagon" \| "cat" \| "cloud" \| "pill" \| "pebble" \| "puddle"	`"clover"`	Shape. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`face`	"eyes" \| "mouth"	`"eyes"`	Face. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`state`	"default" \| "working" \| "sleeping"	`"default"`	State. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`size`	number	`64`	Size. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`color`	string	`undefined (shape palette)`	Body color. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`ink`	string	`undefined (automatic contrast)`	Face ink. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`brightness`	number	`1 (fabric uses shape tuning)`	Brightness. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`saturation`	number	`1.5 (fabric uses shape tuning)`	Saturation. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`shading`	"plastic" \| "crisp" \| "smooth" \| "flat" \| "fabric"	`"plastic"`	Material. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`depth`	number	`0.65`	Depth. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`roundness`	number	`1`	Roundness. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`shadow`	number	`0.35 (fabric: 1.15)`	Shadow. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`highlight`	number	`1.3 (fabric: 1.45)`	Highlight. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`light`	number	`265 (fabric: 295)`	Key light. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`rim`	number	`0.5 (fabric: 0.6)`	Rim. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`spread`	number	`1.55 (fabric: 1.6)`	Spread. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`furLength`	number	`1`	Fur length. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`furDensity`	number	`1.6`	Fur density. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`furFuzz`	number	`0.9`	Fur fuzz. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`furClumps`	number	`0.4`	Fur clumps. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`furCurl`	number	`0.7`	Fur curl. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`furGravity`	number	`0.9`	Fur gravity. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`backLight`	number	`undefined (opposite studio key)`	Back light. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`lightFront`	number	`32`	Light front. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`shine`	number	`0`	Fibre shine. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`sheen`	number	`0`	Satin sheen. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`backSoftness`	number	`1`	Back light softness. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`hat`	"none" \| "beret" \| "beanie" \| "party" \| "crown"	`"none"`	Hat. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`glasses`	"none" \| "round" \| "square" \| "shades"	`"none"`	Glasses. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`headphones`	boolean	`false`	Headphones. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`bowTie`	boolean	`false`	Bow tie. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`accessoryColor`	string	`"#27272b"`	Accessory color. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`speed`	number	`1`	Speed. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`turn`	number	`1`	Idle turn. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`whirl`	number	`0`	Whirl. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`whirlSize`	number	`1`	Whirl size. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`whirlWidth`	number	`1`	Whirl width. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`whirlLength`	number	`1`	Whirl length. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`whirlTilt`	number	`1`	Whirl tilt. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpHeight`	number	`26`	Jump height. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpTime`	number	`0.68`	Jump time. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpStretch`	number	`1`	Jump stretch. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpSpin`	number	`1`	Jump turns. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpLean`	number	`6`	Jump lean. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpEvery`	number	`8`	Idle jump interval. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpLand`	number	`0`	Landing offset. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpSquash`	number	`1.15`	Landing squash. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpSquashTime`	number	`0.37`	Squash time. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpSquashEase`	"sharp" \| "pulse" \| "soft" \| "bouncy"	`"pulse"`	Squash easing. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpGroundTime`	number	`0.11`	Ground time. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpGroundEase`	"sharp" \| "pulse" \| "soft" \| "bouncy"	`"pulse"`	Ground easing. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpRiseTime`	number	`0.33`	Rise time. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpRiseEase`	"sharp" \| "pulse" \| "soft" \| "bouncy"	`"pulse"`	Rise easing. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`jumpClickSquashTime`	number	`0.24`	Click squash time. Primitive input. Complete scenes supply live values; full contracts are documented in types.ts.
`interactive`	boolean	`true`	Enable pointer gaze and keyboard/click reactions.
`theme`	'auto' \| 'dark' \| 'light'	`'auto'`	Background-aware material lighting.
`seed`	number	`undefined (instance-derived)`	Optional stable seed in 0–1 for repeatable character movement.
`paused`	boolean	`false`	Freeze decorative motion; content remains usable.
`replayToken`	number	`0`	Change to restart the effect.
`pose`	{ yaw?: number; pitch?: number; roll?: number }	`undefined`	Caller-owned finite held orientation in radians; preserved under reduced motion.
`path`	string	`undefined`	Caller-owned valid SVG outline in the original 100×100 body space; replaces shape and its parts.
`className`	string	`undefined`	Additional host class.
`style`	CSSProperties	`undefined`	Caller-owned host styling; retain overscan for full motion.