visual-effects-atlas

Generated source view for the actual executable engineering/visual-effects-atlas skill. The durable routing article is Frontend and Design Skills. Source: skills/engineering/visual-effects-atlas/SKILL.md

Runtime Source

Bundled Resources

No bundled resource files.

Description

Give a design a distinctive look by naming a historical effect from photography, film, print or machine imaging and adapting its principle. Use when choosing an art direction, when a design looks generic or AI-made, or for halftone, riso or glitch.

Skill Source

---
name: visual-effects-atlas
description: >-
  Give a design a distinctive look by naming a historical effect from photography, film, print or
  machine imaging and adapting its principle. Use when choosing an art direction, when a design
  looks generic or AI-made, or for halftone, riso or glitch.
origin: personal
source_slug: visual-effects-atlas
---

# Visual effects atlas

Source: atlas.letz.ai, "The History of Visual Effects", 504 effects from 1820 to 2026 (321 historical, 183 machine), arranged by decade on a Swiss grid (2026-10-24). Kevin flagged it as a source of unique aesthetics (2026-10-30).

A look is distinctive when it has a name, a history and a principle you can explain. "Dark with a blue glow" has none of those. "Bayer-dithered two-tone print, 1970s ordered dither" has all three.

## Method

1. **Learn the name.** Pick the effect by its proper name (and its German name where the atlas gives one, which helps searching). Write it in the design notes.
2. **Read the traces.** Look at real examples for what the effect does to edges, light, colour, space and time. List three traces you will reproduce.
3. **Understand the principle.** State the physical, optical, chemical or algorithmic reason the look exists (a screen ruling, a threshold matrix, a scan line, a lens aberration). Reproduce the principle, not a filter that imitates the surface.
4. **Fit it to the content.** The effect must suit what the page is about. A tool that turns data into pictures earns a halftone or dither; a brand about craft earns letterpress or risograph texture.
5. **Use one.** One named effect carries a page. Two only when they share a principle.

## Seed atlas

Photography and print, 1820 to 1960: heliography, daguerreotype sheen, calotype grain, cyanotype blue, albumen tone, halftone screen (amplitude modulated dots), Ben-Day dots, rotogravure, photogram, solarization (Sabattier effect), cliché-verre, letterpress impression, woodcut and linocut grain, offset misregistration.

Graphic design and print, 1950 to 2000: Swiss grid typography, mimeograph and stencil duplication, risograph overprint and grain, photocopy degradation (xerox art), op art moiré, Letraset transfer type, screenprint flat colour, punk zine collage, split-fountain gradients.

Screens and machines, 1960 to 2010: ASCII art, teletext mosaic, ordered dither (Bayer matrix), error diffusion (Floyd and Steinberg), CRT scanlines and phosphor bloom, vector display glow, pixel art with a limited palette, NTSC colour bleed, VHS tracking error, JPEG block artifacts, datamosh, demoscene plasma and rasterbars.

Machine imaging, 2010 to 2026: style transfer, DeepDream, GAN artifacts, latent interpolation, diffusion noise schedules, depth-map parallax, point clouds, neural radiance fields, Gaussian splatting.

## Adapting to the web

- Halftone, dither and ASCII adapt well to canvas grounds; see `ascii-texture-grounds`.
- Overprint and misregistration adapt to CSS blend modes with two offset layers.
- Grain and noise belong in a tiny tiled texture or a shader, never a large image.
- Keep text crisp. Apply the effect to the ground and the media, not to running text.
- Keep performance first; an effect that drops frames is not worth its look.

## Slop check

If the result could be described as "modern, clean, with subtle gradients and glassmorphism", no effect was chosen. Choose one.

---

Timeline

• 2026-11-02 | Generated a browseable source page from the actual executable skill file. Source: skills/engineering/visual-effects-atlas/SKILL.md