Add a pixel mascot to any website with one script tag

No repo, no build step, no framework needed. If your site lets you add a script, Perch works.

The one-line install

<script src="https://unpkg.com/perch-pet@0.1/dist/perch.js" defer></script>

Paste it before </body>, or into your site builder's footer or custom-code box.

Plain HTML or Vite: before </body> in index.html. Or run npx perch-pet and it does this for you.
WordPress: a footer-scripts plugin, or your theme's footer.php before wp_footer() ends.
Webflow: Project settings, Custom code, Footer code.
Shopify: theme.liquid, before </body>.
Squarespace, Wix, Ghost: the code injection or custom code area for the footer.

<script src="https://unpkg.com/perch-pet@0.1/dist/perch.js"
  data-creature="cat"
  data-stickiness="0.8"
  data-goal=".hero a.cta"
  defer></script>

All options: creature, stickiness, speed, scale, goal, platforms, ignore, topOffset, mobile, draggable, bounce. See the option table or schema.json.

Add ?perch=tune to your page URL. The tuner panel opens in the page. Swap creatures, draw your own and copy the script tag with your settings.

The unpkg link follows the 0.1 release line. To host the file yourself, download perch.js from the npm package and use src="/perch.js".

Can I use it without npm?

Yes. The script tag loads the file from a CDN. You do not need npm, a build step or a repo.

Does it work on a site I do not control the code of?

It works anywhere you can add a script. Many site builders have a custom-code box for this.