Ghost Walker

Cute ghosts wander your website and flee when the cursor gets close. Click one: poof.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Animated · Full motion: idle animation, physics and effects. animated (default)

Steering behaviour (wander → flee) with a scared state (wide eyes, shiver). Click a ghost and it disappears, then sneaks back in from an edge a few seconds later. Use the built-in ghost, an emoji, an image URL or your own SVG.

Installation

$ npm i @guetix/ghost-walker

Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.

vanilla.ts · any framework

import { ghostWalker } from "@guetix/ghost-walker";

const ghosts = ghostWalker({ count: 4, fleeRadius: 160 });
// custom shape: emoji, image URL or SVG markup
// ghostWalker({ shape: "🎃" }) · ghostWalker({ shape: "/my-ghost.svg" })
// later: ghosts.destroy();

Usage

example.tsx

import { GhostWalker } from "@/components/guetix/ghost-walker";

export default function Page() {
  return (
    <main>
      {/* whole website */}
      <GhostWalker fullscreen count={3} />
    </main>
  );
}

Halloween404 pagesPlayful brandsProduct launches

Under the hood

The details that make it feel right, and that a one-line prompt usually misses:

01Wander + flee steering with speed caps, so they glide instead of jittering.
02One shared stylesheet is injected once; destroy() removes every trace.

Props

Prop	Type	Default	Description
count	number	3	Ghosts.
size	number	46	Size (px).
speed	number	1	Speed multiplier.
fleeRadius	number	150	Scare distance (px).
shape	string	—	SVG markup, emoji or image URL.
color	string	—	Default ghost color.
clickable	boolean	true	Click to poof.
fullscreen	boolean	false	React: haunt the whole page.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

Decorative layers are aria-hidden and never block clicks.
prefers-reduced-motion: frozen or disabled.

Ghost Walker

Cute ghosts wander your website and flee when the cursor gets close. Click one: poof.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Open in v0

Animated · Full motion: idle animation, physics and effects. animated (default)

Installation

$ npm i @guetix/ghost-walker

Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.

vanilla.ts · any framework

import { ghostWalker } from "@guetix/ghost-walker";

const ghosts = ghostWalker({ count: 4, fleeRadius: 160 });
// custom shape: emoji, image URL or SVG markup
// ghostWalker({ shape: "🎃" }) · ghostWalker({ shape: "/my-ghost.svg" })
// later: ghosts.destroy();

Usage

example.tsx

import { GhostWalker } from "@/components/guetix/ghost-walker";

export default function Page() {
  return (
    <main>
      {/* whole website */}
      <GhostWalker fullscreen count={3} />
    </main>
  );
}

Halloween404 pagesPlayful brandsProduct launches

Under the hood

The details that make it feel right, and that a one-line prompt usually misses:

01Wander + flee steering with speed caps, so they glide instead of jittering.
02One shared stylesheet is injected once; destroy() removes every trace.

Props

Prop	Type	Default	Description
count	number	3	Ghosts.
size	number	46	Size (px).
speed	number	1	Speed multiplier.
fleeRadius	number	150	Scare distance (px).
shape	string	—	SVG markup, emoji or image URL.
color	string	—	Default ghost color.
clickable	boolean	true	Click to poof.
fullscreen	boolean	false	React: haunt the whole page.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

Decorative layers are aria-hidden and never block clicks.
prefers-reduced-motion: frozen or disabled.

Ghost Walker

Preview

Ghost Walker

Preview