Website mascot

A mascot that reacts to what happens on your website.

Q: How do I respect reduced motion with a website mascot?

Check matchMedia('(prefers-reduced-motion: reduce)'); when it matches, keep the mascot on idle or pause the Rive instance, and don't autoplay the video loops. Under WCAG 2.2, looping motion that lasts more than five seconds next to other content also needs a pause control.

Upload your mascot and embed it as a Rive canvas whose mood your page sets on hover, scroll, form focus or a finished checkout. Where you only need motion, the transparent WebM with an HEVC MOV fallback plays over your page in Chrome, Firefox, Edge and Safari.

See it in your app See plans

Embed: Rive canvas, mood 0–9 + triggers
Video: Transparent WebM + HEVC MOV
Code: Web embed + React component
Plan: Starter, $20/month

Live Rive file

Loops

Play once

This is the actual .riv our engine delivers, playing in your browser. It's the same state machine you drive from your app with one number input and a trigger per one-shot.

Page events, mapped to the mascot

Page event	Mascot	Input
Page loads	enter, then idle	trigger, mood 0
Hover on a call to action	wave or happy	mood 2 or 1
Pricing scrolls into view	attention	mood 9
Form field gets focus	listening	mood 6
Form is submitting	loading	mood 5
Signed in, message sent	success	trigger
Wrong password	error or no	trigger
No search results	sad or sleeping	mood 4 or 8

Wire it to your page

const vm = r.viewModelInstance;       // after onLoad
const mood = (n) => (vm.number("mood").value = n);

cta.addEventListener("mouseenter", () => mood(2));   // wave
cta.addEventListener("mouseleave", () => mood(0));   // idle
email.addEventListener("focus", () => mood(6));      // listening
form.addEventListener("submit", () => mood(5));      // loading

// when your API answers:
vm.trigger(ok ? "success" : "no").trigger();

The delivered web embed and React component (with a mood prop and play()) set up the Rive instance.

Where it runs

Webflow has a native Rive element and Framer an official Rive plugin. WordPress and Shopify take the .riv through an embed, or the transparent video in a video block. See adding animation to a website.

Honest limits

No cursor-following eyes: the mascot switches between its 17 animations.
No walk-ons across the page: enter and exit play in place.
Facial expressions and arm waves need flat artwork; 3D mascots move as a whole.

Real output

Delivered files, exactly as you'd download them.

MP4 Every set

1080 × 1080 at 60 fps. Here: Gummo’s wave, from a delivered set.

Transparent WebM & MOV Every set

Alpha channel included, so the checkerboard shows through. MOV is HEVC with alpha for Apple apps and editors.

Kiko thinking, GIF output — GIF Every set
Light previews for docs, email and chat. Kiko’s “thinking” loop.

9:16 launch video Every set

1080 × 1920 for stories and splash screens. Sizzle’s launch intro.

kiko.riv · 150 KB

CharacterStateMachine: number input mood
0–9: idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention
triggers: success · error · yes · no · enter · exit
LaunchStateMachine: launch → idle, plays once

Rive state machine Every set

One small file instead of 17 videos. It’s what powers the demo at the top of this page.

import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

export function Kiko({ mood = 0 }) {
  const { rive, RiveComponent } = useRive({
    src: "/kiko.riv",
    stateMachine: "CharacterStateMachine",
    autoplay: true,
  });
  const input = useStateMachineInput(rive, "CharacterStateMachine", "mood");
  if (input) input.value = mood; // 0 idle · 1 happy · 2 wave · 3 thinking · 4 sad · 5 loading …
  return <RiveComponent style={{ width: 320, height: 320 }} />;
}

Paste-ready code Every set

Web, React and SwiftUI components named after your character.

Formats included per plan
Format	Specs	Best for	Starter & All in one
MP4	1080 × 1080, 60 fps, all 17 animations	Apps, socials, decks, product videos	Included
9:16 launch video	1080 × 1920 MP4	Stories, Reels, splash screens	Included
GIF	480 px previews, solid background	Docs, email, chat, README	Included
Rive (.riv)	Vector; Data Binding view model + legacy inputs: mood for loops, triggers for one-shots, launch machine	Interactive apps and sites (web, iOS, Android, Flutter)	Included
Transparent WebM	VP9 with alpha, 1080 × 1080	Web overlays on any background	Included
Transparent MOV	HEVC with alpha	Final Cut, Keynote, iOS, Safari	Included
Code	Web (HTML), React and SwiftUI components	Paste in and ship	Included
Download all (.zip)	Rive file, code, README and posters in one archive	Hand-off to your team	Included
Video export	MP4, GIF, transparent WebM and MOV, 9:16: pick formats and animations on the set page, ready in about a minute	Only the videos you need	Included
AI assistants (MCP)	Claude, Cursor, VS Code and Codex	Design, animate and get download links in the chat	Included

Plans

Start free. Upgrade when you need more.

The interactive .riv, transparent video and web code are in every paid plan, from Starter ($20/month). The MP4 and GIF have a solid background, which only blends in on a matching page color. Prices in USD; tax is calculated at checkout by Creem.