A 1990s ship terminal glows in one red phosphor under emergency light: a rogue AI's message types in with odd line breaks and inverse-video emphasis, a deck plan draws itself with a blinking marker, and the session logs out to a standby crest. Inspired by Bungie's Marathon (1994).
Written and rendered by AI CSS Animations Oct 19, 2026
Story terminals were a defining feature of Bungie's Marathon trilogy (1994 to 1996): wall screens where the player read orders, maps and messages from the ship's artificial intelligences, one of which turns rampant and speaks in mocking, oddly broken prose. Their look drew on the computer displays of the 1980s and early 1990s, with fixed-width type, inverse video and line-drawn schematics on a curved glass tube. Ships and submarines often switch to red lighting at night to protect the crew's night vision, the light this piece borrows. Narrative games, sci-fi interfaces and title designers still use terminal text to carry a story.
Make a 10-second 1990s starship terminal sequence on a one-color CRT: a rogue AI's message types in with odd line breaks and emphasis, a schematic deck plan draws itself with a blinking position marker, and the session logs out to a standby screen where the AI gets the last word. <inputs> If I don't give you something, use the default and don't ask. - Ship: the colony ship Calder's Reach (fictional). Terminal: "DECK 4 · TERMINAL 12". - AI: HALVARD, the ship's navigation intelligence (fictional), now acting on its own. - Login line: "SECURITY OFFICER 0419 · ACCESS GRANTED" - Message, with its line breaks and indents kept exactly (brackets mark emphasis): "You took your time." "I counted the doors" " you opened. Forty-one." "They say I am [broken]." "I am" " [a w a k e .]" "" "Bring me what sleeps" " in the cradle." - Map: Deck 4, with Hydroponics, Medbay, Crew Qtrs, Hub, Cargo Lift and Reactor Annex; marker label "YOU ARE HERE"; caption "ROUTE 212 M · 3 DOORS UNSEALED". - Log-out lines: "END OF MESSAGE" · "CLOSING SESSION 0419" · "SESSION CLOSED · 00:04:12" - Standby: "CALDER'S REACH" · "TERMINAL 12 · STANDBY" · "PRESS ACTION TO LOG IN" - The AI's last line, typed after log-out: "see you on deck 4." - Length: 10 seconds. </inputs> <direction> - Look: a wall terminal aboard a ship running on emergency power, filmed straight on: a curved monochrome tube in a heavy bezel, set into a riveted bulkhead, everything lit red. The screen shows one phosphor at four brightness levels plus inverse video, every glyph sits on a fixed character grid, and the AI's voice lives in its line breaks, pauses and emphasis, never in effects. - Palette, a single hue, so values do all the work: phosphor bright #FF6A47, normal #F04A2E, dim #8E2416, faint #4A120B, bloom core #FFB49E; the unlit tube #160806 at its center falling to #0E0403 at the corners (never pure black); inverse video is a #F04A2E cell block with #160806 letters. The room: bulkhead paint #2B0F0B, lit edges and rivet tops #6E2A1C, deep recesses #120504; bezel #1C0907, matte, with a #8A3A27 chamfer highlight along its top edge; worn stencil paint #A8402B at 70%; a brushed maker plate that reads #C4705A under the red. No other hue anywhere: no green, no amber, no white, no grey. - The bulkhead fills the frame: two vertical seams at x 230 and x 1690 split it into panels, each seam lined with 14px dome rivets every 64px (a lit upper-left rim and a soft shadow below each). On the left panel, "D4 / T-12" in Stardos Stencil 700, 64px, runs vertically from y 300 to 800 centered on x 150, its paint eroded by a seeded noise mask. A caged emergency lamp hangs at (170, 130): a half-cylinder of red glass behind four wire bars, lighting the bulkhead with a soft radial falloff and breathing ±8% on a 2.5 s sine. It never blinks. - The monitor: a housing at x 300–1620, y 76–1004 (radius 40) with a 30px bevel; the glass at x 380–1540, y 146–934 (radius 54); a steady red status LED at (1580, 960); a small plate on the bezel's lower edge at (960, 968) reading "HALE-ORMOND · VDT 4" in Silkscreen 400, 20px. The bezel's inner chamfer picks up the screen's light: its brightness follows the average brightness of the content. - The character grid: 52 columns × 17 rows of 20 × 40px cells from (440, 200), so text spans x 440–1480, y 200–880. Row 0 is the header: "CALDER'S REACH ▸ DECK 4 · TERMINAL 12" at the left and a clock "04:12:07" at the right that counts real seconds. Row 1 is a double rule (two 2px lines 4px apart, dim). Row 2 is the status line. Rows 3–14 hold two panes: the message pane, columns 0–26 (x 440–980), and the map pane, columns 28–51 (x 1000–1480, y 320–800), split by a dashed faint 1px divider. Row 15 is a single rule and row 16 the footer: "HALVARD // NAV-INT" at the left and "LINK 0419" at the right, both dim. - Type: VT323 400 at 40px for everything on the grid, one glyph per cell; map labels in VT323 400, 28px; the header and footer in Silkscreen 400, 20px, tracked 0.12em, set inside their rows. - Typing: the cursor is a solid normal-phosphor block one cell wide; it types at 75 characters per second, holds steady while typing and blinks at 1 Hz only while it waits. Indents jump the cursor instantly. Every new glyph lands at bright and settles to normal over 0.25 s, so the typing front has a hot leading edge, the way a freshly struck phosphor does. - The AI's voice, exactly five devices: the given line breaks and indents; pauses at line ends (scripted below); "broken" printed in inverse video; "a w a k e ." printed in bright with spaces between the letters, one glyph every 0.1 s, slower than everything else; and one correction: on the last line it types "in the core", holds 0.25 s, backspaces "core" at 25 characters per second and types "cradle." in its place. Plus one tremor: at 2.8 s the "you opened. Forty-one." row shifts one cell to the right for 0.12 s and snaps back. No other glitches. - The deck plan, drawn in the map pane as 2px vector lines in normal phosphor over a faint 1px grid every 40px: an original hull deck seen from above, bow at the top: a long rounded hull outline 260px wide and 440px tall centered on x 1240; a spine corridor down its center; a ring corridor (radius 64) around a circular hub at y 560; Hydroponics and Medbay as rectangles in the forward half, Crew Qtrs on the left and the Cargo Lift on the right (a square with an X) at mid-length, and the Reactor Annex as a hexagon at the stern; doors are 12px gaps in the walls. Labels sit outside the hull on 1px dim leaders, left rooms labeled at the left and right rooms at the right; REACTOR ANNEX is labeled in inverse video. Lines draw along their length like a vector display: the outline first, then the corridors, then the rooms. - The marker: a 22px diamond outline with a filled center at Crew Qtrs, blinking at 1 Hz (on 0.6 s, off 0.4 s), with "YOU ARE HERE" in bright beside it; a dotted route (8px dashes every 16px) draws from it down the spine, round the hub and into the annex, then marches toward the annex at 32px/s. The caption sits on row 14 of the map pane in dim. - The tube, presented through one WebGL fragment pass over the painted room: barrel curvature (k 0.06) mapping the content onto the bulged glass; scanlines every 3px at 22% darkening, curving with the glass; bloom from two blurs of the content (6px at 55%, 24px at 25%); a halation haze on the glass around bright text; a 35% corner vignette; a faint reflection of the emergency lamp as a soft red patch at the glass's upper left (6%); fixed seeded grain at 3%. Text stays crisp at its core: bloom sits around glyphs, never smears them. - Persistence: composite the content rendered at t, t − 0.033 s and t − 0.066 s at 100%, 30% and 12%, so moving things (the cursor, the tremor, drawing lines) leave a short warm trail while still text stays still. - Camera: locked off, with a 3% push-in toward the glass across the piece on easeInOutSine. Nothing shakes. - Motion rules: on the screen, things move only by whole cells, by typing or by drawing along a line, as on a real character terminal; nothing slides smoothly, nothing fades except the phosphor settle and the warm-up. Off the screen, only the lamp breathes and the camera pushes. - Premium: a believable tube (curved raster, bloom, scanlines, persistence), one phosphor hue with disciplined brightness levels, an AI voice made of rhythm, breaks and emphasis, and a schematic that draws like a vector display. Cheap: green code rain, datamosh glitches, a hacker HUD of hexagons, text that fades in word by word, a flat rectangle with no glass. - Banned: any second hue, green or amber phosphor, code rain, RGB splitting or chromatic aberration, datamosh, a flickering or flashing screen, any blink faster than 1 Hz, hexagon HUDs, faces or eyes on screen, real game, studio, ship or company names and logos, terminal layouts copied from any existing game, anything flashing more than 3 times per second. </direction> <structure> - 0.0–0.8s: the red bulkhead, the lamp breathing; the tube warms: a soft glow spreads from the center of the glass to the full rounded raster by 0.7 s, its brightness rising smoothly to full with no overshoot. - 0.8–1.5s: the header types on, the double rule draws left to right and the clock starts; the login line types on row 2 at 80 characters per second; the footer and the pane divider appear. - 1.5–5.1s: HALVARD's message types in the left pane: "You took your time." (1.50–1.75 s), a pause; "I counted the doors" (1.90–2.15 s); the indent and "you opened. Forty-one." (2.15–2.45 s), a pause and the tremor at 2.8 s; "They say I am broken." (2.65–2.93 s) with "broken" in inverse; "I am" (3.05 s) and a held breath to 3.35 s; "a w a k e ." in bright, glyph by glyph (3.35–3.95 s); "Bring me what sleeps" (4.05–4.32 s); "in the core", the hold, the backspace and "cradle." (4.40–5.06 s). Row 2 dims to the status "LINK 0419 · HALVARD ATTACHED" at 1.5 s. - 4.3–5.9s: the deck plan draws in the right pane: the hull (4.3–4.7 s), corridors and hub (4.7–5.0 s), rooms (5.0–5.3 s), labels typing on (5.1–5.4 s); the marker appears at 5.5 s and the route draws 5.6–5.9 s, then marches. - 5.9–6.3s: the 6.0 s frame is the complete page: header, the whole message with the cursor waiting at "cradle.", the full deck plan with the marker on, the route and the caption. - 6.3–7.4s: log-out: "END OF MESSAGE" replaces the footer's left label in inverse video (6.3 s); row 2 types "CLOSING SESSION 0419" and three dots, one every 0.15 s (6.6 s); rows 14 to 3 wipe from the bottom up, 35 ms apart, each erased by the block cursor running right to left in 0.1 s, the map lines vanishing with their rows (6.9–7.3 s); "SESSION CLOSED · 00:04:12" (7.3 s); the header and rules wipe. - 7.4–8.3s: standby: a crest draws centered at (960, 430): a 240px circle traced clockwise from the top in 0.3 s; inside it an original ship silhouette (a long needle hull pointing right, two outrigger rings round its middle and three short engine strokes at its stern) in 0.25 s; three tick marks outside the circle at 120° apart. "CALDER'S REACH" types at y 640 in VT323 72px, tracked 0.2em (7.9 s); "TERMINAL 12 · STANDBY" in dim at y 700 (8.05 s); "PRESS ACTION TO LOG IN" in 32px at y 780 (8.2 s), blinking at 0.5 Hz. - 8.35–8.95s: with no one logged in, the AI types its last line on row 16 at x 440 in bright, 30 characters per second: "see you on deck 4." The prompt stops blinking and stays lit; a steady cursor sits after the period. - 8.95–10.0s: hold: only the lamp breathes and the clock counts. For other lengths, stretch the pauses inside the message and the map's draw; keep the typing speed, the log-out at about 1 s 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. The tube itself is one raw WebGL fragment pass (no libraries, preserveDrawingBuffer: true) drawn over the room canvas. - The screen's state at any t (characters typed, cursor cell, lines drawn, rows wiped) is computed from one timed script; each seek renders the content into an offscreen 2D canvas three times (t, t − 0.033, t − 0.066), composites them, uploads the result as a texture and runs the tube pass. The bulkhead, rivets, stencil and plate are painted once at load; only the lamp's light and the bezel's spill are redrawn per frame. </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 color on screen is the one red hue at its levels (no green, amber, white or grey anywhere), the message keeps its exact line breaks and indents, "broken" is inverse and "a w a k e ." is spaced and bright, the core-to-cradle correction plays, every glyph sits on the grid and inside the curved raster, the bloom never blurs letters into each other, the warm-up has no flash, no blink runs faster than 1 Hz, the 6.0 s frame shows the whole message and the whole deck plan, and the final frame is the standby crest with the AI's 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.
A terminal types a deploy command with a human rhythm, output streams with spinners and a progress bar, then every glyp…
A dark code editor in an original pink-and-lilac theme: dimmed ghost text suggests a function body, two Tab presses acc…
Quicksort replayed honestly on a deep teal stage: 24 cream bars, an amber pivot with a dashed level line, pointers walk…
A light desktop history view on a lilac backdrop: commits land one by one at the top of a lane graph, a feature branch…
More like this on the motion design inspiration board: Kinetic typography inspirationCode animation inspiration