70s Supergraphics

About this style

Supergraphics took off in the late 1960s and 1970s, when architects and graphic designers painted giant stripes, arrows, numbers and letters directly onto walls, floors and ceilings, scaled to the building rather than the page. Painted interiors at The Sea Ranch on the northern California coast in the mid-1960s helped make the idea famous. Bands of parallel color that turn corners on concentric curves became a signature of the decade, from school corridors and leisure centers to vans and television idents. The look returns today in wayfinding, retail interiors and brand murals.

Make a 10-second 1970s supergraphics film: thick rainbow stripe bands paint themselves along a room-scale wall, turn its corners on concentric curves and rise into an arch over a rounded display title as the camera tracks along.

<inputs>
Title: Hello, Sunday. Place: Halverton Leisure Centre. Line: Pool · Courts · Café · Open 7 days. Door sign: Changing Rooms. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: wall chocolate #3A2418 with a faint roller texture at 3%; skirting teak #7B4A2A; floor terracotta tiles #B4552F with grout #8C3F22; door teak #8B5A34 with a brass porthole ring #C79E4E around glass #9DC2BF; window glass in three flat bands, #A6CDD4, #C7E0DA and #E7EFE2, in teak frames; bench teak slats on brushed steel legs #A9A49B. Bands, from the left of the direction of travel to the right: red #D9402B, orange #EE7624, amber #F4A52A, yellow #F6CF4A, cream #F2E4C2. Title cream #F2E4C2, place amber #F4A52A.
The wall is drawn in elevation, flat-on, and is three screens long (world x 0–5760); the camera trucks right along it. Fixed architecture in world pixels: the floor line at y 920 (a 24px skirting, then tiles to the bottom); a door at x 1200–1420, y 340–920, with its porthole centered at y 480 and Changing Rooms in "Fredoka" 600, 22px, cream, at eye level; a ribbon window at x 2200–3200, y 120–340; a low bench at x 2400–3000, y 800–920. Two foreground props pass in front at 1.4× the camera's speed: an orange globe pendant lamp on a cord near world x 2000, and a rubber plant in a white cylinder pot near x 3400. Neither is in the final frame.
The bands: five parallel bands, each 40px wide with no gaps (200px in all), following one centerline built only from straight segments and quarter or half circles, so every band is an exact concentric offset that keeps its width through every turn. All quarter turns have centerline radius 140 (inner band edge radius 40). The centerline, in world pixels: from off the left edge along y 500 → turn up at x 820 → up x 960 → turn right → along y 200 over the door → turn down at x 1520 → down x 1660 → turn right → along y 500 again, under the window and over the bench → turn down at x 3400 → down x 3540 → turn right → along y 810 just above the skirting → turn up at x 4180 → a semicircular arch, centerline radius 480, centered at (4800, 670) → down the far side → turn right at x 5280 → along y 810 and out past x 5760. Red runs on the left of the direction of travel, so it lies on the outside of the arch, as in a rainbow.
Paint: flat satin color with crisp masking-tape edges (a 0.5px darker line where each band meets the wall), never gradients. The growing front is one straight cut perpendicular to the path across all five bands, so on a turn the inner bands advance less than the outer ones: compute each band's drawn length from the centerline progress, segment by segment.
Type: the title in "Corben" 700, 112px, cream, in two lines, "Hello," and "Sunday", centered at x 4800 on baselines 520 and 650 inside the arch; the place in "Fredoka" 600, 34px, amber, tracked 0.06em, centered at baseline 790; the line in Fredoka 500, 24px, cream at 80%, centered at baseline 840. All of it sits inside the arch, clear of the bands.
Motion: the front advances along the centerline at a constant 1600px/s, easing in over 0.3s; the camera trucks from world x 0 to 3840 over 1.0–5.0s on cubic-bezier(0.45, 0, 0.25, 1), keeping the front on screen; the title letters drop 40px into place one by one, 50ms apart, each on cubic-bezier(0.34, 1.4, 0.64, 1) over 0.4s, the only overshoot in the piece.
The real thing is paint at the scale of architecture: constant band widths through every turn, concentric radii, a front cut square across the bands, and stripes that respect the door, the window and the floor; the cheap version is a rainbow gradient swoosh with a drop shadow over a stock room.
Banned: gradients on the bands, drop shadows, glow or neon, bands of uneven width, turns that aren't concentric, peace signs, smiley faces, daisies, disco balls, chrome, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–0.6s: the bare wall at the first screen: the door with its porthole and sign, the skirting and the tiles.
0.6–2.1s: the bands paint on from the left edge, turn up beside the door, run over it on concentric turns and come back down to y 500.
1.0–5.0s: the camera trucks right as the front runs on under the window and over the bench, the lamp and the plant sliding past in the foreground; the bands turn down and run along the skirting.
3.7–5.2s: the front climbs the left leg, sweeps over the arch and down the far side, and runs out of frame on the right.
5.2–5.9s: Hello, Sunday drops in letter by letter under the arch.
5.9–6.6s: the place and the line rise 10px into place, 0.2s apart.
6.6–10.0s: hold, completely still.
For other durations, scale the truck and keep the paint speed at 1600px/s, holding at least 2s at the end.
</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: the architecture in a world group translated by the camera; each band is a path built from its exact offset segments, drawn up to its own length with stroke-dasharray computed from the centerline progress. Render the wall's roller texture once at load into a canvas pattern under the bands. Request Fredoka's weight axis. 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. Anything cumulative is precomputed once at load at a fixed step or solved analytically from t, so any frame can be drawn directly. 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. Check every band keeps exactly 40px of width through every turn, the turns are concentric with no kinks or overlaps, the front stays a straight perpendicular cut, the bands never touch the door, window or bench, red is outermost on the arch, and the whole title lockup sits inside the arch in the final frame. 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.

Similar prompts

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,…

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,…

Bauhaus Geometry

Made by us

A primary-colored circle, square and triangle roll, drop and turn into place on a black bar, assembling a constructed B…

Constructivist Poster

Made by us

A Constructivist poster in motion: red bars, a wedge piercing a black circle, halftone fields and condensed uppercase t…