CMYK Separation

About this style

Four-color process printing reproduces full-color pictures with cyan, magenta, yellow and black inks. Each color is separated onto its own plate and broken into a halftone screen of dots whose size carries the tone, and the screens are set at different angles, traditionally 15, 75, 0 and 45 degrees, so together they form small rosettes instead of clashing moiré. The black plate, the K, deepens the shadows and replaces part of the other three inks in neutral tones. Printers check registration marks and color bars on every press sheet, and designers borrow the dots and marks for pop art and print-inspired graphics.

Make a 10-second film of a four-color print building plate by plate: cyan, magenta, yellow and black halftone screens print onto a press sheet with registration marks and color bars, the press comes into register, and a loupe shows the rosettes.

<inputs>
If I don't give you something, use the default and don't ask.
- Printer: Tallowmere Press (fictional).
- Slug on the sheet: "TALLOWMERE PRESS · JOB 2047 · C M Y K"
- Title: "Four inks, one picture"
- Line: "Cyan 15°, magenta 75°, yellow 0°, black 45°."
- Closing line: "In register."
- Picture: two striped hot-air balloons over rolling hills at sunrise.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a press sheet in a print-viewing booth: the picture prints one plate at a time as real halftone screens, the printer's marks build with it, the press pulls the plates into register, and a loupe shows the dots.
- Palette: booth neutral grey #5E6164 under even, slightly warm D50 light, falling off to #54575A in the corners; paper #F7F5EF with faint fiber; process inks laid down as transparent multiplied layers: cyan #00A0DD, magenta #E2007A, yellow #FFE500, black #1C1B1A. Every other color on the sheet comes only from those inks overprinting (cyan × magenta a violet-blue, magenta × yellow a red, cyan × yellow a green). Labels on the booth in #F2F2F0 and #C9CCCF.
- The source picture, painted once at load into a hidden 960 × 720 continuous-tone canvas: a sunrise sky from pale lemon at the horizon to clear blue above, with soft pink clouds; three layers of rolling hills in greens and olive with a misty valley between; a large balloon at center left whose envelope has eight vertical gores alternating tomato red, warm yellow and teal, shaded as a sphere (bright on the sun side, deep on the far side), hanging a wicker basket on ropes under a burner; a smaller violet and orange balloon in the distance at right; two small birds. Smooth gradients everywhere, so the screens have every tone to show.
- Separation, per pixel: C, M, Y = 1 − R, G, B; K = 0.85 × min(C, M, Y) (gray component replacement), subtracted from C, M and Y; then a mild dot gain curve.
- Screens: each ink is a clustered round-dot halftone at its classic angle, cyan 15°, magenta 75°, yellow 0°, black 45°, on a 12px cell at stage scale (about 8px at 1280 wide). Dots are round up to 50%, meet their neighbors in a checkerboard at 50% and become round holes above it, with edges antialiased through fwidth. Overlaid, the four screens form rosettes with no moiré. A 2% seeded ink mottle and slightly ragged dot edges show at the loupe's scale.
- The sheet, in stage pixels: 1320 × 840 at x 120–1440, y 120–960, with a soft contact shadow on the booth; the picture at x 200–1160, y 180–900, with crop marks at its corners; registration targets (a 44px circle with crosshairs) centered at (680, 150), (680, 930), (160, 540) and (1360, 540); a vertical color bar at x 1220–1280, y 200–880 with solids of C, M, Y and K, the overprints C+M, M+Y, C+Y and C+M+Y, and 25, 50 and 75% tints of each ink; the slug along the bottom margin in Geist Mono 500, 20px, centered at baseline 948. Every mark prints in each plate's ink, so the targets and slug build up to a registration black.
- Press passes: each plate is laid down by a sweep, a soft-edged impression front (the cylinder's contact line, 40px of soft edge) crossing the sheet left to right in 0.9s, ink appearing behind it with a 6% wet sheen that dries off over 0.6s. Cyan, then magenta, yellow and black.
- Registration: magenta prints 7px right and 4px down of true, yellow 3px left, so color fringes line the balloon's edges and the targets show doubled colored rings. After the black, the press corrects: magenta and yellow slide into register over 0.6s on cubic-bezier(0.3, 0, 0.2, 1), the fringes close and every target collapses into one sharp black mark.
- Plate panel, the right column on the booth (x 1500–1800): four rows at a 140px pitch from y 380, each a 160 × 120 thumbnail of that separation printed alone in its own ink on paper, with its name and angle beside it in two lines (CYAN / 15°, MAGENTA / 75°, YELLOW / 0°, BLACK / 45°) in Geist Mono 500, 22px. Before its plate prints, a row is blank paper with its label at 45%; it fills behind the same sweep as the sheet and its label comes up to full.
- The loupe: a round 6× magnifier 340px across with a knurled black ring #1E1E20, a thin chrome rim catching a highlight arc at its upper left, and a soft shadow 16px down-right. It slides in from the lower right and comes to rest over the big balloon's shaded edge where red, yellow and teal gores meet; inside it the same screens are evaluated at 6× (72px cells), showing each ink's dots at its own angle, the rosettes they make, paper fiber between them, with slight barrel distortion toward the lens edge and a 2px dark inner ring.
- Type on the booth (HTML over the canvas): kicker "TALLOWMERE PRESS" in Geist Mono 500, 20px, tracked 0.16em, #C9CCCF, at (1500, 130); title in Geist 600, 48px, #F2F2F0, two lines, beneath; line in Geist 400, 22px, #C9CCCF, at most 300px wide; the closing line in Geist 600, 26px, #F2F2F0, under the panel at baseline 1000. Text rises 10px as it fades in over 0.5s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: four true screens at their classic angles, dots that grow from points to a checkerboard to holes, inks that multiply into reds, greens and blues, rosettes you can see in the loupe, registration you can watch tighten. Cheap: a halftone filter over a picture, or four colored layers fading in.
Banned: a single-angle halftone filter, moiré, colors that aren't the four inks or their overprints on the sheet, smooth gradients on the visible sheet (it shows only dots), glow, photos, real printers or color-standard brand names, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the booth and a blank press sheet; the panel's four rows wait as blank paper.
- 0.6–1.5s: the cyan pass: the picture appears in cyan alone, with cyan marks and bar patches; the panel's cyan row fills; the kicker and title fade in.
- 2.0–2.9s: the magenta pass, out of register: the sky warms and the balloon's red gores appear, fringed.
- 3.4–4.3s: the yellow pass: full color arrives; the line fades in.
- 4.8–5.7s: the black pass: shadows, the basket and ropes and the birds gain depth (the 6.0s frame: the complete four-color print, dried, its slight fringes and doubled targets plain to see).
- 6.1–6.7s: the press comes into register: fringes close and the targets snap to single black marks.
- 6.8–8.0s: the loupe slides in and settles over the balloon's edge, rosettes inside.
- 8.0–8.6s: the closing line rises in.
- 8.6–10.0s: hold.
For other lengths, change the gaps between passes; keep each sweep at 0.9s and at least 1s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- 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.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas: one WebGL canvas (preserveDrawingBuffer: true, drawn once per seek), its backing store sized from CSS size × devicePixelRatio, whose fragment shader evaluates the four screens per pixel from the separated source texture through each plate's offset and sweep front, and again at 6× inside the loupe's circle; the booth, the loupe's ring and shadow and the panel frames on 2D canvases. Type is HTML.
- The source picture, its separations, the marks, the bar and the paper are built once at load; sweep positions, registration offsets and the loupe's position are closed-form functions of t.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check at 1280×720 that the sheet shows dots, not smooth color, with no moiré; that each ink sits on its own angle and the loupe shows clear rosettes; that the overprint patches read violet-blue, red and green; that neutral shadows are carried mostly by black; that fringes and doubled targets show at 6.0s and are gone by 6.7s; that each panel row fills with its own plate; and that the type stays clear of the sheet. 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

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…