free · open source · MIT

A pixel creature that lives on your website.

Perch stands on your real headings, text and buttons, rides them while you scroll, and points at your call to action. One script tag. Tune it live on localhost, or right here.

npx perch-pet

Star on GitHub

Next.js · Astro · SvelteKit · Nuxt · Vite · plain HTML · 13 kB gzipped · no tracking

Or put it on any website you visit: get the browser extension

Try another one on this page:

Six creatures, or your own

Octopus is the default. Pick one with data-creature="cat" or in the tuner.

The six Perch creatures: octopus, blob, cat, ghost, robot and alien

Three steps. No code changes.

Perch is a package, not a rewrite. The command adds one script tag. Everything else happens in a panel on localhost.

Run one command
It finds your layout file and adds the tag. If it finds more than one place, it asks you. Undo any time.
```
npx perch-pet
```
Click the gear
Open your site on localhost. Swap creatures, draw your own, switch on “show floors”, and click your call to action to pick it.
```
localhost:3000  ⚙
```
Save with one command
The panel prints the exact command for your choices. Paste it in your terminal.
```
npx perch-pet set creature=cat stickiness=0.8
```

See it work

It jumps to what you click, rides the page while you scroll, and gets squashed when the page pushes it into the top. Then the tuner swaps it for a cat and an alien and edits its pixels.

The Perch tuner panel on localhost with sliders, a creature picker and blue floor lines over the page

The pixel editor in the Perch tuner with a palette and eye controls

Made to be left alone

Defaults that work on most sites, and the small things that stop it from becoming a problem.

Stands on your real elements

Headings, text lines, cards, buttons, forms. It stands on the letters, not on the box around them.

Finds your call to action

A submit button, or a button that says “sign up” or “book a demo”. Point it somewhere else with one selector.

Tune it live

Stickiness, speed and size. “Show floors” draws what it found, so you see why it stands where it stands.

Draw your own

A pixel editor for the body, legs, arms, colors and eyes. Six creatures are built in.

Light and private

13 kB gzipped. No tracking, no network calls, no layout shift. The tuner never loads for visitors.

Polite

Never blocks clicks. Sits still with “reduce motion”. Hidden from screen readers. Skips popups and fixed headers.

Built for coding agents

The setup is a command, not a skill file and not a prompt. It is deterministic: no network, no model, plain file edits. Give your agent this:

Add the Perch mascot to this site. Run `npx perch-pet detect` to see what it found, then `npx perch-pet` to install. If it lists several places, rerun with `--file `. Open the dev server and check that the creature stands on the page elements and points at the main button.

Agent guide llms.txt llms-full.txt Options schema AGENTS.md

Questions

What is Perch?

Perch is a free, open-source pixel creature for websites. One script makes a small animated mascot that stands on your real headings, text and buttons, rides them while visitors scroll, and points at your call to action.

How do I add a mascot to my website?

Run npx perch-pet in your project folder. It finds your layout file, copies the script into your public folder and adds one script tag. Without a repo, paste one script tag before the closing body tag.

Does Perch work with Next.js, Astro, SvelteKit, Nuxt and Vite?

Yes. The setup command edits the right file for Next.js (app and pages router, including route groups), Astro, SvelteKit, Nuxt, Vite and plain HTML. For anything else, such as WordPress, Webflow or Shopify, paste the script tag.

Will it slow down my site?

The script is about 34 kB, 13 kB gzipped. It draws one small canvas, pauses in background tabs, adds no layout shift and makes no network requests. The tuner panel is a separate file that only loads on localhost (and on this demo site).

Does it track my visitors?

No. There is no tracking and no analytics. The only request it can make is one optional fetch of your own creature file.

Can I make my own character?

Yes. On localhost, the tuner has a pixel editor for the body, legs, arms, colors and eyes. Download the JSON and run npx perch-pet creature ./creature.json.

Does it work on phones?

Yes. It uses a smaller size on touch screens and follows taps and scrolling. You can turn it off on phones with data-mobile="false".

Can an AI coding agent install it?

Yes. The setup is a deterministic command, not a prompt. Agents run npx perch-pet detect to see what it found, then npx perch-pet, and use --file when there is more than one place to choose.

Can the creature ask my visitors a question?

Yes. Set a question with up to three buttons: open a link, copy a code, scroll to a section, click your chat button, or just close. The creature stands still while the question is up, and it goes away when the visitor scrolls.

Is it free?

Yes. Perch is MIT licensed. The source is on GitHub.

Give your site a pet.