Walkies

A tiny 3D runner: a dog on a dotted path, jumping hydrants and grabbing bones. Tap to start, tap to jump, hold to jump higher. Pick the breed, the coat, the pace and the jump; it takes its colors from your page. Three.js loads only when it nears the screen.

Dog

Speed

Jump

Coat

Install

$ npx shadcn@latest add https://savi.fyi/r/walkies.json

Use it

import { Walkies } from "@/components/walkies";
 
export function DogGame() {
  return (
    <Walkies
      onScore={(score) => console.log("Walked", score)}
    />
  );
}

Props

dog: "mutt" | "dachshund" | "fluffy"; The breed. They share one skeleton, so all of them run, jump and sit.
coat: string; Fur color. Ears and paws get a darker shade. Defaults to the accent.
speed: number; Pace, from about 0.5 (a stroll) to 2 (zoomies). Defaults to 1.
jump: number; Jump height. Defaults to 1.
obstacles: ("hydrant" | "bush" | "squirrel")[]; Which obstacles show up. All three by default.
colors: { accent, foreground, background, card, muted }; Any CSS colors. Defaults come from the text and background around it.
messages: { idle, over, best }; What the dog says while he waits, when a walk ends, and on a best.
onScore: (score) => void; Called when a walk ends, for your own leaderboard.
bestKey: string | false; Where the best score is kept in the browser. False to not keep it.
fallback: ReactNode; Shown with reduced motion or without WebGL.

On this site

Walkies, on the homepage →