Open-source JavaScript library · MIT

A passive-aggressive coworker for your website.

Meet Gary. He walks around your website, judges your visitors, and takes credit for things he didn't do.

★ Star on GitHub Observe Gary at work*

He's on this page right now. Pick him up and drop him somewhere. Right-click him for his menu.

* Actual work not guaranteed.

Gary

Head of Strategic Alignment & Cross-Functional Synergy Enablement

500+ connections

Hire Gary Fire Gary

About

Strategic, results-oriented leader with 15+ years of experience driving cross-functional alignment, facilitating high-impact stakeholder engagement, and optimizing organizational synergies.

Agenda item 1 · Onboarding

Onboarding takes one line.

Add him with one script tag, make him say your things, or swap him for a character of your own.

Copy the script tag.

<script defer src="https://cdn.jsdelivr.net/npm/gary.js@0.1.0/dist/gary.js"></script>

Paste it into your page, in the <head> or just before </body>. No build step, no account, no backend.
Reload. Gary walks in once your page has loaded and starts having opinions. Pick a preset with one more attribute, or write his lines.

Agenda item 2 · Track record

Gary has been everywhere.

Ready-made presets for the pages that need him most. Each demo is a plain HTML page with one script tag.

404 pages

He walks onto your 404, questions your routing architecture, and leaves. Keep clicking and he starts drafting an incident report.

data-preset="404" Open the live demo →

Personal websites

He inspects your bio, notes that you've listed "Rust" after writing one Hello World, and sighs.

data-preset="personal" Open the live demo →

Any website

He reviews your landing page, objects to being dragged around, walks back to where he was and has notes about your scrolling.

data-preset="website" Open the live demo →

Agenda item 3 · Compliance

Annoying on purpose. Polite by design.

01One script tagNo build step, no framework, no backend, no account.
02SmallAbout 26 KB gzipped. Artwork loads after your page has painted, with no layout shift.
03Never in the wayClicks pass through every transparent pixel. Your links, forms and buttons keep working.
04Visitors are in chargeThey can drag him, mute him or send him home, by mouse, keyboard or touch.
05No trackingNo analytics, no cookies, no network calls beyond his own images.
06Easy on batteriesStops in background tabs and rests when nobody's around. Respects reduced motion.

Agenda item 4 · Messaging

Make him say your things.

Write your own lines and decide when he says them: on load, on hover, on click, when something scrolls into view, when the visitor goes quiet. Scenes walk him onto your headings and buttons.

Configuration reference →

<script type="application/json" data-gary-config>
{
  "schemaVersion": 1,
  "lines": {
    "pricing": ["Pricing? Let's set up a call
                 to discuss a call."],
    "jargon": ["Let's not boil the ocean.",
               "Can we double-click on that?",
               "Let's take this offline.",
               "Is there bandwidth for a quick win?"]
  },
  "triggers": [
    { "on": "click", "selector": "#contact",
      "say": "#pricing" },
    { "on": "visible", "selector": "#roadmap",
      "say": "#jargon" },
    { "on": "idle", "after": 30,
      "say": "Still there? Bold." }
  ]
}
</script>

Agenda item 5 · Succession planning

Don't like Gary? Replace him.

The engine knows nothing about Gary. Describe any character in a JSON manifest with one image per animation, and it walks, talks and gets dragged around just the same. Mugsy, the public-domain mug, is a complete example to start from.

Character format → Live demo →

Agenda item 6 · Visibility

Gary would appreciate some synergy.

Star the repo, fork the engine, or build a character that's slightly more useful than him. The bar is low.

★ Star on GitHub Fork it