Creature Evolution

About this style

An evolution sequence is the short cutscene in a monster-collecting role-playing game where a creature turns into its next form: it glows, its outline alternates between the old shape and the new one, and it bursts into the new form while a line of text announces the change. The Pokémon series, which began with Pokémon Red and Green in Japan in 1996, made the moment famous. Its parts are a white silhouette, an alternation of two shapes that speeds up, a radial burst and a celebratory card. Game studios, toy brands and creators reuse the format to show growth, upgrades and reveals.

Make a 10-second creature evolution scene: an original little creature glows white, its silhouette swaps back and forth between its current form and its next one, faster and faster, then the glow breaks open to reveal the evolved creature in full color, with a name card.

<inputs>
If I don't give you something, use the default and don't ask.
- Game: Hollowroot Wilds (fictional).
- Before: SPRIGGET, No. 046, a round, pup-sized moss sprite with a sprout on its head.
- After: LARCHELOPE, No. 047, a slender fawn of the larch woods with branching antlers in blossom.
- Opening line: "Something is happening to SPRIGGET…"
- Result line: "SPRIGGET grew into LARCHELOPE!"
- Card facts: Type GROVE · WIND · Height 1.4 m · Weight 38.2 kg · New move: Petal Gale
- Card stamp: "ADDED TO YOUR JOURNAL"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a cel-painted creature on a stage of slowly turning rays, like a cutscene from a handheld monster-collecting game drawn at full resolution: crisp cel tones, ink lines that swell and thin, a white-hot silhouette whose outline swaps between two forms with squash and stretch, light petals, sparkles and a card that flips in. Warm and celebratory, never harsh.
- Palette: stage deep pine #12302B at the edges to #1F4A40 at the center; 24 rays alternating #1F4A40 and #285A4D; motes and sparkles butter #FFE7A3 and coral #FF8A6B; glow white #FFFBEF with a butter halo #FFE29A; ground shadow #0C221E at 50%. SPRIGGET: moss #7FB069, shade #4E8A4B, highlight #B9DB8E; belly cream #F4EBD2, shade #D9C9A0; sprout #A6E06A; cheeks coral #FF9C84. LARCHELOPE: coat fawn #D9A066, shade #A8703F, highlight #F2C890; throat ruff and belly cream #F7EBD3; mane and tail fan moss #6FA65A, shade #3F7A44; antlers birch #EFE6D6 with bark ticks #6B5A4A; blossoms coral #FF8A6B and butter #FFD36B with #FFF3D6 centers; hooves #4A3A30; irises amber #F2B33D. Both: eyes ink #1A1F1C with two cream glints; ink lines #1A2622. Card cream #FFF6E3, card ink #1E2A26, chips GROVE #5E9E4F and WIND #7FB6D9, stamp coral #E8604A. The pine ground is the complement of the coral and fawn, so the evolved creature glows warm against it without any extra light.
- Stage: 24 wedges radiating from the creature's center (960, 560), turning at 6°/s; a soft radial vignette (pine to #0B201C at the corners); 60 butter motes drifting on slow seeded circles at 8–20% opacity; a soft ground shadow ellipse 420 × 70 centered at (960, 828) that resizes to each form's footprint.
- Creatures, drawn in Canvas 2D from a 2D skeleton of named joints: each part a closed Bézier shape around its bone, drawn back to front; three cel tones per material (base; a shadow cut by a hard terminator away from a key light at the upper left; a hard highlight); an ink outline 4–8px that swells at joints and thins at tips; feet always on the ground line.
  - SPRIGGET (about 300px tall, centered on x 960, feet on y 822): a near-round body (a superellipse 260 wide, 230 tall) with a cream belly patch; two leaf-shaped ears drooping to the sides, each with a midrib line; a curled stem on its crown carrying two sprout leaves (a 5-segment spring chain); round eyes 52px across, a small triangular nose, a w-shaped mouth, coral cheek ovals; two stubby forepaws held at the chest; two round hind feet with three toe ticks each; a short tail of three overlapping leaves. Idle: a 4% squash-and-stretch bounce at 1.2 Hz, the sprout lagging 0.15 s.
  - LARCHELOPE (about 580px from hooves to antler tips, centered on x 960, hooves on y 830): a slender fawn in three-quarter view facing screen left: a long neck, a narrow head with a long muzzle and a dark nose pad, large ears with cream insides, almond eyes with amber irises; four slim legs with real knees and hocks, small split hooves, the near foreleg raised and bent; a cream throat ruff of five pointed tufts; a moss mane down the neck as overlapping leaf shapes; a tail fan of seven larch-needle sprays (each a tapered stroke fringed with 14 short needles); two antlers, each a main beam with four tines, built as tapered strokes from a seeded branching rule of depth 3, carrying nine five-petal blossoms (24–36px) and six needle tufts between them. Idle: breathing (chest ±2% at 0.5 Hz), one ear flick every 2.5 s, blossoms swaying ±4° with lag, the tail fan swishing ±6°.
- The glow: the creature's colors wash to white from the feet up behind a rising feathered edge (0.8 s), leaving a flat silhouette #FFFBEF with a soft butter halo (a blurred copy, 30px) and a thin 3px butter rim; no interior detail except the eye shapes at 12% cream.
- The swaps: each swap morphs the silhouette between the two forms in 0.14 s: the outgoing shape squeezes to 0 width about its center line while the incoming one grows from 70% width, overshoots to 106% and settles, pinned to the ground line, with the halo swelling 20% and a thin butter ring leaving it (0 to 300px, fading over 0.5 s). Swaps at 2.30, 2.85, 3.33, 3.75, 4.12, 4.46 and 4.80 s, alternating LARCHELOPE, SPRIGGET, LARCHELOPE, SPRIGGET, LARCHELOPE, SPRIGGET, LARCHELOPE: the gaps shrink from 0.55 s to 0.34 s and never get shorter, so there are never more than three swaps in any second. Between swaps the silhouette breathes ±2%.
- The burst: at 5.1 s the white shell cracks along 28 seeded lines from the chest outward (cracks drawn as 2px cream lines over 0.1 s), then peels away as light petals: flat teardrop shards of white and butter that fly outward on curved closed-form paths, spinning and shrinking as they fade over 0.8 s, revealing LARCHELOPE in full color from the chest outward behind them. A butter shock ring expands from 0 to 900px over 0.5 s, thinning as it goes; 120 four-point sparkles (8–22px, butter and coral) burst out on ballistic paths and drift down, twinkling at most twice a second. No full-frame flash: mean frame brightness never changes by more than 20% within any 0.33 s.
- Dialog box: a rounded cream panel x 360–1560, y 900–1010, radius 18, a 4px ink border and a 4px inner butter rule; its line in Fredoka 600, 38px, ink, left-aligned at x 410, typed on at 48 characters per second; a small ink triangle at the right end bobbing 4px at 1.2 Hz when a line is complete.
- Name card (HTML over the canvas, x 1180–1760, y 230–800): a cream field-journal page with a 4px ink border, rounded 20px, a pressed-leaf watermark (a faint larch sprig at 8%) and a perforated left edge (a row of 14 punched circles). Content: "No. 047" in Fredoka 600, 24px, secondary; LARCHELOPE in Lilita One 400, 68px, ink; a 1px ink rule; type chips GROVE and WIND (rounded pills 132 × 44, Fredoka 700, 22px, cream text); rows "Height 1.4 m" and "Weight 38.2 kg" in Fredoka 500, 26px, the value right-aligned; "New move" over "Petal Gale" in Fredoka 700, 30px, with a tiny petal glyph; the stamp "ADDED TO YOUR JOURNAL" in Lilita One, 26px, coral, in a 4px coral rounded box rotated −8°, lower right of the card.
- Motion feel: everything springs (damping ratio 0.5–0.65) and settles; arrivals pre-squash; nothing moves linearly except the rays.
- Premium: two creatures with clear, appealing silhouettes and real anatomy, swaps that morph with squash and stretch and stay on the ground, a burst of light petals that reveals the color from the center outward, and life that continues after the reveal. Cheap: a clip-art blob crossfading into another, a white full-screen flash, stock sparkles, strobing.
Banned: real monster-collecting games, their creatures, names, type icons, fonts or UI (no capture balls, no dex screens), white or full-frame flashes, more than three swaps in any second, strobing, 3D rendering, gradients on the creatures (flat cel tones only; the halo is the only soft shape), photo textures, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.2s: the stage fades up from #0B201C; SPRIGGET bounces in its idle, sprout bobbing; the opening line types into the dialog box from 0.4 s.
- 1.2–2.3s: SPRIGGET stops, looks up and holds still; 180 motes spiral in toward it on closed-form inward spirals; the rays speed up to 14°/s; its colors wash to white from the feet up (1.5–2.3 s).
- 2.3–4.8s: the seven swaps, faster each time, every one with its ring; sparkles gather around the silhouette.
- 4.8–5.1s: the LARCHELOPE silhouette holds, brightening its halo 25% and swelling 3%; the dialog box clears.
- 5.1–5.6s: the burst: cracks, petals, the shock ring, the sparkle spray; LARCHELOPE appears in color, its raised foreleg coming down.
- 5.6–6.0s: it settles; the blossoms on its antlers open (each flower unfolding its petals over 0.3 s, 40 ms apart); the result line, typing since 5.3 s, is complete by 5.95 s. The 6.0 s frame is a complete composition: LARCHELOPE in full color at center, rays turning, sparkles drifting down, the result line in the box.
- 6.4–7.4s: LARCHELOPE and its shadow slide left to x 640 and scale to 0.9 on a spring as the card flips in at the right (rotateY 90° to 0° with a 1400px perspective, 0.5 s, 3% overshoot); its contents pop in 60 ms apart.
- 7.6–8.4s: the stamp lands on the card (scale 1.4 to 1 in 0.1 s with a 4% squash); LARCHELOPE tosses its head once, ears flicking.
- 8.4–10.0s: hold: idle breathing, swaying blossoms, rays turning and the last sparkles falling.
For other lengths, stretch the opening idle and the card beat; keep the swap schedule, the burst and at least 1 s of hold.
</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: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter.
- Both creatures' joints and part shapes are closed-form functions of t; the sprout, blossoms, mane and tail fan are spring chains precomputed once at load at a fixed 1/240 s step and read back by t. Each silhouette is the creature's outline filled into an offscreen canvas; the halo is that canvas blurred with ctx.filter at half resolution each frame. Motes, cracks, petals and sparkles are seeded closed-form paths. The dialog box and card are HTML over the canvas, their transforms set from seek.
</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 SPRIGGET reads as a round sprite with leaf ears, a sprout and paws, and LARCHELOPE as a fawn with four legs that have knees and hocks, two antlers with four tines each and nine blossoms; every swap morphs and stays on the ground line; there are never more than three swaps in a second; log mean frame brightness from 4.6 to 6.0 s and confirm no change over 20% within any 0.33 s; the 6.0 s frame and the final frame are both complete; the card text matches the inputs and sits clear of the creature; nothing important is within 60px of an edge. 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…