Turn your character art into a Pack.

01 · AVAILABLE TODAY

Turn your character art into a browser-ready Pack.

Artists and animators can use this guide to prepare an original or properly licensed character for Peekling. The command line scaffolds the source folder, compiles named animation frames, and validates the finished Pack. You choose the art, timing, movement mappings, and rights record. The compiler writes the dense runtime atlas and manifest.

02 · PREPARE YOUR ART

Choose one canvas before drawing the sequence.

Keep every frame on the same logical canvas, with a stable baseline and a silhouette that remains readable at its final display size. Lightweight Packs may use 32px logical cells. Official smooth Packs use 64px logical cells with matching 1x, 2x, and 4x source variants.

• Draw every frame from artwork you have the right to publish.
• Keep the character scale, contact point, and outline weight consistent.
• Give source frames stable names while the compiler manages atlas numbers.
• Check the sequence at its real browser size as you draw.

03 · PACK ANATOMY

Keep every capability visible in the manifest.

A Pack is a portable set of validated data and images. Its manifest connects named States to frames, timing, density variants, movement capabilities, and atlas hashes. The Peekling runtime reads that declared data when it renders the character.

04 · PLAN MOTION

Describe what the character can show.

Every native Pack needs an idle State and locomotion mappings for all eight directions. A State can contain 1 through 64 frames. It uses either one FPS value or one bounded duration for every frame, plus an explicit loop choice.

Add reactions with matching artwork. A State called celebrate defines the animation, while the website Plan chooses the moment and selects that State by name.

05 · COMPILE AND VALIDATE

Let the compiler assign runtime frame IDs.

npm install --save-dev @peekling/cli@0.1.0
npx peekling create ./my-character --name my-character
npx peekling pack ./my-character-source --out ./my-character
npx peekling validate ./my-character

The compiler reads named source frames, removes unused cells, writes a dense 16-column atlas, records hashes, and keeps declared densities in the same frame order. Validation checks the manifest, image geometry, timing, movement mappings, paths, hashes, and bounded image data.

06 · RIGHTS AND PUBLISHING

Carry clear art rights with every Pack.

Technical validation covers the Pack files and schema. Your rights record covers the artist, source, license, and redistribution permission. Complete that record before a Pack leaves local development. Package the files the character needs at runtime, plus everything its license requires.

A compatible Pack can be published from its own npm package or immutable HTTPS location. The official character repository curates a reviewed set of Packs. Open an issue before creating a new official character so its name, scope, provenance, and license can be reviewed early.

07 · NEXT STEP