16-Bit Pixel Art Promo

About this style

Pixel art comes from the hardware limits of early computers and consoles, where every sprite was placed pixel by pixel within a small fixed palette. The 16-bit era of the early 1990s, the years of the Super Nintendo and the Sega Genesis, is the look most people mean by retro games: side-scrolling levels, chunky outlines and a few frames of animation per move. Independent games revived the craft, and brands now borrow it for promos because it signals play, nostalgia and handmade care. Framing a product as a level turns features into platforms and goals, so progress is easy to read. It works when the pixel grid is never broken, the palette stays fixed, sprites move on a few hand-made frames and the camera scrolls in whole pixels.

Make a 10-second 16-bit pixel art product promo: Pip, a small mole in a yellow hard hat, runs through a task app built as a side-scrolling game level, stomping a bug on a task card, ticking tasks as he lands on them, springing off a toggle, crossing a progress bar bridge and ground-pounding the ship button, then the title drops in.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Burrowboard, a task board for small teams (fictional). Mascot: Pip, a mole in a yellow hard hat with a lamp.
- Tasks (platforms): "LOGIN BUG" (bug), "DARK MODE" (feature), "CSV EXPORT" (chore).
- HUD: "PIP x3", "TASKS 09/12" rising to "TASKS 12/12", "★ 0120" rising to "★ 0170".
- Toggle springboard: "AUTO-ASSIGN". Progress bridge: "SPRINT 14", 70% → 100%. Goal: a "SHIP v2.0" button and a flag reading "v2.0".
- Start banner: "SPRINT 14 - GO!"
- Title: "BURROWBOARD" · tagline "EVERY SPRINT, A LEVEL UP." · prompt "PRESS START", which becomes "START FREE ▶".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a polished 16-bit platformer from the early 1990s, but its world is a task app: task cards are platforms, a toggle is a springboard, a progress bar is a bridge, and the ship button is the goal. A fixed palette, clean 1px dark outlines, light from the top-left, hand-authored sprite frames, and a camera that scrolls in whole pixels. Charming and exact, never a filter over vector art.
- The grid: draw everything on a native 480 × 270 canvas and scale it 4× with nearest-neighbor to 1920 × 1080 (imageSmoothingEnabled false, CSS image-rendering pixelated). Every position, scroll offset and sprite frame snaps to whole native pixels. Nothing is drawn at a finer resolution, text included.
- Palette, 24 colors, nothing else: outline #1B1A2E; deep shadow #2E2C4A; shade #4A4878; cream #F7F1E3; cream shade #E3D9C4; cream dark #C2B59B; sky #7BC6F2, sky light #B9E3F7, sky haze #E6F6FC; green #3E8E5E, green light #66C27C; yellow #F2C14E, yellow shade #D9902B, lamp #FFF0A8; red #E8574A, red shade #A8352E; fur #6B5446, fur light #8E7462, fur dark #4A3A31; pink #F29BAB; blue #3B6FD9, blue shade #2A4FA8; highlight #FFFFFF; UI grey #8C93A8.
- Type: Press Start 2P 400 at 8px native for the HUD, banners and prompts, and at 16px native for the title; Silkscreen 400 at 8px native for labels on cards, the bridge and the button. Render each string at load into a small offscreen canvas at native size, threshold its alpha (at least 50% becomes the color, anything less transparent), add a 1px outline in #1B1A2E where needed, and cache it, so every letter sits on the pixel grid. The ★ and ▶ are 7 × 7 pixel icons drawn from the palette, never font glyphs.
- Pip (16 × 16 sprite, facing right): a round body in fur with a fur-light belly and fur-dark underside, a pink nose that pokes forward, tiny pink paws and feet, a one-pixel #1B1A2E eye, a yellow hard hat with a yellow-shade brim and a 2 × 2 lamp at its front, all with a 1px outline. Frames, authored as string grids in the code: idle (2 frames at 2 fps, a 1px bob), run (4 frames at 12 fps), jump up, fall, land squash (4 frames, 0.08 s), ground-pound (curled, hat first) and cheer (2 frames at 6 fps, paws up in turn).
- The world, native pixels, 1320 wide, ground top at y 230:
  - Sky in three flat bands: sky from y 0 to 90, sky light from 90 to 170, sky haze below. A far layer at 0.25× parallax: clouds shaped like rounded app cards in sky haze with a sky-light bottom shade and three grey "text line" pixels. A mid layer at 0.5×: three column signboards on posts, "TO DO", "DOING" and "DONE", cream shade with UI grey letters.
  - Ground: 16 × 16 tiles like a toolbar: a 3px cream top, cream-shade face, a cream-dark seam every 16px and an outline along the top edge. A pit from x 760 to 960, deep shadow inside.
  - Task cards (platforms), 80 × 22: cream with an outline, a 3px strip on the left (red for bug, blue for feature, green for chore), a 7 × 7 checkbox near the right end and a Silkscreen label: "LOGIN BUG" at (100, 180), "DARK MODE" at (220, 150), "CSV EXPORT" at (340, 120) (top-left corners).
  - The bug: a 10 × 8 beetle in red with red-shade legs and an outline, walking back and forth on "LOGIN BUG" on 2 leg frames at 8 fps.
  - The toggle springboard: a 28 × 14 pixel switch at (556, 214), UI grey track with a cream knob and the label "AUTO-ASSIGN" above it.
  - Stars: five 7 × 7 yellow stars with a yellow-shade edge at x 600, 630, 660, 690 and 720, placed on Pip's launch arc.
  - The bridge: the progress bar, 200 × 10 at x 760–960, y 226, an outline frame with ten 18px segments, seven green-light at first, and "SPRINT 14 70%" in Silkscreen above it.
  - The goal: a pedestal block at x 1060–1140 (top at y 206) with the "SHIP v2.0" button on it (64 × 18 at x 1068–1132, red with a red-shade base, cream label); a flagpole at x 1170 from y 230 up to y 110 with a furled green flag.
  - HUD, fixed to the screen: "PIP x3" with an 8px mole-head icon at the top-left (8, 8); "TASKS 09/12" centered at the top; "★ 0120" right-aligned at x 472; all Press Start 2P 8px, cream with an outline.
- Pip's run, solved as a script of runs and parabolic jumps between the listed points (feet position; each apex is given above the higher end), running at about 180px/s unless stated:
  1. idle at x 40 on the ground until 0.55 s, then run to x 92 (0.84 s);
  2. jump to x 120 on "LOGIN BUG" (apex 40px), landing on the beetle at 1.16 s: a stomp, then a 14px rebound hop to x 134 (1.34 s);
  3. run to x 164 (1.51 s), jump to x 250 on "DARK MODE" (apex 30px, lands 1.85 s);
  4. run to x 286 (2.05 s), jump to x 370 on "CSV EXPORT" (apex 28px, lands 2.37 s);
  5. run to x 410 (2.59 s), hop down onto the toggle at x 570 (apex 20px, lands 2.97 s);
  6. the toggle snaps on and launches him to an apex at y 80, through the five stars, landing at x 770 on the bridge (3.62 s);
  7. run across the bridge at 240px/s to x 960 (4.41 s), then on the ground to x 1030 (4.70 s);
  8. a high jump (apex y 140) onto the button at x 1100, landing in the ground-pound pose at 5.02 s, then cheering on it.
- Events: the bug squashes flat and pops into a 6-pixel puff with "FIXED!" rising 10px in green (1.16 s); each card's checkbox ticks green as its task completes (1.18, 1.87, 2.39 s), with a "+1" rising 12px from the card, and TASKS steps 10, 11, 12; each star pops into "+10" as Pip touches it and ★ counts up by 10; the toggle's knob slides right in 0.08 s and its track turns green light; the bridge's last three segments light as his feet pass and the label steps 80%, 90%, 100%; the button sinks 3px; the flag rises up the pole (5.05–5.45 s) and unfurls "v2.0"; 32 confetti pixels (2 × 2, palette colors) burst up from the button with gravity and drift and land on the ground, where they stay.
- Camera: x = Pip's x minus 200, clamped to 0–840, smoothed as the average of that target over the previous 0.25 s (from the precomputed path) and rounded to whole pixels; vertical locked. From 4.9 to 5.4 s it eases to x 840 and stays, framing the end of the bridge, the pedestal, Pip and the flag.
- Title: "BURROWBOARD" in Press Start 2P 16px, cream with a 1px outline and a 2px blue drop shadow, centered at native y 52, dropping in from above the screen and bouncing twice in whole-pixel steps (5.30–5.70 s); the tagline in 8px at y 76 (5.60 s); "PRESS START" in 8px at y 104 (5.75 s).
- Premium: one clean pixel grid, a fixed palette, outlines that read, sprites with personality on few frames, the app's parts recognizable as level pieces, a camera that scrolls in whole pixels, hits that land with a squash. Cheap: blurry upscaled pixels, mixed pixel sizes, gradients, anti-aliased text, smooth sub-pixel motion, a generic plumber or hedgehog lookalike.
- Banned: anti-aliasing, gradients, sub-pixel positions, colors outside the palette, text not on the pixel grid, screen shake, real game characters, consoles or studios, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–0.55s: the level at its start, Pip idle; "SPRINT 14 - GO!" in 16px at the center from 0.10 to 0.55 s.
- 0.55–2.6s: Pip runs and climbs the three task cards: the stomp and "FIXED!" at 1.16 s, a tick on each card, TASKS 09 → 12.
- 2.6–3.7s: the hop onto the toggle, the launch through the stars (★ 0120 → 0170), the landing on the bridge.
- 3.7–4.7s: the run across the bridge as its last segments light (70% → 100%), then on to the pedestal.
- 4.7–5.8s: the high jump and ground-pound on "SHIP v2.0" (5.02 s); the flag rises; the confetti bursts; the camera settles; the title, tagline and "PRESS START" arrive.
- 5.8–6.3s: hold. The 6.0 s frame is the hero: Pip cheering on the button, the raised flag, confetti falling, the HUD at TASKS 12/12 and ★ 0170, the title, tagline and "PRESS START", all on the pixel grid.
- 6.3–7.6s: "PRESS START" blinks at 1 Hz (on 0.6 s, off 0.4 s); Pip keeps cheering; the confetti settles on the ground.
- 7.6–8.4s: a pixel hand cursor slides in on whole pixels and clicks "PRESS START" (8.0 s); it becomes "START FREE ▶" in a cream box with an outline and stops blinking; Pip turns to the camera and goes to idle.
- 8.4–10.0s: hold, everything still (Pip on his first idle frame).
For other lengths, keep the run speed and jump arcs and stretch the holds; keep 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: one 480 × 270 offscreen canvas repainted from scratch every frame, then drawn 4× with smoothing off onto the visible 1920 × 1080 canvas (backing store sized from CSS size × devicePixelRatio). Canvas won't fetch fonts itself, so the awaited loads matter; build the thresholded text bitmaps only after they load.
- Precompute Pip's path at load at a fixed 1/240 s step (positions, frame names, event times), and the camera from it; seek reads them. Sprite frames are string grids mapped to palette indices. Confetti is closed-form ballistic motion with a floor.
</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 that every pixel sits on the 4× grid (no blur, no half pixels, no anti-aliased text); only palette colors appear; Pip reads as a mole in a hard hat and his feet land exactly on platform tops; the cards, toggle, bridge and button read as pieces of a task app; the HUD numbers match the events (TASKS 12/12, ★ 0170); the 6.0 s frame shows Pip on the button, the flag, the HUD, the title, tagline and "PRESS START"; and the final frame shows "START FREE ▶", still. 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

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…