TITLE Six Rooms of Optical Pressure PROMPT A CSS-only (no JavaScript at all) gallery of six kinetic op-art works in strict black and white, in the lineage of 1960s perceptual abstraction (bulging grids, moire, vibrating stripes), but new compositions rather than copies of any existing painting. Concept: the eye does the animating; CSS only nudges it. Palette: pure black #000000 and pure white #FFFFFF only. No greys except those the eye invents, no colour, no shadows, no opacity fades, no gradients other than hard-stop repeating gradients used as line generators. The title wall is white; the rooms then alternate: black rooms (I, III, V) holding predominantly white works, white rooms (II, IV, VI) holding black works. Layout: a vertical sequence of a title wall followed by six full-viewport "rooms", each holding one large square work centred with generous margin (min(86vw, 86vh)), with a museum caption beneath in tiny type. Each room also carries its roman numeral set large in condensed caps (in the left margin on wide screens, above the work on narrow ones) and, on wide screens only, a short wall note at lower left under a hairline rule. Use CSS scroll-snap so each room lands cleanly. A fixed, minimal index on the right edge (a short dash for the title wall, then six small squares, all anchor links; the room name wipes out to the left on hover or focus) drawn in difference blend so it reads on both black and white rooms. The current room's square is filled using scroll-driven view timelines where supported, falling back to :target. The six works (each built from repeating-linear/radial/conic gradients, masks, blend modes like mix-blend-mode: difference, transforms and keyframes): I. "Slow Interference": two identical layers of fine concentric rings (repeating-radial-gradient, 4px pitch, 3px on phones), the second in difference mode. Their centres drift around each other very slowly on sine-eased translations (one wanders near the middle, the other travels a wide ellipse), producing sweeping moire hyperbolas and ellipses. Pressing adds a slow sway and swell to the second field. II. "Bulge": a checkerboard that appears to swell into a dome: twenty-six concentric circular lenses of the same checker pattern, geometrically spaced in radius and each scaled a little more than the last along a logarithmic profile so the seams stay small, with a breathing animation. Pressing rolls the whole board slowly. III. "Tremor": perfectly vertical stripes shown in five phase-shifted copies, each masked to diagonal bands of sinusoidally varying width so the stripes read as rippling waves; the masks slide with steps() timing (four steps a second) so the surface shimmers rather than scrolls. Pressing makes the whole field lean from side to side. IV. "Current": a circular work. Sixty conic-gradient spokes turn one way; a difference-mode layer turns the other way with seventy-two spokes in the outer annulus and fifty-four in the inner disc, so twelve interference petals sweep round the outside while six sweep the opposite way inside, around a black hub. Pressing quickens the counter-rotation. V. "Fold": a sheet of parallel horizontal lines cut into twelve tall slices, each slice skewed alternately so the plane reads as a pleated curtain with a zigzag hem; alternate slices use a heavier or lighter line so the pleats take light and shade; pleat depth animates like breathing. Pressing lets the lines run down the folds. VI. "Afterimage": a large black disc on white with a tiny fixation cross, a ring of twenty tick marks and the instruction to stare for twenty seconds. Tapping the disc (or the Ready / Staring switch in the caption) starts a 20s pure-CSS progress ring that drains around the disc while a two-digit countdown in the caption steps from 20 to 00; then the disc vanishes and the room flips to blank white with only a tiny black cross left to hold the gaze, so the viewer sees the glowing afterimage. The instruction line changes at each stage. Restartable by flipping the same checkbox/label control back. Interaction without JS: each work is itself a label for a hidden checkbox, so hovering it, or tapping/clicking it, or toggling it from the keyboard "presses" on the work and switches on an extra layer of motion (animation-play-state on a paused booster animation, so nothing jumps); the caption's second line states the hint and the current pressed state. Each caption for rooms I to V has a "Moving / Still" switch built from a styled checkbox so viewers can freeze a piece mid-motion. Custom ring cursor over the works. Signature moment: Room I's moire: two trivially simple ring layers yielding huge, liquid, three-dimensional-seeming sweeps. Typography: tiny refined grotesk (Helvetica/Arial) at 11px, uppercase, wide letterspacing, in the manner of museum signage: "I — SLOW INTERFERENCE, synthetic polymer on screen, dimensions variable". An opening title wall before Room I: a hairline-ruled signage strip at the top, then the title "SIX ROOMS OF OPTICAL PRESSURE" set enormous in black condensed caps (Impact/"Arial Narrow" stack) filling the width (two justified lines on landscape screens, three on portrait), the letters knocked out by a slowly drifting line pattern (background-clip: text): two layers of horizontal hairlines at 10px and 11px pitch blended in difference and drifting in opposite directions, so bands of solid black and bands of split lines roll through the letters. Below it a short curatorial paragraph in small type, a boxed advisory with a flickering stripe glyph: "These works flicker. A calm version is shown if your device asks for reduced motion.", a ruled floor plan listing the six rooms as links, and an "Enter Room I" link with a drawn arrow. Entrance: the title appears solid black and the line pattern sweeps across it once from left to right, the top rule draws itself, and the lower blocks wipe in with a stagger. Under prefers-reduced-motion all animations stop and each work rests in its most striking static frame, the Moving / Still switches are replaced by "Held at rest", and only Room VI keeps its twenty-second clock (advancing in whole-second steps) because the afterimage depends on it. Must stay crisp on high-DPI and not overflow on a 360px phone. DESCRIPTION A white-cube gallery reduced to two values. The visitor arrives at a title wall where enormous condensed capitals are sliced by horizontal hairlines that beat against each other, then walks down through six snap-aligned rooms that alternate between black and white. Each room holds one square work made from nothing but a repeated line, ring, check or spoke laid over a copy of itself: rings that produce sweeping hyperbolas, a checkerboard that swells into a dome, upright stripes that ripple, spokes that bloom into counter-rotating petals, ruled paper that folds into a pleated curtain, and finally a black disc that the viewer stares at until it disappears and leaves a glowing ghost on a blank wall. Signage is tiny, uppercase and widely spaced, with a large roman numeral and a dry wall note per room. The mood is exacting, quiet and slightly dizzying; everything that seems soft, grey or three-dimensional is produced by the viewer's own vision. VISUAL TECHNIQUES - Two repeating-radial-gradient ring fields blended with mix-blend-mode: difference, drifting on sine-eased translate animations to generate moire hyperbolas - Twenty-six nested circular clip layers of a repeating-conic-gradient checkerboard, each scaled by a per-layer custom property along a logarithmic profile to fake a lens - Five phase-shifted stripe layers revealed through diagonal repeating-linear-gradient masks whose position advances with steps() timing - Counter-rotating repeating-conic-gradient spoke fans with different spoke counts in difference mode, split into annulus and disc by a radial mask - Alternately skewed overflow-clipped slices of ruled lines with two line weights to model light and shade on pleats - Pure-CSS twenty-second timer: SVG stroke-dashoffset progress ring, steps() digit strip countdown and step-end visibility keyframes driven by a checkbox - background-clip: text title with two hairline gradients combined by background-blend-mode: difference and a retracting solid cover layer for the entrance sweep - Container query units (cqw) so every pattern scales with its work, and a title sized to its wall - Fixed index in difference blend with scroll-driven view timelines (timeline-scope) and a :target fallback - Checkbox-and-label state machine: paused booster animations switched by :hover and :checked, freeze via animation-play-state - Clip-path wipes and scaleX rule draw with custom cubic-bezier easing instead of opacity fades, keeping the page strictly two-valued - prefers-reduced-motion variant with hand-chosen static frames for every work INTERACTION MODEL Scrolling (wheel, touch, keyboard) moves between the title wall and six rooms, each snapping into place; the right-edge index and the floor plan on the title wall jump directly to any room, and the index square for the room in view fills in. Hovering a work, or tapping, clicking or keyboard-toggling it, presses on it: Room I sways, Room II rolls, Room III leans, Room IV quickens, Room V lets its lines run; tapping again releases it, and the caption reports the state. The Moving / Still switch in each caption freezes that work exactly where it is and releases it again. In Room VI, tapping the disc or the Ready / Staring switch starts a twenty-second stare with a draining ring and a countdown, after which the disc vanishes and the afterimage appears on the blank wall; flipping the switch back resets the room. All controls are real checkboxes and links, reachable by keyboard with visible focus outlines, and devices asking for reduced motion get a still version of every room.