A 1930s-style screen-printed park poster in six flat inks: sky bands, ridges, a snow-capped peak, a lodge and pines rise in parallax, then dawn turns to morning as the inks shift, the sun climbs, the mountain's shadow recedes and a steamboat crosses the lake.
Written and rendered by AI CSS Animations Oct 16, 2026
In the 1930s, railways and government agencies in the United States commissioned posters to promote national parks. Artists in the Works Progress Administration's poster division produced a well-known series of them as silkscreen prints in the late 1930s. Screen printing lays down one flat ink at a time, so artists simplified landscapes into a handful of colors and let shapes, not gradients, carry light and distance. Park conservancies, outdoor brands and tourism boards still use the look.
Make a 10-second 1930s screen-printed national park poster in which dawn turns to morning. <inputs> Park: Mount Orrin National Park. Line: "See it by rail." Footer: Tamsen Valley Line · Travel Bureau. Scene: a snow-capped peak above a lake, pines, a lodge on the shore and a small steamboat. Duration: 10s. If I don't give you something, use the default and don't ask. </inputs> <direction> Inks: exactly six flat inks plus paper #EFE3C8 in every frame. Each slot shifts from a dawn mix to a morning mix: 1 darkest (pines, title band, boat): #2A2B4A → #1F3A4C 2 shadow (far ridges, shadow faces, reflections): #6A3F5F → #2F7377 3 high sky and lake: #E28A7E → #8FC4CF 4 sun and lit faces: #F1A04E → #EAB64E 5 midground hills: #8A8F7A → #9BB57F 6 highlights (snow, glints, title): #F6D49A → #F7EBCB Light is carried by shapes: the sky is five flat bands with stepped edges, and each mountain is a lit polygon and a shadow polygon split by a terminator that moves as the sun climbs. Poster: a paper border; the image fills x 60–1860, y 60–850; the title band (slot 1) fills x 60–1860, y 866–1020. In it: MOUNT ORRIN in "Alfa Slab One" 400, 112px, tracked 0.04em, slot 6, from x 110; NATIONAL PARK beside it on the same baseline in "Antonio" 700, 40px, tracked 0.32em, slot 4; right-aligned at x 1810, "See it by rail." in Antonio 600, 36px, slot 6, over the footer in Antonio 400, 22px, tracked 0.2em, slot 3. Scene, back to front: sky bands and a sun disc with 12 flat wedge rays (slots 4 and 6); far ridges (2); the peak (lit face 4, shadow face 2, a jagged snow cap 6); midground hills (5) with the lodge (roof 1, walls 4) and a flat ribbon of chimney smoke (6); the lake (3) with the peak reflected as broken horizontal streaks (2 and 6); the steamboat (1) with a V wake; foreground pines (1) cropped by the image's sides. Print texture: each ink layer sits 1–2px off true registration (fixed, seeded), so thin paper slivers and overlaps show at a few edges; a static ink grain at 5%. Motion is calm and scenic: layers rise into place back to front, parallax distance growing toward the viewer (40px to 160px), each on cubic-bezier(0.22, 0.8, 0.2, 1) over 1.0–1.3s; the light shift is one long ease, cubic-bezier(0.45, 0, 0.55, 1); boat, smoke and reflections move on sines and ease to rest. The real thing is a few flat inks, light carried by cut shapes and lettering built into the design; the cheap version is a gradient sky, a photo filter and a script font. Banned: gradients, outlines, more than six inks plus paper in any frame, drop shadows, glow, image textures, real park names, script fonts, anything flashing more than 3 times per second. </direction> <structure> 0.0–0.6s: paper; the sky bands print down from the top, one every 0.1s, in dawn inks; the sun sits low, right of where the peak will stand. 0.6–1.4s: the far ridges rise 40px into place. 1.0–2.2s: the peak rises 70px with its snow cap, its shadow face covering most of it. 1.8–2.8s: the midground hills, lodge and lake rise 100px; reflection streaks draw from the center out. 2.4–3.4s: the foreground pines rise 160px, left group, then right. 3.2–4.2s: the title band slides up; MOUNT ORRIN rises out of a mask letter by letter (35ms apart), then NATIONAL PARK. 4.2–8.0s: dawn turns to morning: inks move to their morning mixes, the sun climbs 240px on a gentle arc, the lit face grows as the terminator sweeps, reflections drift ±6px, the steamboat glides 280px left trailing its wake, smoke drifts; "See it by rail." sets at 4.8s, the footer at 5.4s. 8.0–8.6s: every motion eases to rest. 8.6–10.0s: hold. For other durations, scale every timestamp proportionally. </structure> <build> One self-contained index.html, CSS and JS inline. Google Fonts via <link> are fine; no other libraries (no three.js: this style is flat). Draw in inline SVG, setting fills, transforms and paths from seek; lay a static grain canvas, generated once at load, over it with mix-blend-mode: multiply. Await document.fonts.load() for each face, then define window.seek. 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: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. 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. </build> <check> Before showing me, step through one frame per second: screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Count the colors in two frames: exactly six inks plus paper. Check no layer shows a gap at its bottom while rising, the terminator stays on the mountain, and the title band reads cleanly. Confirm seek(duration) and seek(duration + 1) match, so the final frame holds. </check>
Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.
A jazz-tempo film title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat,…
A Swiss-style event poster that builds itself on a visible 12-column grid: grotesque type rises out of baseline masks,…
A primary-colored circle, square and triangle roll, drop and turn into place on a black bar, assembling a constructed B…
A Constructivist poster in motion: red bars, a wedge piercing a black circle, halftone fields and condensed uppercase t…
More like this on the motion design inspiration board: Kinetic typography inspirationMotion graphics inspiration