Skip to content
pagepalpagepal

Moods & priorities

pagepal has twelve moods. Each one has a face, a motion and sometimes an effect (confetti, a sweat drop, Zzz).

cheerForm submitted, back online, back after a while90
winkPoked, text copied, all required fields valid88
winceValidation error, failed request85
dizzyScrolling fast80
concernedRage clicks75
confusedDead click: nothing happened74
sadOffline70
shyPassword field focused65
waitingRequests in flight60
dozingUser idle40
sleepyDark mode20
neutralNothing going on0

Signals, not commands

Section titled “Signals, not commands”

Several things can be true at once: the user is offline, in dark mode, waiting on a request, and just hit a form error. So watchers never tell the pal what to show. Each one raises a signal under its own key:

  • A signal has a mood and, for short reactions, a duration. Lasting states (offline, waiting) hold until they’re cleared.
  • The pal shows the highest-priority active signal. Ties go to the most recent one.
  • When a signal ends, the next one takes over.

So a form error while offline shows a wince for 1.2 seconds, then goes back to sad. A cheer after a successful submit plays over “waiting”, then waiting returns if requests are still in flight.

cheer 90 > wink 88 > wince 85 > dizzy 80 > concerned 75 > confused 74
  > sad 70 > shy 65 > waiting 60 > dozing 40 > sleepy 20 > neutral 0

Changing priorities

Section titled “Changing priorities”

Pass priorities to override any of them. For example, to let “sleepy” (dark mode) outrank being offline:

createPal({ priorities: { sleepy: 75 } });

Durations

Section titled “Durations”

Short reactions expire on their own. Change how long they last with durations (milliseconds):

createPal({
  durations: { cheer: 1800, wince: 1200, dizzy: 1200, wink: 900, concerned: 1800, confused: 1600 },
});

Showing a mood yourself

Section titled “Showing a mood yourself”
pal.react('cheer');            // a transient mood uses its default duration
pal.react('sad', 5000);        // any mood, for 5 seconds
pal.react('shy', Infinity);    // hold until cleared
pal.react(null);               // clear it

react() uses a single “manual” signal: calling it again replaces the previous one. For several independent states, use signals.

Try it on this page’s pal:

The pal in the corner is pagepal itself.