Teletext Page

About this style

Teletext was developed in Britain in the early 1970s, and the BBC's Ceefax service began in 1974, followed by similar services across Europe. Pages of text and blocky mosaic graphics rode hidden lines of the broadcast TV signal: a viewer keyed in a three-digit page number and watched the header count until that page came round in the cycle. Its 40-column grid, eight saturated colors, 2 × 3 block graphics and color-coded link row gave it a look of its own. Ceefax closed in 2012, but artists and designers still make teletext art and borrow its grid.

Make a 10-second teletext sequence: a page number is keyed in, the header counts through the broadcast cycle until the page arrives, a weather page of mosaic graphics paints in row by row, and it turns to its second subpage.

<inputs>
If I don't give you something, use the default and don't ask.
- Service: OPALTEXT (fictional). Page: 302, WEATHER, two subpages.
- Header date and clock: THU 14 MAR, starting at 19:42:07.
- Map: the fictional Carrow Isles, three islands with four towns: NORTHPORT, ELLAN BAY, BRANSEY, SKERRIN. Today 13, 11, 12, 9; tonight 6, 4, 5, 3 (degrees C).
- Subpage 1/2: "TODAY: BRIGHT SPELLS. A FEW SHOWERS IN THE WEST LATER. LIGHT WINDS." Subpage 2/2: "TONIGHT: CLEAR SPELLS. LOCAL MIST BY DAWN. MIN 3C."
- Ticker: "FERRY TIMES CHANGE FROM MONDAY - P410 - LANTERN FESTIVAL SATURDAY - P520 -"
- Link row: NEWS, SPORT, TRAVEL, TV.
- Length: 10 seconds.
</inputs>

<direction>
- The display: a television showing teletext full screen, a black field holding a page of 40 columns × 25 rows. Each cell is 32×36 stage pixels, so the page is 1280×900 at x 320–1600, y 90–990. A soft 1.5px glow on every lit pixel and a faint glass vignette (corners 10% darker), as on a TV. No curvature, no scanlines.
- Colors: only the eight teletext colors at full strength: black #000000, red #FF0000, green #00FF00, yellow #FFFF00, blue #0000FF, magenta #FF00FF, cyan #00FFFF, white #FFFFFF.
- Characters: a 5×9 dot font you define in code for A–Z, 0–9 and space . , : / - ' ( ), set in a 6×10 dot cell (each dot about 5.3 × 3.6 stage pixels, drawn as rectangles snapped to whole pixels). Where two dots meet only at a corner, fill a small wedge in the joint: the character rounding that made teletext diagonals look smooth. Uppercase only. Double height stretches a row's characters over two rows.
- Mosaics: a graphics cell is a 2 × 3 grid of blocks (sextants), contiguous, in the cell's foreground color.
- Attributes, the rule that makes it real: color, graphics and background changes are control codes that each take up one cell and show as a space, so every change of color costs a blank cell, and a background runs from its code to the end of the row or the next code.
- Page layout, by row:
  - 0, the header: P302 in white at the left as typed, then OPALTEXT and the page number currently passing, then THU 14 MAR and the clock in yellow, as in "P302  OPALTEXT 302  THU 14 MAR 19:42:07";
  - 1–3: a blue band with WEATHER in big yellow mosaic letters (each letter 4 cells wide including its gap, 3 rows tall) and 1/2 in white at the right;
  - 5–17, columns 1–22: the map: blue sea cells, the three islands in green mosaics with ragged coasts, a white sextant dot for each town with its name in white and its temperature in double height, black on yellow; a yellow mosaic sun, a white cloud and cyan rain marks offshore;
  - 5–17, columns 24–39: the forecast in white, wrapped to 15 columns, with key words in cyan;
  - 19: SUNRISE 06:12  SUNSET 18:31 in cyan;
  - 20: MORE AT P303 - 5 DAY OUTLOOK in green;
  - 22: the ticker, white on a red background;
  - 24: the link row: NEWS in red, SPORT in green, TRAVEL in yellow, TV in cyan, spaced across.
- Arrival: P shows first, then the three digits are keyed in; the header's page number counts through the cycle (about 8 changes a second, never more) until 302 comes round; then the page paints row by row, top to bottom, 40ms per row, each row appearing whole.
- Subpage: at the flip, the indicator turns to 2/2 and only the rows that change repaint, top to bottom: the forecast text, the four temperatures (tonight's), and the sun turning into a yellow crescent moon.
- Ticker: moves left one whole cell at a time, 8 cells a second, its start solved so it comes to rest at 8.6s with LANTERN FESTIVAL SATURDAY - P520 whole on the row.
- Clock: the seconds step once a second from 19:42:07.
- Motion is digital: whole cells only, no fades, no smooth movement.
- Premium: a real 40 × 25 grid, eight pure colors, mosaic graphics built from 2 × 3 blocks and color changes that cost a cell. Cheap: a pixel font on a gradient under a CRT filter.
- Banned: colors outside the eight, gradients, smooth scrolling, anti-aliased type, the flashing attribute, scanlines or screen curvature, real teletext service names, real places or real maps, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.3s: black; the header appears with P and the clock.
- 0.3–0.9s: 3, 0 and 2 are keyed in, 0.2s apart.
- 0.9–2.2s: the header counts through the cycle and lands on 302.
- 2.2–3.2s: the page paints row by row.
- 3.2–6.2s: the page holds; the ticker starts stepping at 3.2s; the clock ticks.
- 6.2–6.7s: subpage 2/2 arrives and the changed rows repaint.
- 6.7–8.6s: the ticker runs on and comes to rest.
- 8.6–10.0s: hold; only the clock ticks.
For other lengths, stretch the holds; keep the ticker's stop at least 1s before the end.
</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. Hold the page as a 40 × 25 array of cells (character or mosaic, foreground, background, double height) rebuilt from t each seek, and draw it cell by cell; pre-render each glyph and mosaic pattern in each color once at load. No web fonts are needed: the font is defined in code.
- The header count, the paint order, the ticker offset (floor of elapsed time × 8) and the clock are all 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 every character and block sits on the grid, only the eight colors appear, each color change takes up a blank cell, the islands read as mosaic coastlines, the header count changes no more than 8 times a second, the ticker moves only in whole cells, and the 6s frame shows the complete first subpage. 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…

Cut-Paper Title Sequence

Made by us

A jazz-tempo film title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat,…

Split-Flap Departure Board

Made by us

A mechanical station departure board where every flap steps through its drum to land on times, destinations and statuse…

Swiss Grid Typography

Made by us

A Swiss-style event poster that builds itself on a visible 12-column grid: grotesque type rises out of baseline masks,…