Squish My Face

For designers and developers

A hero image people will actually touch.

Every portfolio has the same hero: a photo, a name, a scroll arrow. This one gives people a reason to move their cursor before they scroll.

Why it works

It buys you four more seconds. People stop to poke things. Four seconds is a paragraph.

It's memorable. Nobody remembers your gradient. Everybody remembers the face they pulled.

It's a joke with a point. It says “I make things that respond,” without writing that sentence on a slide.

What you get

  • ~26KB gzipped, all in. No Three.js, no framework.
  • One draw call, and it stops simulating when nothing moves.
  • Mobile support, including long-press to grab without breaking page scroll.
  • prefers-reduced-motion respected; a still photo for anyone who asks for one.
  • Keyboard poke, so it isn't mouse-only.

Adding it to your site

It's a canvas, a photo, and about 600 lines of maths.

<div class="hero-face"
     data-face="/me.png"
     data-frame="circle"></div>
<script type="module" src="/plushie.js"></script>

The free version on this site stays free. The licence is for people who want it on their own domain.

Embed licence

$19, one site, one-time.

  • The engine, unminified and commented.
  • The cut-out-friendly circle frame.
  • A short README: install, configure, fallback.
  • No watermark, no “powered by” badge.
  • Not for resale or rebranding.

Get the licence

Questions from the people who will actually embed it

Will it slow my site down?

It loads after the page, only when it's about to be visible, and it's around 26KB gzipped. Your LCP is still your poster image.

What if the visitor has JavaScript off?

They see the photo. That's the whole fallback.

Can I use it on a client site?

One licence per site. Buy one for each, or get in touch for a bundle.