perchA 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-petNext.js · Astro · SvelteKit · Nuxt · Vite · plain HTML · 10 kB gzipped · no tracking
Or put it on any website you visit: get the browser extension
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.
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
10 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.
Six creatures, or your own
Octopus is the default. Pick one with data-creature="cat" or in the tuner.
Want it on any website?
The Perch extension puts a creature on the pages you visit. Draw your own, choose the call to action and the things to ignore for each site, and hide it with one key.
- One click on the toolbar icon, or Alt+Shift+P
- The same tuner panel as here, saved in your browser
- Asks for access to one tab, not every site, unless you choose so
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.
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 27 kB, 10 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.
Is it free?
Yes. Perch is MIT licensed. The source is on GitHub.
Give your site a pet.
npx perch-pet