Psychedelic Concert Poster

About this style

Psychedelic concert posters grew out of San Francisco's ballroom scene in 1966 and 1967, made to advertise dances at venues such as the Fillmore Auditorium and the Avalon Ballroom. Artists drew lettering by hand and bent it until it filled its shape, an idea Wes Wilson adapted from Vienna Secession lettering, and set complementary colors of equal brightness side by side so the surface seemed to vibrate. The posters were often hard to read on purpose, rewarding a longer look. The style still shapes festival posters, album covers and gig prints.

Make a 10-second 1960s psychedelic ballroom poster that melts into a readable bill.

<inputs>
Headliner: Marigold Engine. Support: The Paper Suns · Kettle & Kite. Venue: The Bellweather Ballroom. Dates: Friday & Saturday, June 19 & 20. Details: Lights by Prism Hollow · Tickets $3.50. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: ground red #E3352B, ray orange #F07A2B, lettering green #1FA060, outline indigo #2A2C8C, yellow #F7D23A, cream #F3E5C7, all flat. Green lettering sits on red and orange at matched brightness so the edges seem to shimmer: that optical vibration is the effect, and nothing actually flickers.
Type: the headliner in "Shrikhand" 400, every other line in "Chicle" 400. Lettering is forced into a shape until it swells to fill it: render each block flat once at load, then warp it through an envelope. For a column at u ∈ [0, 1] across the block, map v ∈ [0, 1] to y = top(u) + v·(bottom(u) − top(u)), with top and bottom smooth curves. Stems fatten and counters close where it bulges: that's the hand-drawn feel.
Layout:
- a cream border band 22px wide, inset 70px, with whiplash Art Nouveau curls swelling into the corners;
- venue, yellow, in an arch envelope 1300px wide and 96px thick, bowing up 110px, centered at y 205;
- headliner, green with an 8px indigo outline and a 4px yellow inline, in a lens envelope 1560px wide centered at y 515: 220px tall at the ends, 420px at the middle;
- support, green with a 5px indigo outline, in a smile envelope 1200px wide and 84px thick, bowing down 70px, centered at y 775;
- an indigo band 1240×96 centered at y 920, dates and details in cream Chicle, 36px, two lines.
Behind it all, a sun of 28 wavy rays from (960, 515), alternating red and orange.
Melt: until the poster resolves, everything flows. Offset every lookup by d(x, y, t) = A(t)·(sin(y/170 + 0.5t + sin(x/310)), 0.6·sin(x/140 − 0.4t) + 0.4·sin((x + y)/230 + 0.3t)), A falling from 110px to 0 over 1.2–6.4s on cubic-bezier(0.33, 0, 0.15, 1). The slow phase terms keep any area from changing color more than about once a second. Envelopes swell from flat to full over 2.0–5.6s on cubic-bezier(0.45, 0, 0.2, 1). Rays turn at 4°/s and ease to rest by 8.6s.
Motion is slow and viscous: nothing snaps, cuts or bounces. The real thing is lettering bent until it fills its shape, flat inks at equal brightness and a bill you can read once your eyes settle; the cheap version is a rainbow gradient, a tie-dye swirl and a groovy font set straight.
Banned: rainbow gradients, tie-dye, hue cycling, peace signs, mushrooms, eyeballs, drop shadows, a straight unwarped headline, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–1.2s: everything present but molten, envelopes flat: red, orange, green, indigo and yellow streams swirling slowly, nothing readable.
1.2–3.6s: the melt begins to drain; the cream border draws from the four corners inward, curls first.
2.0–5.6s: the envelopes swell: the headliner bulges to fill its lens and reads by about 4.0s, the venue arches, the support line smiles.
4.0–6.4s: the last of the melt leaves the small lines; dates and details read last.
6.4–7.4s: the yellow inline traces through the headliner, left to right.
7.4–8.6s: the rays slow to a stop.
8.6–10.0s: hold, completely still.
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 Canvas: build the flat lettering blocks (fill, outline and inline as separate layers) and the border on offscreen 2D canvases once at load, then composite on one WebGL canvas (preserveDrawingBuffer: true, drawn once per seek) whose fragment shader draws the rays, applies each envelope by inverse mapping (find u and v for each output pixel and sample the flat block with linear filtering), then the melt. Canvas won't fetch fonts itself: await document.fonts.load() for each face, then build the blocks and 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. Check the headliner and every small line read cleanly in the final frame, outlines stay continuous through the warp with no tearing or stair-steps, and no area flickers while it melts. 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

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