Film Noir Titles

About this style

Film noir is the name French critics gave in the mid-1940s to a cycle of dark Hollywood crime dramas, usually dated from the early 1940s to the late 1950s. Its look came from low-key, high-contrast black-and-white cinematography: a single hard light, deep shadow and patterns such as venetian-blind stripes, with roots in German Expressionist film of the 1920s. Opening titles were usually plain lettering superimposed over a moody shot. Trailers, games and fashion films still borrow the look to signal mystery and danger.

Make a 10-second opening title sequence in the style of a 1940s Hollywood film noir.

<inputs>
Studio: Greyhaven Pictures. Title: THE LATE WITNESS. Starring: Vivian Lorne, Dex Halloran. Director: Sol Brenner. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: grayscale only, R = G = B in every pixel. Black #070707, unlit wall #1A1A1A, lit plaster #C8C8C8 at its brightest, type #EEEEEE.
Type: Instrument Serif 400 and italic, a condensed high-contrast serif like hand-lettered title cards. Presenter: "GREYHAVEN PICTURES" in caps at 42px tracked 0.32em over "presents" in italic at 34px. Title: "THE" at 54px tracked 0.5em over "LATE" and "WITNESS" at 168px, leading 0.92, tracking 0.02em, flush right at x 1740, block top at y 250. Credits: role words in italic lowercase at 34px, names in caps at 44px tracked 0.14em. Type is a white superimposition with a 2px soft halation at 25%, beneath the grain, and always on the unlit wall.
Set: a plaster office wall filling the frame (seeded value noise, ±4% luminance). One hard light off frame left shines through venetian blinds: at rest, a soft-edged trapezoid over x 120–880, y 120–980 (60px falloff), cut into parallel bars tilted −14°: 44px of light, 30px of shadow, the bars fanning 15% wider toward the right, penumbra 4px at the left growing to 10px at the right. At x 250–430, y 930–1000: an ashtray rim in silhouette with a resting cigarette, its ember a 7px white glow that slowly brightens and dims.
Smoke: one plume from the ember, a laminar thread for its first 120px that breaks into slow curls higher up, drifting right, gone by y 140. Its brightness is density × (0.12 + 0.88 × light at that pixel), so it glows inside the bars and nearly vanishes between them. That one rule sells the style.
The figure: a man in a fedora and overcoat (brim, pinched crown, head, sloping shoulders, coat running off the bottom; hat top near y 300, shoulders about 480px wide) who exists only as missing light. Inside the bars he blacks them out; on the unlit wall he is invisible.
Texture: grain at ±5% luminance and 6–14 dust specks, re-seeded per film frame, floor(t × 24); gate weave of ±0.6px on the same cadence, moving picture and type together; projector flicker of ±2%, never more than 3% between film frames; an oval vignette down to 65% brightness in the corners.
Motion is slow and heavy. Light moves on easeInOutSine, the figure on easeOutCubic. Type only dissolves, linearly, over 1.0–1.2s like an optical printer; the title also settles from scale 1.03 to 1.0 over 4s.
The real thing is light doing the storytelling: hard shadow, deep blacks, smoke caught only where the light falls. The cheap version is a gray filter, a clip-art fedora and a typewriter font.
Banned: color or sepia, typewriter fonts or reveals, lens flares, glitch, heavy scratches, camera shake, guns, blood, a visible face, flashing more than 3 times per second.
</direction>

<structure>
0.0–0.9s: a near-black wall; only the ember and a faint thread of smoke.
0.9–3.0s: the blinds' light slides in from beyond the left edge and eases to rest, as if a car outside pulls up and stops; its brightness rises over the first 1.2s.
1.6–3.6s: the presenter lines dissolve in on the dark right side, centered on x 1360, y 520, hold, and dissolve out.
3.4–5.0s: the figure's shadow slides in from the left and stops centered near x 500, then sways ±2px as if breathing.
4.2–5.4s: the title dissolves in.
5.6–6.6s: someone tilts the blinds open: the shadow bars thin from 30px to 14px and the light brightens 10%.
6.6–7.8s: "starring" and the two names dissolve in under the title, flush right, from y 760.
7.8–8.8s: "directed by" and the director's name dissolve in beneath, from y 880.
8.8–10.0s: hold; only smoke, ember, grain and the breathing sway continue.
For other durations, scale every timestamp proportionally and keep every dissolve at least 1s.
</structure>

<build>
One self-contained index.html, CSS and JS inline. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone, clamping past the end to the last frame: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Anything cumulative is precomputed once at load at a fixed step or solved analytically, so seek can jump to any time. Load Google Fonts via <link> and await document.fonts.load() for each face before defining window.seek. 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.
Engine: Canvas. One WebGL canvas runs a fragment shader that paints the wall, blind light, figure shadow, ember and smoke from uniforms set in seek (preserveDrawingBuffer: true); the smoke is fbm with domain warping, its coordinates advected upward by t. The type is DOM above it. A top Canvas 2D adds grain, dust and vignette from noise tiles generated once at load. No three.js.
</build>

<check>
Before showing me, step through one frame per second (0–10s): screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check that every pixel is neutral gray, the smoke shows only inside the light bars, the figure reads only as a gap in the stripes, and no type touches the lit area. 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,…