Grief, held up to a safelight.
Shutter Line refuses the appetite that turns suffering into spectacle. Mara Venn’s fictional life is told through editing decisions: what she circled, printed, and withheld. The contact sheet is the exhibition’s moral interface. Visitors may develop only three marked negatives; six refused frames remain dark after opening.
The page follows an archivist’s workflow: counts, film strip, chemical tray, refusal, repair history, and a broken carrier log. Its final number is not 613 prints but 1,229 sheets without print orders—giving absence a catalog number without pretending it is empty.
Captions carry the emotional force. No interface reward exposes a withheld subject.
How the illusion is made.
The film gate
In styles.css, .hero-frame puts hero.jpg between sprockets, scratches, safelight bloom, and ghost crops. slowPush and gateWeave add camera movement; .film-load opens the archive with one red scan.
Local film-asset workflow
The hero began as a GPT Image 2 still, then the approved frame was routed through Higgsfield to Kling 3.0 for a five-second smoke-curl loop. Masters are stored locally under /assets/gen/shutterline/. When loop.mp4 is unavailable, this release uses the still plus code-driven push, gate weave, grain, scratch, and safelight motion; every other visual remains generated by HTML, CSS, SVG, or JavaScript.
Contact sheets and development
Each marked .negative is a pressed button. negativeObserver draws its uneven SVG circle; .contact-viewport keeps every frame reachable on phones. In main.js, selectPrint() synchronizes crop, date, timer, caption, and verso. Developer, paper, and tongs animations precede typeCaption().
The caption envelope
setVerso() turns the selected caption over without losing keyboard state. The reverse carries a distinct private edit instruction, crop sketch, print batch, pencil pass, and release status for each circled frame.
Absence and motion
The six .withheld-frame buttons use aria-expanded; touch, keyboard, and pointer users receive the same archive note, but never an image. IntersectionObserver handles entrance choreography without scroll polling. updateProgress() schedules only one animation frame per scroll event, timers pause while document.hidden, and the .page-hidden class pauses CSS animation. Reduced-motion mode removes the opening, scan, typing, and continuous film movement.
Silver, blood memory, pencil.
INK
GELATIN
SILVER
SAFELIGHT
PENCIL
Instrument Serif supplies editorial fragility and the pressure of handwriting. Epilogue keeps body copy sober and legible. Space Mono labels frames, dates, chemistry, and accession marks. Display leading is compressed; body leading stays generous. Red is a light source and status color, while yellow is reserved for human decisions.
Prompt from an ethical mechanism.
Start with the emotional rule, then invent an interface that enacts it. Ask for one coherent material language, real interaction, and a meaningful thing the interface refuses to show.