Style Comic

Style · Comic

In testing. Reference: styles/comic/template.js (look at styles/comic/review/sheet.jpg). Its first style test was a client piece and lives in the client's private repo.

Code

styles/comic/comic.js → Comic. Declare both fonts in the scene (OFL, licences in fonts/):

jsCopy code
fonts: [
    { family: 'Bangers', src: 'fonts/Bangers-Regular.ttf' },
    { family: 'Comic Neue', src: 'fonts/ComicNeue-Bold.ttf', descriptors: { weight: '700' } },
],

• Time: onTwos(t) (t held on its drawing), drawing(t) (drawing number, 12 a second).
• Ink: ink(g, pts, { w, taper, wobble, light, closed, smooth, seed, color }) is a filled brush line that swells and tapers; shape(g, pts, { fill, w, shade, light, seed }) fills, runs shade(g, path) clipped inside, then inks the outline. Paths: curve, resample, pathOf, ellipse, rect, starPts, and lobes(circles, cx, cy), the outline of a union of circles (clouds, bushes, round bodies).
• Halftone: dots(g, path, { color, spacing, r, anchor }) (Ben-Day, tile built at output resolution); halftone(g, path, { color, spacing, r0, r1, dir, box }) (graded dots for round forms and skies).
• Page: paper(g, env, { bleed }) (newsprint, cached) and grainPost(ctx, env) in post.
• Panels: panel(g, rect, drawFn, { border, bg }) clips the art and rules the border; enter(t, at, dur, from) is the pop-in on the beat (overshoot, on twos).
• Lettering: letter (balloon text, upper case), balloon({ kind: 'speech' | 'thought' | 'shout', tail, text }), sfx(g, text, x, y, { size, fill, shade }) (extruded, outlined, each letter tilted and growing), burst.
• Motion: speedLines (focus lines to a point), motionLines (streaks trailing a move).
• Hands: hand(g, pose, size, { side, fill }), a cartoon hand (thumb + three fingers) in one skin, wrist at the origin pointing up. Poses open (back to the camera), backGrip (holding a sheet from the camera's side: the backs of three fingers over it, the thumb hidden behind), thumbFront (the owner's view of a sheet held at its bottom edge). Drawn as a right hand; side: 'left' mirrors it.
• Tubes (limbs, handles): a wide ink line with a narrower colour line on top (the template's mug handle, limb in any puppet).

Style rules

• Palette (Comic.COL): page #f4ecd6, deep page #e7d9b8, white #fffaf0, ink #1c1a20, red #dd3b2d, yellow #f6c536, blue #2e67ae, sky #8fc9e3, green #4f9d63, orange #f28a2e, pink #ee8fa6. Ink is never pure black and the page never pure white. A character keeps its own brand colour; everything else comes from the palette.
• Line: brush ink with a varying width; open strokes taper; closed shapes carry the heavy side away from the light (the light comes from the top left: light: [0.55, 0.85]). Widths in a 900-wide frame: characters 6–8, props 3.5–5, panel borders 7, details 2.5–3.5. Each piece has a fixed seed: nothing boils.
• Colour: flat fills. Shading only as Ben-Day dots (flat or graded) or a hard cel shape, never a soft gradient. Dots on a moving piece are drawn in its local transform so they travel with it.
• One-skin silhouettes: a form made of several pieces (a hand) inks every piece first and fills every piece on top, so only the union's silhouette keeps its line.
• Panels: ruled borders of even width, the page as gutter. They pop in on the beat with a small overshoot and read left→right, top→bottom. A panel is a moment: once its beat has passed it holds (settles) instead of replaying its action. Balloons may break a border.
• Camera (motion comic): start inside the first panel so it fills the frame (the hook), pull back to the page on a beat, a gentle push at the end. Camera moves are smooth; the drawings change on twos. The final page holds as a poster.
• Lettering: Bangers for sound effects and stamps (extruded, outlined, sitting on a burst); Comic Neue Bold upper case in balloons; a document's own text in Comic Neue.
• Balloons: the tail points at the speaker from the free side. A thought bubble's trail never runs over a face (its circles read as spots): use a speech balloon with «…».
• Marks (motion lines, impact ticks) trail behind a move or sit at the ends of a label: never across what is held and never across printed text.
• Hands: cartoon, thumb + three fat round fingers; lines only between pressed fingers and at a bend; no nails. Right side and right view as the hands skill says.
• Forbidden: soft gradients, pure black or white, lines that boil, anything crossing text, hands through what they hold.

Style checklist

• Does every outline swell or taper, and is every frame's ink identical where the piece didn't move?
• Is all shading dots or cel, with no gradient?
• Does each panel read alone and in order, and hold once its beat has passed?
• Does any mark, tick, trail or balloon cross printed text or a face?
• Every hand: right side, right view, one skin, in front of or behind what it holds (never through)?
• Vertical: SFX, balloons and text inside the safe zone (top 150 / bottom 250 px at 1080×1920)?
• Static panel backgrounds cached as sprites at the camera's largest zoom (< 150 ms/frame warm)?

Lessons

• 2026-09-26 · first style test · A vertical page of stacked panels is mostly empty until the last panel lands: start the camera inside the first panel (it fills the frame and is the hook) and pull back to the page on the beat.
• 2026-09-26 · first style test · Pupils that look up vanish under a heavy lid: lift the lid a little whenever the eyes go up.
• 2026-09-26 · first style test · An arm raised from the middle of a round body, elbow inside it, reads as a noodle: attach it at the side, drawn behind the body, with the elbow outside.
• 2026-09-26 · first style test · The other arm resting reads as a mug handle unless it is akimbo in two passes: upper arm behind the body, forearm and hand in front.
• 2026-09-26 · first style test · A thumb seen from its owner's eyes reads as a pointing finger until the mound of the hand shows under the held edge, with the lines of the curled fingers.
• 2026-09-26 · first style test · Nails on the backs of cartoon fingers read as spots at this size: leave them out.
• 2026-09-26 · first style test · Impact ticks above and below a label crossed the text next to it: put them at the label's ends.
• 2026-09-26 · first style test · Graded halftone is drawn dot by dot: caching the static panel backgrounds at the camera's largest zoom took a page from 223 to 144 ms/frame.