The Making of Storybloom Press

the concept

Pure delight, art-directed

The brief: a children's picture-book studio whose site makes adults smile — a paper-craft world in the spirit of Oliver Jeffers crossed with a hand-cut paper diorama. Never clip-arty, never saccharine. The tagline "We make books children sleep with" sets the tone: warm, confident, a little wry. Every surface is built from torn and cut paper with soft drop shadows, gouache texture, and a hand-written margin voice.

the imagery

GPT Image 2 — the actual prompts

Five originals: four portrait book covers (1024×1536) sharing one consistent gouache/cut-paper style anchor, and one landscape interior spread (1536×1024, no text) for the read-a-spread interactive. Model: gpt-image-2, quality high. Every image was inspected and kept only if the title text rendered cleanly and the anatomy held.

Shared style anchor (prepended to all covers) Children's picture-book cover art in warm gouache and cut-paper collage. Layered torn-paper textures with soft drop shadows giving paper-diorama depth. Hand-painted brushy gouache with visible grain, Oliver Jeffers crossed with a paper craft diorama. Palette strictly: warm cream #FFF8EE, robin's-egg #7EC8C0, marigold #FFB637, coral #FF7B54, plum #6B4E71, sage leaf green #8BBB6A. Muted gouache, no neon, no glossy digital gradients. Centered portrait cover with a calm margin.

cover-whale.jpg — "The Whale Who Collected Sunsets" …A gentle blue whale drifting through a dusk sky, its broad back cradling a glowing collection of tiny cut-paper sunsets like little folded suns in coral and marigold. Hand-lettered painterly title text, clean and legible.

cover-map.jpg — "A Map of Everywhere" …A child in a marigold coat unfolding an enormous map that becomes rolling paper-cut landscapes, rivers of teal ribbon, tiny mountains folding out of the page. Warm adventurous curiosity, well-formed title lettering.

cover-moon.jpg — "The Night the Moon Overslept" …A round sleepy moon with a soft face tucked under a patchwork paper-quilt among plum night clouds, a tiny bird tugging the blanket. Tender bedtime mood, clean legible title.

cover-milo.jpg — "Milo & the Paper Dragons" …A curious boy in a teal striped shirt surrounded by friendly origami dragons of coral, marigold and sage folding and flying around a cozy attic. Playful wonder, clean title lettering.

spread.jpg — interior spread (no text) Wide dreamy landscape at golden hour: rolling cut-paper hills in sage and leaf, a winding teal river, a tiny child and round animal companion walking toward a marigold sun, a coral hot-air balloon, floating dust motes. Absolutely no text or letters.

the craft

Signature techniques

Paper-cutout parallax hero. Five layered SVG planes — sun, far clouds, three torn-paper hills — each with a data-depth. A rAF loop eases both mouse offset and scroll into per-layer transforms, so the diorama drifts as you move and gently disassembles as you scroll.
Firefly dust-motes. A canvas of 40-odd glowing motes in marigold/coral/cream, each with its own drift velocity and a sine-wave twinkle, floating upward through the hero.
Springy books. Each cover tracks the pointer for a live 3D tilt (rotateX/rotateY), lifts and rotates on hover, and a light-sweep "page-flutter" gradient sweeps across.
Read-a-spread 3D page-turn. A real book built from left/right pages plus a hinged .flip leaf with front & back faces; rotateY(-172deg) on an 1100ms eased transition turns the page. Click the corner or the buttons.
Wobbly hand-drawn underlines. Rough SVG paths under key headings, animated with stroke-dashoffset so they draw themselves in as each heading scrolls into view.
Cut-paper award seals. Scalloped medal shapes generated procedurally in SVG, with paper ribbons, that wobble on hover.

// page-turn hinge
function set(turned){
  bookEl.classList.toggle('turned', turned); // -> rotateY(-172deg)
  next.disabled = turned; prev.disabled = !turned;
  flip.style.zIndex = turned ? 1 : 5;
}

the process

Three iteration passes

Pass 01

Structure & motion truth

Verified the parallax eased correctly on both axes, tuned mote density for mobile, fixed page-turn z-index so the flipped leaf settles beneath the revealed page, and confirmed every cover carried real alt text and a coloured fallback if an image fails to load.

Pass 02

Type rhythm & contrast

Tightened section spacing, enlarged the read-a-spread stage, ensured spread caption text sits on a translucent paper card for AA contrast over illustration, and refined the underline draw-in timing so it fires on scroll rather than on load.

Pass 03

Polish & weight

Compressed all five illustrations to hit the page-weight budget, added the mobile nav fallback, checked 375 / 768 / 1280px for overflow, verified reduced-motion disables the heavy loops, and swept the console clean.

The making of Storybloom Press