Flipbook

About this style

A flipbook is a small pad of sequential drawings that seem to move when the pages are released quickly past the thumb. John Barnes Linnett patented it in Britain in 1868 as the kineograph, and it went on to be sold as a toy and printed with film stills and advertising. Animators use flipbooks to test timing, and the usual method is to draw the first frame on the last page and trace each new drawing through the page above it, so the book plays from back to front. Small differences between hand-drawn frames make the lines shimmer slightly, which has become part of the look.

Make a 10-second 3D film of a hand-drawn flipbook: a thumb bends its pages into a curl and lets them slip off one by one, and the pencil drawing inside comes alive.

<inputs>
If I don't give you something, use the default and don't ask.
- Maker: Thumbwheel Press (fictional).
- Title: "Forty-eight pages, one leap"
- Line: "Drawn in pencil, one page at a time."
- Cover: "LEAP", pencilled on the kraft cover.
- Story: a frog on a lily pad blinks, crouches, leaps across the page and lands on a second pad with a splash.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a bright tabletop macro of a real handmade flipbook on an orange self-healing cutting mat, under soft window light: thick cream pages that bend and spring, a pencil drawing with two colored-pencil accents, and a thumb that riffles them.
- Palette: cutting mat #E8672C with 1 cm grid lines #F6B48A at 35%, every fifth line bolder #FBD2B4 at 55%, a printed ruler scale along its front edge, 45° guide lines in one corner and a few faint knife scores; pages cream #F5EFE0 with page edges #E2D6BE; kraft cover and binding tape #B98A55; brass staples #C9A65C; a black fold-back binder clip #1E1E22 with silver wire handles #C9CCD1; graphite #3F4048; frog wash chartreuse #B8CF3C; water in blue pencil #4D7CC8; skin #C98E6C, warmer #B97458 at the tip, knuckle and creases; nail #E6BDAB with a lunula #F1D6C8; type #2A140B and cream #FFF3E3. Orange and blue pencil are complements: the blue rings are the only cool marks in a warm frame.
- The book (1 unit = 1 cm): 48 pages of cartridge paper, 9 × 6 cm landscape, 0.025 thick, on a kraft back cover 0.08 thick, with a matching front cover; the left short edge is bound by a 1.2 cm wrap of gummed kraft tape over two brass staples, and that bound end is clamped to the mat by the binder clip, its handles folded flat. The stack's fore-edge shows fine individual page lines. Each page's drawing is centered in the right two-thirds, clear of the binding, with its number pencilled in the bottom right corner.
- Pages bend, never hinge: each page is a PlaneGeometry 9 × 6 with 40 × 4 segments, deformed each seek from its stored flat copy and its normals recomputed. A page lifted to fore-edge angle a curves like real card: its tangent angle at distance s from the binding is a · smoothstep(0, 0.7 × 9, s), so the bend is gentle at the tape and strongest toward the free edge. Lifted pages fan: page j of the bundle sits at a − 0.9°·j, so their edges spread with thin gaps of light between them.
- The riffle, back to front as flipbooks are drawn: the thumb slides its tip under the fore-edge of the page stack and lifts every page but the bottom one into a curl (bundle angle 0 → 125°), leaving the page carrying drawing 1 flat on the back cover. Then the pages slip off the thumb's tip one at a time, the lowest first: the page carrying drawing n (n = 2…48) is released at 2.4 + (n − 2)/12 s and falls from the bundle to flat in 0.16 s on an ease-in like gravity, its fore-edge whipping down last so it lands with a slight S-curve, then a 1.5° flutter that dies in 0.12 s. Each landed page lies 0.025 above the last, so the top page always shows the newest drawing. While a page falls, the drawing on the page below shows through it faintly (8%), as through real paper.
- The thumb, a right thumb seen from its outer side, entering from the right edge: a distal segment 3.0 long, 2.0 wide and 1.6 deep, fuller at the pad; the nail as a thin curved plate 1.5 × 1.7 set into a nail fold, with a lunula, a pale free edge and a cuticle line; two shallow creases at the joint; a wider proximal segment rising into the base of the hand, which runs out of frame. Skin is MeshPhysicalMaterial, roughness 0.5, sheen 0.5 with sheenColor #F3C7AE, warmer at the tip and creases through vertex colors, with fine pore bump. Its pad flattens 6% where it bears the pages. As pages slip, the thumb rolls back 10° and its tip draws 0.8 cm toward the binding.
- The drawings, one per page, drawn once at load into 1024 × 683 CanvasTextures, each redrawn rather than copied: a graphite outline about 3px wide with pressure taper and a seeded wobble of ±0.8px that differs from page to page (the line shimmers slightly, as real redrawn frames do), chartreuse colored-pencil hatching inside the frog's body at −35° (re-seeded every page), the lily pads as chartreuse-outlined discs with a notch, water as two short blue-pencil strokes under each pad. The action: drawings 1–8, the frog sits on the left pad, blinks and puffs its throat; 9–14, it crouches, body squashing down, eyes up; 15–30, the leap: stretched long, back legs trailing, on an arc that peaks near the top of the page, while the left pad rocks and three blue drops fly from it; 31–36, it lands on the right pad and squashes flat, the pad dips and a blue splash crown rises; 37–48, two blue rings spread and fade as the frog straightens and gives a satisfied blink. Drawing 48 is the frog sitting on the right pad, throat puffed, the rings faint.
- Light, bright from the first frame: a key DirectionalLight #FFF4E6 at 2.4 from the upper left (elevation 48°) with soft shadows (PCFSoftShadowMap, 2048, a shadow camera fitted to the book) so the curl casts a soft shadow across the flat pages and the mat; a HemisphereLight #FFF3E8 / #D9622C at 0.9, so the orange mat bounces warm light onto the undersides of the lifted pages; RoomEnvironment through PMREMGenerator at envMapIntensity 0.3 for soft sheen on the skin, the clip and the staples. Soft contact shadows under the book and the thumb. The shaded inside of the curl stays at least 65% as bright as the lit pages. ACESFilmic, exposure 1.05.
- Camera: fov 32. A three-quarter view from the front right at pitch 40°, the book and its curl centered at (1120, 560) and about 1000px wide, pushing in 4% across the riffle; at the end it rises to pitch 62° to look down on the open page, which ends about 1050px wide centered at (1150, 580).
- Type (HTML over the canvas): kicker "THUMBWHEEL PRESS" in DM Mono 500, 20px, tracked 0.16em, cream; title in Bricolage Grotesque 800, 76px, #2A140B, two lines, top-left at (120, 110); line in Bricolage Grotesque 500, 28px, #2A140B at 80%, beneath; a counter at bottom-left from (120, 960), "Drawing 12 / 48" in DM Mono 500, 26px, #2A140B, tabular figures, ticking as each page lands. Page numbers and the cover lettering in Shadows Into Light Two 400, graphite. Text rises 12px as it fades in over 0.5s on cubic-bezier(0.22, 1, 0.36, 1). The type stays left of x 620.
- Premium: thick paper that bends in a smooth curl and springs flat, drawings that shimmer slightly page to page like real redrawn frames, a thumb with a nail and creases that the pages slip from, warm bounce light inside the curl. Cheap: a stack of rigid cards rotating on a hinge, one sprite sliding over the same page.
Banned: rigid pages that rotate as flat planes, pages passing through each other, the thumb or the clip, a cartoon glove, a second hand, vector-clean lines in the drawings, typed text on the pages, motion blur, bloom, real stationery brands, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the book lies clipped to the mat, its kraft cover closed with LEAP pencilled on it; the kicker and title rise in.
- 0.6–1.3s: the cover lifts on its tape hinge and folds back flat to the left: the top page shows drawing 48, the frog sitting on the right-hand pad.
- 1.3–2.4s: the thumb comes in from the right, slides under the fore-edge and lifts the pages into a tall curl; the bottom page appears beneath with drawing 1, the frog on the left pad; the counter appears at 1 / 48.
- 2.4–6.4s: the riffle: pages slip off the thumb's tip one by one at 12 a second and land flat; the frog blinks, crouches, leaps across, lands with a splash and the rings spread; the counter ticks with each landing (the 6.0s frame: the thumb with a thin curl of the last pages, the frog settling on its pad inside spreading rings).
- 6.4–7.0s: the last page lands; the thumb lifts away to the right; the top page's flutter settles.
- 7.0–8.2s: the camera rises to look down on drawing 48; the line rises in under the title.
- 8.2–10.0s: hold.
For other lengths, change the opening and the final hold; keep the riffle at 12 pages a second.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- Every page's angle and bend, the cover and the thumb are closed-form functions of t and the release times; the 48 drawings, the mat and the paper textures are drawn once at load after the fonts load.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check every page bends in a smooth curve with no kinks or rigid flaps, no page passes through another page, the thumb or the clip, the thumb reads as a thumb (pad, nail, crease), the drawings play as one continuous blink, crouch, leap and landing, the counter matches the top page, and the book is brightly lit from the first frame. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

8-Bit Pixel Art Scene

Made by us

An 8-bit attract screen: a dusk forest scrolls in parallax layers as a tiny lantern-carrying hero walks, hops a log and…

Manga Action Panel

Made by us

A black-and-white manga page read right to left: rooftops, narrowed eyes, a silhouetted courier leaping through focus l…

Comic Book Page

Made by us

A five-panel comic page made the old way: blue pencil roughs, weighted black inks, flat process color with Ben-Day dots…

Rubber Hose Cartoon

Made by us

A black-and-white 1930s cartoon: Tippy, an original teakettle with rubber-hose limbs, white gloves and pie-cut eyes, da…