# FUI and sci-fi screen generator

Film screen graphics as a loop: big reads over a machine log, your photo or video scanned into nodes and hairlines, or your sound on the screen’s instruments.

Open the generator: https://morph.ogeny.app/fui/

## Design choices

- **Treated photography** (`image.treated-photo`): Duotone, high-contrast or posterised photographs. “Screen”: Photo or video. https://stylogeny.com/design-choices/treated-photography/
- **Diagram & data** (`image.diagram`): Charts, maps, isotypes, technical drawings. “Screen”: Sound. https://stylogeny.com/design-choices/diagram-and-data/
- **Layered information** (`space.layered-information`): Several reading levels: headline, deck, captions, data. Set by “Layered information”. https://stylogeny.com/design-choices/layered-information/
- **Condensed display** (`type.condensed-display`): Tall, narrow, heavy letters for impact. “Typeface”: Condensed. https://stylogeny.com/design-choices/condensed-display/
- **Wide letterspacing** (`type.wide-tracking`): Airy, generously spaced letters, usually capitals. “Typeface”: Extended. https://stylogeny.com/design-choices/wide-letterspacing/
- **Bitmap & pixel** (`type.pixel`): Letters constructed on a pixel grid. “Typeface”: Pixel. Measured on the opening picture: edges that run straight across or down 50% with “Pixel”, 43% with “Condensed”, 42% with “Extended” and 44% with “Monospace”. https://stylogeny.com/design-choices/bitmap-and-pixel/
- **Monospace** (`type.monospace`): Fixed-width typewriter or code letterforms. “Typeface”: Monospace. https://stylogeny.com/design-choices/monospace/
- **Halftone & Ben-Day dots** (`surface.halftone`): Dot screens made visible. Set by “Halftone & Ben-Day dots”. https://stylogeny.com/design-choices/halftone-and-ben-day-dots/
- **Line illustration** (`image.line-illustration`): Outline drawing, engraving, pen and ink. “Halftone & Ben-Day dots”: Contour lines. https://stylogeny.com/design-choices/line-illustration/
- **Rules & bars** (`ornament.rules-bars`): Thick bars, lines and dots as structural accents. “Halftone & Ben-Day dots”: Scanlines. https://stylogeny.com/design-choices/rules-and-bars/
- **Geometric primitives** (`form.primitives`): Circle, square and triangle as building blocks. Set by “Geometric primitives”. https://stylogeny.com/design-choices/geometric-primitives/
- **Radial & concentric** (`layout.radial`): Elements radiate from, or orbit around, a centre. Set by “Radial & concentric”. https://stylogeny.com/design-choices/radial-and-concentric/
- **Fluorescent & neon** (`color.neon`): Day-glo inks and RGB brights. Set by “Fluorescent & neon”. https://stylogeny.com/design-choices/fluorescent-and-neon/
- **Glitch** (`surface.glitch`): Corrupted pixels, scanlines, compression artefacts. Set by “Glitch”. https://stylogeny.com/design-choices/glitch/
- **Dark ground** (`color.dark-ground`): Light elements on black or deep fields. Always. https://stylogeny.com/design-choices/dark-ground/
- **Single focal point** (`space.single-focal`): One unmistakable point of entry. Always. https://stylogeny.com/design-choices/single-focal-point/
- **Motion & broadcast** (`medium.motion`): Animated, time-based work: titles, broadcast, video. Always. https://stylogeny.com/design-choices/motion-and-broadcast/
- **Technological & futurist** (`tone.technological`): Speed, machines, progress and the future. Always. https://stylogeny.com/design-choices/technological-and-futurist/

## How it works

- One read, centred and large, over a dim log that prints line by line: every screen has a single thing to grasp, and everything else is texture round it.
- The loop is a sequence, not a wave: up to three reads cut in with a torn-signal burst, the screen cuts in close on the boxed label, and the first read types back in, so the reel ends where it began.
- Light drawn on darkness: a phosphor halo, two colour fringes, scanlines and an aperture grille, all vector shapes that enlarge with the close-up.

It never does:

- No targeting reticles, faces or surveillance feeds, and no event in the log presented as real data: the lines are generic machine events. The photo scan detects no faces or people and marks only edges, with no crosshair in a ring, and its labels name nothing: an index and a position.
- No flicker: each burst is three still states a tenth of a second long, bursts are at least a second apart, the log steps once per line and the live dot blinks once a second.
- No copy of a film’s screens or of any brand’s reel: the defaults are a generic signal message, and the face, log and instruments are the generator’s own.

## Controls

- `picture` Screen (reel | scan | scope; default reel): A reel of big reads over a log; a photo or video read by the screen and redrawn as nodes and hairlines; or a sound on the screen’s instruments. Your files stay on your device.
- `read` First read (default "Signal / acquired"): The big line the screen is about. A slash breaks the line. It types in at the end of the loop.
- `then` Second read (default "Stand by / for contact"): Cuts in after the first. Leave it empty to skip it.
- `last` Third read (default "Open channel 7"): The last read, before the close-up. Leave it empty to skip it.
- `chip` Label (default "Friday 21:00"): The boxed line under the read (a date, a time, a place); the screen cuts in close on it. Empty: no label and no close-up.
- `log` Layered information (signal | agents | growth | build | off; default signal): What the log behind the read reports, line by line.
- `face` Typeface (condensed | extended | pixel | mono; default condensed): The face of the read. Pixel: Measured on the opening picture: edges that run straight across or down 50% with “Pixel”, 43% with “Condensed”, 42% with “Extended” and 44% with “Monospace”.
- `print` Halftone & Ben-Day dots (dots | pixels | contours | scanlines | off; default dots): How the screen prints the photo under its analysis: dots sized by tone, a one-bit dither, lines of equal tone, or lines weighted by tone.
- `marks` Geometric primitives (mixed | circle | square | diamond | cross | bracket; default mixed): The mark on each node. Nodes sit on the photo’s strongest edges and grow with their strength; the strongest few are drawn larger in the second colour.
- `links` Diagram & data (delaunay | proximity | chain | orthogonal | off; default delaunay): How hairlines join the nodes: a triangulation, each to its nearest three, along the edge each sits on, or in right-angled steps.
- `nodes` Nodes (0–1, default 0.55): How many nodes the scan finds: few and far apart, or many and close.
- `curtain` Curtain (0–1, default 0.45): Hairlines falling from the strong edges, fading as they fall. At 0, none.
- `scope` Radial & concentric (rings | bars | trace; default rings): How the screen shows the sound: three rings of spokes, three strips of bars, or three pen traces, for its low, middle and high bands. A playhead runs through the loop.
- `react` Sound moves (all | marks | links | curtain | print; default all): What the sound moves. The low band swells the marks and the print, the middle draws the links in and out, and the high band stretches the curtain.
- `response` Response (0.1–1, default 0.8): How strongly the sound moves it.
- `effect` Effect (sweep | pulse | rain | parallax | drift | swell | tear | still; default sweep): How the scan moves over the loop. Each starts from the same still picture.
- `glow` Fluorescent & neon (0–1, default 0.6): The phosphor halo round the letters and the light behind the read.
- `screen` Tube (0–1, default 0.6): Scanlines, the aperture grille and the dark corners of a tube screen.
- `tear` Glitch (0–1, default 0.5): How hard the cuts tear the picture: torn slices, colour fringes and blocks. At 0 the cuts are clean.

## About Fantasy User Interface (FUI) & Sci-Fi HUD

FUI, short for fantasy or film user interface, is the screen graphics of films and series: computer screens, helmet displays and control rooms made to be watched for a few seconds, not used. Since the late 1990s specialist studios have drawn them in glowing hairlines and monospaced micro-text on black, and their rule is to give every screen one read, a single word or alert the audience grasps at once, with everything else as texture round it.

This generator builds that screen as a reel. A log of plausible machine events prints line by line, dim, behind the read; up to three reads of your own cut in with a torn-signal burst; the screen cuts in close on a boxed label, such as a date; then the first read types back in, so the loop ends where it began. Choose what the log reports, the face of the read, how much the letters glow, how much of the tube shows and how hard the cuts tear. It opens with the tube screen finish on: the picture made of red, green and blue phosphor dots, light blooming round the letters, colour fringes and dark edges, in the PNG and the video.

The photo or video screen reads your own file in your browser, never sending it anywhere, or a sample. It prints the picture as phosphor dots, dithered pixels, contour lines or scanlines, then draws its analysis over it: nodes on the strongest edges, marked with circles, squares, diamonds, crosses or brackets and sized by strength; hairlines joining them in a triangulation, to their nearest neighbours, along the edges or in right-angled steps; and a curtain of hairlines falling from the edges. Eight effects move it: a scan sweep, a signal pulse along the links, rain down the curtain, parallax, drifting nodes, a swell that sets contour lines flowing, a torn signal, or none. It detects no faces or people, and its labels give only an index and a position. On a light palette it reads as a print on paper.

A sound moves it too: the low band swells the marks and the print, the middle draws the links in and out, and the high band stretches the curtain. The sound screen shows the sound by itself, as rings, bars or traces. A video’s own sound is used unless you choose another, and the exported video carries it where your browser can encode sound. A copied link carries how loud the sound is in 64 coarse steps, never the sound, and a check of your video, never the video. Video frames come from your browser’s own decoder, so unlike a photo’s they are not promised identical in every browser.

The loop lasts twelve seconds or more, and its cuts are single still states a tenth of a second long, at least a second apart, so it stays below the flash thresholds for photosensitive viewers. A video is sampled six times a second with the print blended between samples, and sound levels change at most 5.3 times a second, so neither can push the screen past three flashes a second, whatever the file does. A still is the first frame: the first read, the log and the label. The log is in Martian Mono, an open-source monospace; the reads are set in Archivo, Silkscreen or Martian Mono. The SVG holds every letter as an outline, so it needs no font installed.

Fantasy User Interface (FUI) & Sci-Fi HUD in Stylogeny (1999–today): https://stylogeny.com/styles/fantasy-ui/

## Recipe

```json
{
  "tool": "fui",
  "v": 1,
  "seed": 7,
  "format": "story",
  "params": {
    "picture": "reel",
    "read": "Signal / acquired",
    "then": "Stand by / for contact",
    "last": "Open channel 7",
    "chip": "Friday 21:00",
    "log": "signal",
    "face": "condensed",
    "print": "dots",
    "marks": "mixed",
    "links": "delaunay",
    "nodes": 0.55,
    "curtain": 0.45,
    "scope": "rings",
    "react": "all",
    "response": 0.8,
    "effect": "sweep",
    "glow": 0.6,
    "screen": 0.6,
    "tear": 0.5
  },
  "palette": "fantasy-ui"
}
```