Backgrounds and images
The ground is CSS, canvas or three.js. Real images come first, and every image gets a treatment.
A page has no built-in backgrounds. The ground is whatever you can draw on a web page: a flat CSS colour, a CSS gradient, an SVG, a canvas, a three.js scene. Images are <img> tags. Keep every file in films/<name>/assets/ and use relative paths.
The ground
- A flat ground from the brand kit beats a random gradient. The banned defaults are gradient text, a cyan to purple gradient, and pure
#000or#fffthe brief did not ask for (taste/rules/no-tells.md). - A gradient the brief asks for is fine. Keep it clean: no banding rings, no straight edge inside a glow.
- Keep a held frame alive with a part that moves (a caret, a counter, a glint). A drifting ground (
drift-holdinprompts/moves/) is an option behind it, not the hold's life. - Compose off-centre on a real surface, not a centred title on a gradient.
taste/craft/surfaces.mdcovers surfaces and the visual styles.
Animate a ground the same way as anything else: from the seek. See The page.
Fonts load from @font-face files in assets/, never from the network. See When it looks wrong.
Images, in order of preference
taste/craft/imagery.md holds the ladder:
- A capture of the real UI. Never a fake or mocked-up screen.
- Free, openly licensed images: brand logos, flags, CC0 or CC-BY photos. CC-BY needs a visible credit.
- Drawn icons and inline SVG.
- Generated images, treated like any other.
- Emoji, as a last resort.
Use the lightest visual that carries the meaning. A clean gradient beats a mismatched photo, and a beat that reads on a plain field needs no image.
Fetch a logo with curl -f. Plain curl -o writes the body whatever the status, and a 404 leaves a zero-byte .svg that renders as an invisible hole.
curl -fsS https://cdn.simpleicons.org/<slug> -o <dest> || rm -f <dest>For photos, node scripts/brand/photos.mjs "<query>" <brand> [--n 4] [--license cc0,pdm,by] uses Openverse and records each license and author in credits.json.
Treat every image
A raw flat image reads as a dropped screenshot.
| The image needs to | Treatment |
|---|---|
| sit in the frame without a hard edge | fade the edges with a mask-image gradient |
| not be static | the picture arrives and settles (a mask reveal, a crop that tightens), then holds. A slow push is a camera drift |
| read as a UI card or product | clip to a rounded shape, add a card or device frame |
| carry text and stay legible | a 40 to 60 percent dark scrim under the type |
| belong to the brand | a duotone or grade to the palette |
A capture scaled below 0.6 loses its type. Crop instead.
Licensing
Never embed copyrighted material in a published film: posters, album covers, film stills, news photos, paid stock without a licence, copyrighted music. Capture the real product UI instead.