Demos

Move the cursor around the page. The eyes follow it, blink, and the arms sway.

"use client"

import { PredictMascot } from "@workspace/ui/predict/predict-mascot"

export function MascotDemo() {
  return <PredictMascot />
}

Usage

Use the mascot to add character to empty states, onboarding, and success screens. Keep it to one per screen, and don't use it where the user is reading results.

Import it from @workspace/ui/predict/predict-mascot.

Anatomy

• Head — A circle in --primary.
• Eyes — Two rounded bars in --background. They move up to 22 units towards the cursor and blink about every six seconds.
• Arms — Sway gently every 3.5 seconds.
• Legs — Four legs, still.

Notes

• The default size is size-30. Passing className replaces it, so include a size.
• The eyes track the mouse anywhere on the page, not only over the mascot. They don't move on touch screens.
• It has role="img" and the label "PREDICT mascot". Pass aria-hidden when it is only decoration.
• For a still version, such as in print or an email, use PredictMascut from @workspace/ui/predict/logo.

Examples

Sizes

size-12, size-20, and size-30.

"use client"

import { PredictMascot } from "@workspace/ui/predict/predict-mascot"

export function MascotSizes() {
  return (
    <div className="flex items-end gap-8">
      <PredictMascot className="size-12" />
      <PredictMascot className="size-20" />
      <PredictMascot className="size-30" />
    </div>
  )
}

Static

PredictMascut has no animation and draws in brand purple.

"use client"

import { PredictMascut } from "@workspace/ui/predict/logo"

export function MascotStatic() {
  return <PredictMascut role="img" aria-label="PREDICT mascot" className="size-30" />
}

Props

Unlisted props pass through to the svg element.

PredictMascot