Retro Computer Boot

About this style

Home computers of the early 1980s, such as the Commodore 64, ZX Spectrum, BBC Micro and Amstrad CPC, plugged into the family television and started in seconds straight into a BASIC interpreter. The screen showed a banner, the free memory and a prompt such as READY, with a colored border around a low-resolution picture in a fixed palette. Owners typed in program listings from magazines and books, and simple graphics commands produced patterns full of jagged pixel moiré. The look lives on in the demoscene, retro games and developer branding.

Make a 10-second 1980s home computer boot: the machine powers on to its BASIC banner and memory check, a short program is typed in, and RUN draws a rainbow fan of lines under the listing.

<inputs>
If I don't give you something, use the default and don't ask.
- Computer: Moxley Micro 48 (fictional), made by Moxley Electronics.
- Banner, two lines: MOXLEY MICRO 48   BASIC 1.2 / (C) 1984 MOXLEY ELECTRONICS
- Memory: a 48K test, leaving 47104 BYTES FREE.
- Program, typed exactly, one line at a time:
  10 FOR A=0 TO 180 STEP 4
  20 INK 1+A/13
  30 DRAW 160,198,A,82
  40 NEXT A
  50 GOTO 50
  RUN
- Length: 10 seconds.
</inputs>

<direction>
- The display, exactly: a 320×200 pixel screen of 40 columns × 25 rows of 8×8 character cells, drawn into an offscreen buffer and scaled ×4 with nearest-neighbour to 1280×800 at x 320–1600, y 140–940. The border fills the rest of the stage in its own color, as these machines did. Pixels are on or off: no anti-aliasing in text or lines.
- Palette, 16 fixed inks plus the border and nothing else: 0 paper blue #1D2680, 1 red #D23C3C, 2 vermilion #E8642C, 3 orange #F08C2A, 4 amber #F4B33A, 5 yellow #F2DE52, 6 lime #A8D94A, 7 green #4FB848, 8 teal #2FA49A, 9 cyan #5CCFE6, 10 sky #6E9BF0, 11 violet #8A6CE8, 12 purple #B357C9, 13 magenta #DE5AA8, 14 pink #F29BB8, 15 white #F2F2EE. The paper is ink 0, text is yellow (5), and the border is a lighter blue #4453C9.
- Font: an 8×8 ROM-style font you define in code for A–Z, 0–9 and space . , ( ) = + / : in the 1980s manner: two-pixel-wide verticals, one-pixel horizontals, letters seven pixels tall with a blank row and column for spacing, your own drawing rather than a copy of a real machine's. Uppercase only, as on the real thing.
- Text by row: 1 and 2 the banner, 4 MEMORY TEST with its count, 5 47104 BYTES FREE, 7 READY., 8–12 the program as typed, 13 RUN. The fan draws in the empty rows below.
- The cursor: a solid 8×8 block in yellow, blinking 1.5 times a second (0.33s on, 0.33s off) while waiting, solid while typing, gone once the program runs.
- Typing: a practiced hand at 22–28 characters a second with seeded jitter, a 0.1s pause and Enter at the end of each line, the cursor dropping to the start of the next row.
- The demo, computed the way the program would: for A = 0, 4, … 180 (46 lines), ink 1 + floor(A/13) (inks 1 to 14 in order, so the fan runs red, orange, yellow, green, blue, violet, pink), a line from (160, 198) at A degrees, 82 pixels long (A = 0 points right, 90 straight up, 180 left), plotted with Bresenham's algorithm into the 320×200 buffer pixel by pixel from the center outward, 43ms per line. The crowded lines near the center leave their natural moiré: that aliasing is the charm.
- Signal: it should look like a computer feeding a TV, not a modern flat screen: a soft 2px glow on lit pixels (a blurred copy at 25% in 'screen' blend) and a faint color bleed to the right (a copy 2px right at 12%). No curvature, no scanlines.
- Motion is digital: everything appears in whole characters or whole pixels; nothing slides or fades.
- Premium: an exact 320×200 grid, a fixed palette, a listing you could actually run, and lines plotted pixel by pixel with their moiré. Cheap: a green terminal font with a glow, smooth vector lines and a typewriter effect.
- Banned: screen curvature, scanline overlays, anti-aliased text or lines, smooth motion, colors outside the palette, flashing border loading stripes, real computer names or ROM messages, lowercase text, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.3s: black: the machine is off.
- 0.3–0.5s: power on: the screen fills with seeded garbage characters in random inks.
- 0.5–0.6s: it clears to border and paper; the banner prints, one row per 30ms.
- 0.6–1.1s: MEMORY TEST counts 4K, 8K … 48K, a step every 0.04s, then OK.
- 1.1–1.4s: 47104 BYTES FREE, then READY. and the blinking cursor.
- 1.4–5.2s: the program is typed line by line, then RUN and Enter.
- 5.3–7.3s: the fan draws, red at the right sweeping up and over to pink at the left.
- 7.3–10.0s: hold: GOTO 50 keeps the machine looping, so nothing changes.
For other lengths, change the typing speed within 20–30 characters a second and the line time within 30–60ms; keep at least 1s 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. Each seek, rebuild the 320×200 buffer from t (the characters typed so far, the cursor state, the lines plotted so far), then draw it to the stage scaled ×4 with imageSmoothingEnabled false, followed by the glow and bleed passes. No web fonts are needed: the font is defined in code.
- The typing schedule is built once at load from a seeded PRNG; everything else is computed from t.
</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 the listing matches the inputs character for character, every pixel sits on the 320×200 grid at exactly ×4 with no smoothing, the cursor never blinks faster than 1.5 times a second, the fan has 46 lines in ink order ending exactly at the left, and the fan stays clear of the RUN line. 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

Terminal Developer Launch

Made by us

A terminal types a deploy command with a human rhythm, output streams with spinners and a progress bar, then every glyp…

Code Editor Ghost Text

Made by us

A dark code editor in an original pink-and-lilac theme: dimmed ghost text suggests a function body, two Tab presses acc…

Sorting Algorithm

Made by us

Quicksort replayed honestly on a deep teal stage: 24 cream bars, an amber pivot with a dashed level line, pointers walk…

Git Branch Graph

Made by us

A light desktop history view on a lilac backdrop: commits land one by one at the top of a lane graph, a feature branch…