aurbGet started

Show people your AI is thinking

Orbs that move differently when your product listens, thinks, works and speaks. A 4 KB player that never blocks a click.

Meet all 15 characters

Free player, MIT. Works in React, Vue, Svelte and plain HTML.

thinking

orb.state = "thinking"114 KB loop at 320px

Your agent works for thirty seconds. A spinner says nothing the whole time. aurb gives the wait a shape, so people can see what is happening.

Right now, this is all your user gets.

A spinner looks the same at second one and second thirty. It can’t say what’s happening, so people start to doubt, and many leave.

It hears you.

Sound arrives, and the rim answers. People know the mic is open before they say a word.

It thinks.

The surface goes quiet. Inside, it churns, and sparks when something lands.

It works.

A steady rhythm in one direction, so a long wait feels like progress, not a freeze.

It answers.

It swells as it talks and sends waves outward. The voice has somewhere to come from.

And when it's done, it says so.

Calm and green, then back to idle. One line of code per moment.

15 characters to choose from

Each has its own material and moves its own way in every state. Try any of them here. Every one is free.

aurora

Violet into cyan. Fluid, always folding.

aurora, thinking

Free forever, in commercial products too.

Built to never slow your app

Every character is a set of short video loops. The GPU plays them, so clicks and typing never wait.

How it works

Pick a character. Set a state. That's it.

Every character comes ready to use, one short loop per state. The page loads only the states it shows, from the edge nearest your visitor, and your code only says which state to show. The orb never competes with your app for a click.

Our libraryTheir screen
  1. Pick
  2. Load
  3. Set state
  4. Plays

Your code only flips a state.

  1. Pick a characterFrom our library

    15 characters, all of them free

    • Every state included
    • Light and dark
    • Commercial use too

  2. Add itOne attribute

    22 KB per state, at 160px

    • Only the states you use
    • Served from the nearest edge
    • Cached at the edge

  3. Set a stateOne line of code

    4 KB the whole player

    • React or HTML
    • Crossfades between states
    • Typed state names

  4. It playsOn their device

    0.4% of the main thread

    • Runs on the GPU
    • Sleeps offscreen
    • Save-Data gets a still

Measured

What it costs your app

aurb against the usual ways to build an orb, each drawing 120px orbs in Chrome. Lower is better in every column. 100% is one whole CPU core, marked on the CPU bars.

Against Rive, as AI Elements’ Persona ships it

  • 7×less CPU while it plays
  • 39×less work on the main thread
  • 29×smaller first load
ApproachOne orb playingtotal CPUTen orbs playingtotal CPUMain threadwhere clicks are handledFirst loaddownload for one orb
aurb9%36%0.4%36 KB
WebGL shader (three.js)35%63%4.6%130 KB
CSS gradients37%65%5.4%0.6 KB
Lottie48%92%10.1%78 KB
Rive (AI Elements Persona)64%183%15.7%1,044 KB

One orb playing total CPU

  • aurb9%
  • WebGL shader (three.js)35%
  • CSS gradients37%
  • Lottie48%
  • Rive (AI Elements Persona)64%

Ten orbs playing total CPU

  • aurb36%
  • WebGL shader (three.js)63%
  • CSS gradients65%
  • Lottie92%
  • Rive (AI Elements Persona)183%

Main thread where clicks are handled

  • aurb0.4%
  • WebGL shader (three.js)4.6%
  • CSS gradients5.4%
  • Lottie10.1%
  • Rive (AI Elements Persona)15.7%

First load download for one orb

  • aurb36 KB
  • WebGL shader (three.js)130 KB
  • CSS gradients0.6 KB
  • Lottie78 KB
  • Rive (AI Elements Persona)1,044 KB

Ten Rive orbs needed almost two whole cores, and dragged the page from 144 to 82 frames a second.

The CSS orb downloads almost nothing, but uses four times aurb’s CPU while it plays.

Chrome 156 on a Windows laptop, median of three runs. Rive is AI Elements’ Persona exactly as it ships; the CSS, three.js and Lottie orbs are typical builds of each. The screen ran at 144 Hz, so orbs drawn every frame would cost less at 60 Hz.

From a voice call to a 20px task list

One character, any size: sharp as a hero, nearly free as a 20px icon. Every character comes in light and dark.

AssistantSpeaking · 0:42
A voice call in a dark app. The orb is the one speaking.

Read the deploy log

Compare traces

Writing the fix

Run the tests

An agent’s task list. Only the running task moves.

Why is checkout slow this week?

Thinking…

Ask a follow-up
A chat thread. The orb sits where the reply will appear.

Add it in three steps

It's a standard web element, with a typed React component. State names are checked, so a typo is a compile error.

1 Install the player

2 Pick an orb

Every character is free. Copy the line under the big orb in Characters, or swap in another name. The player loads it from jsDelivr, a free public CDN, only the states you use, so there is nothing to host.

3 Set a state

import { Aurb } from "@aurb/player/react";

<Aurb
  orb="chalk"
  state={busy ? "thinking" : "idle"}
  prefetch="thinking"
  style={{ width: 120 }}
/>

Questions

Is it really free?

Yes. The player and every character are free, in commercial products too, with no attribution, no key, and no limit on traffic. What the licence doesn't allow is reselling the orbs themselves.

Where are the files?

On jsDelivr, a free public CDN, cached at the edge nearest each visitor, so there is nothing to host. To host them yourself, run npx @aurb/player download <name> and set orb to the URL of that folder instead.

Does it react to live audio or the mouse?

No. Loops are pre-rendered, which is why they're so light. The speaking state moves like a voice but doesn't follow your actual audio. If you need that, use a shader.

How much CPU does it really use?

About 0.4% of a core on the main thread, with no long tasks. In total, one playing orb used about 9% of a core in our tests, and ten used about 36%, so keep one or two moving and show the rest as posters. For comparison, one Rive orb from AI Elements used 64%, and ten used 183%: almost two whole cores.

Which browsers does it work in?

Any modern browser plays it: VP9 where supported, H.264 otherwise. We've tested Chrome on Windows. Safari and iOS aren't tested yet.

Every character is free.

In any product, forever. No key, no account.

See them all