Open web mascot runtime
A character can be a companion, a creation, a tool, a mascot, or something nobody has imagined yet. Peekling gives them a place to exist, quietly, playfully, and without getting in your way.
Ten real website scenarios
Choose a situation to apply it to the live companion. The working controls open inside Peek's bubble when the scenario needs them. Motion-only scenarios stay clear so you can watch Peek move.
Motion has a clear owner. Pointer Plans respond to the visitor. The search patrol follows its own bounded bottom-edge route and never follows the cursor.
Applied live
A general companion for a normal landing page.
Start with npm for an app build, or use a CDN for a plain page.
Bright pop · Web Audio · 32 seconds
− Peekling makes mascots interactive.
+ Peekling gives web mascots a safe place to live.Peekling makes mascots interactive.
Starts after a one second worker wait.
The whole install
Load the version-pinned browser file from jsDelivr and call the global API. Runtime 0.1.0 is live now and remains pinned here.
<script src="https://cdn.jsdelivr.net/npm/@peekling/runtime@0.1.0/dist/peekling.min.js"></script>
<script>Peekling.hatch("peek");</script><script src="https://unpkg.com/@peekling/runtime@0.1.0/dist/peekling.min.js"></script>
<script>Peekling.hatch("peek");</script><script src="https://static.example.com/peekling/0.1.0/peekling.min.js"></script>
<script>
Peekling.hatch({
packUrl: "https://static.example.com/characters/peek/0.1.0/character.json",
});
</script>npm install @peekling/runtime@0.1.0
import { hatch } from "@peekling/runtime";
const peek = hatch("peek");
await peek.ready;import { useEffect } from "react";
import { hatch } from "@peekling/runtime";
export function PeeklingCharacter() {
useEffect(() => {
const peek = hatch("peek");
return () => peek.destroy();
}, []);
return null;
}<script defer src="https://cdn.jsdelivr.net/npm/@peekling/runtime@0.1.0/dist/peekling.min.js"></script>
<peekling-character character="peek"></peekling-character>Bring a character
A native pack is a manifest, one or more PNG density variants, and a licence. The validator checks geometry, hashes, frames, paths, and state cycles before rendering.
Community Peeklings
Community-contributed Peeklings will live in one searchable collection. Until submissions open, this orbit uses our own roster to show how many kinds of little lives can belong here.
Explore PeeklingsCute, with boundaries
Measured locally, gated in CI
31.09KiBruntime gzip
27.52KiBruntime Brotli
36.63KiBtree-shaken hatch gzip
340.81KiBcomplete first embed
Published runtime 0.1.0, a measured tree-shaken hatch import, and the complete Peek pack. Transfer size depends on server compression and delivery configuration.
Plain HTML
React, Vue, Svelte
Rails, Laravel, Django
Any page that runs JavaScript
Your corner looks lonely
Open source engine. No account. No backend.
A little clarity
Peekling is an open-source browser runtime for small, data-only animated characters. Peek is the first Peekling. Other characters can bring their own appearance, states, and way of moving.
Yes. The engine is licensed under Apache-2.0. Character packs carry their own license and provenance metadata, so their reuse terms remain explicit instead of being assumed.
No. The runtime has no telemetry, account, or required backend. Interaction state stays in the browser, and site visibility preferences are stored locally without a network request.
It is designed not to. The browser host uses a closed Shadow DOM, stays pointer-transparent, listens passively where appropriate, and provides complete teardown when destroyed.
The browser setup is two HTML lines: load a version-pinned
build, then place a
<peekling-character> element. Advanced hosts
can use Peekling.hatch(...) or ESM with the same
public runtime contract.
Yes. Compile and validate a data-only Peekling pack, then use its immutable HTTPS manifest or a configured resolver. The runtime fetches only that manifest and one suitable density atlas.
If the page runs JavaScript, it can run Peekling. React, Vue, Svelte, Rails, Laravel, Django, and other stacks all integrate through the same browser API. Wrappers are optional conveniences.
Yes. Holding the bottom-right corner reveals temporary and site-local rest choices. The preference needs no account or server, and a site can always provide a normal “Show again” control.
