mooditest

moodi · test

All six shapes, three ways to load.

Each row is one shape with its own color and mood, loaded as a React component, a Web Component or straight from a CDN. The badge turns green once the first 3D frame is on screen. The button in the top left toggles sound (the sound attribute); a few start with it on, but browsers only allow audio after your first click.

  • React componentimport { Moodi } from 'moodi/react'
  • Web Componentimport 'moodi' → <moodi-buddy>
  • CDN (esm.sh)https://esm.sh/moodi@0.2 → <moodi-cdn>

Tested as: React component

01 Ghost

The default shape. A wavy hem and a floating body: the classic little ghost.

Color
Iris #6c5ce7
Mood
Happy. Bounces with joy. Cheeks glow.
Source
import { Moodi } from 'moodi/react'
<Moodi shape="ghost" mood="happy" color="#6c5ce7" sound />
Loading…React component

Tested as: Web Component

02 Pebble

A flat, rounded pebble. Low and wide, it reads well at small sizes too.

Color
Peach #f2a07b
Mood
Thinking. Eyes drift up. Little thoughts pop.
Source
import 'moodi' → <moodi-buddy>
<moodi-buddy shape="pebble" mood="thinking" color="#f2a07b" sound="true"></moodi-buddy>
Loading…Web Component

Tested as: CDN (esm.sh)

03 Blob

A soft, round blob. The friendliest shape, great for loading states.

Color
Sage #8fb996
Mood
Loading. Half-lidded, wobbling patiently.
Source
https://esm.sh/moodi@0.2 → <moodi-cdn>
<moodi-cdn shape="blob" mood="loading" color="#8fb996" sound="true"></moodi-cdn>
Loading…CDN (esm.sh)

Tested as: React component

04 Drop

A droplet with a pointed top. Fits watching and listening states.

Color
Sky #8ec5e8
Mood
Listening. All eyes. Nods along to every word.
Source
import { Moodi } from 'moodi/react'
<Moodi shape="drop" mood="listening" color="#8ec5e8" />
Loading…React component

Tested as: Web Component

05 Bean

A tall, narrow bean. For vertical spots, a sidebar or next to a chat.

Color
Butter #f3d36b
Mood
Love. Heart eyes, floating on air.
Source
import 'moodi' → <moodi-buddy>
<moodi-buddy shape="bean" mood="love" color="#f3d36b"></moodi-buddy>
Loading…Web Component

Tested as: CDN (esm.sh)

06 Cube

A rounded cube. The most technical shape, perfect for an AI assistant.

Color
Coral #f07167
Mood
Speaking. Chatty mouth, bouncing to the rhythm.
Source
https://esm.sh/moodi@0.2 → <moodi-cdn>
<moodi-cdn shape="cube" mood="speaking" color="#f07167"></moodi-cdn>
Loading…CDN (esm.sh)

New in 0.3: settle

07 Settle

Some moods keep moving: happy hops, error shakes, love floats with hearts. settle lets the mood play for a while, then the body calms down to gentle breathing while the face keeps its expression. Every new mood restarts the timer.

Mood
Settle
<Moodi mood="happy" settle={2000} />
without settle
settle=2000