fragms
Studio

Little agents with a face. Give one a shape, a colour and a mood, and it listens, thinks, talks and naps like it means it. Poke one.

Simmy

Shape

Colour

Mood

Energy1.00

NeedsReactTheme

Source
curl --create-dirs -o src/components/points.tsx https://fragms.simonveprek.cz/source/points -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme

Saves src/components/points.tsx and theme.tsx beside it. No setup, works in any React project.

import { Point } from "@/components/points";// Simmy, as set up above<Point shape="flower" color="#3d7bff" mood="listening" />
shape

The outline. Changing it morphs from one to the other.

circlepebblesquirclecookiecloverflowersunnygumdropstarheart
color

Any CSS colour. Left out, it takes the text colour.

currentColor#ff6a3dany colour
mood

What it is doing. Map your AI's state to one of these.

idlelisteningthinkingtalkinghappysurprisedsleepysadreadingcuriousexcitedwinkloveconfusedangrydizzy
look

Where the eyes go. A direction runs from -1 to 1 on each axis.

pointeraround[x, y]
energy

How lively it is, from calm to a lot.

012
level

Loudness while talking. Pass a function to have it read every frame.

0 to 1() => numberDefault its own rhythm
size

Width in pixels. You can also set --point-size in CSS.

numberDefault 120

What's new

  1. 2.0
    • Takes the Theme's accent when it has no colour of its own
  2. 1.1
    • Eight new moods, reading, curious, excited, wink, love, confused, angry and dizzy
    • Tilts, winks, hearts and a shine to go with them
  3. 1.0
    • First release
BeforeAuraNextGhost