Four Frames

Summary

A home-page idea for DEPO that explains the site without explaining it. One person goes through one shoot: as they are, with make-up, with hair done, on a magazine cover. Each change is a camera move and each stage names the person who joins (model, make-up artist, hair stylist, photographer and magazine). The demo has four pages with one series, so the owner can compare the same story told four ways. A switcher at the bottom moves between them.

Prompt

The brief this page was built from.

Build one demo of the DEPO demo album with several pages, as ideas for how the home page can say
what DEPO is. Story: one person in four frames. As they are (no make-up, nothing done), then
make-up, then hair, then on a magazine cover. It should feel like a photographer shooting: fast,
hit after hit, and suddenly you are on the cover. Each page tells the same four frames with a
different camera effect:

1. Aperture: scroll. Iris blades fill the screen and show the face through the hole. Each stage
   the iris snaps shut and reopens on the next frame. On the cover it opens all the way and the
   close-up pulls back to the whole cover.
2. Shutter: a viewfinder with two steel leaves and a release button. A focus box finds what
   changes next and locks, then the leaves slam. It fires by itself while on screen; a press or
   Space takes over, with a shutter sound that can be turned off. Frames taken so far line up
   under the text. On the cover the viewfinder falls away, the dark studio turns the cover's lilac
   and the cover lands with a thud.
3. Slats: scroll. The portrait is cut into upright prisms with one stage on each side; they turn
   a quarter at a time, one after another.
4. Drop: a hero with no scrolling. Prints slap onto a pile one by one, the cover lands last and
   the pile jumps. Plays on load, "Again" replays.

Every page: the real DEPO header and footer, the stage word set huge in condensed type, the role
of the stage, four progress bars, and a closing block saying who does what with links to Connect,
Locals and Depo Magazine. Palette taken from the cover. Works on phones. In reduced motion: no
flash and no animated blades.

Editor for album super admins and admins (?edit on any version): for each frame pick or upload a
photo (several files fill the frames in order), set its position and zoom, the shutter's focus box
and the texts; the page changes at once, with undo. Save publishes for visitors. A named series
is kept and shown by a link (?series=name) without changing the main page. Uploads are checked by
content, re-encoded, and no SVG; visitors never get the editor's data.

Look

• Type: Archivo variable, self-hosted: 900 at 62% width, uppercase, for the stage word; the word hits at 125% width and snaps to 62%. Lato (from the site styles) for body text.
• Palette: ink #101014 and #0b0b0c, cover lilac #d6d3e0, paper #f3f1ec, VOÍD red #c4161c.
• Layout: the stage copy on the left, the frame on the right, the frame on top on phones. Aperture and Shutter are black, Slats lilac, Drop paper. Below each: "Four people. One cover." and the site footer.
• Motion: Aperture: canvas iris with nine blades, 170 ms shut and 300 ms open, triggered by scroll position. Shutter: focus lock 190 ms, Web Animations leaves, 90 ms slam and 260 ms open, a small shake; on the cover the frame scales from 1.16 and the ground changes to lilac in 120 ms. Sound is made with Web Audio, only after a press. Slats: CSS 3D prisms scrubbed by scroll with a stagger and shading mid-turn. Drop: Web Animations print drop, 150 to 190 ms, with the pile dipping on impact. A white flash on each hit (at most about one per second).

Built with

Borrowed

Header, footer and their CSS and scripts are copied from demo5. Otherwise nothing borrowed.

Config

None of its own: static pages. The series is read from GET /demo51/series and written through /demo51/api.php (admins only, CSRF), so demo52 needs no nginx rule. This is the one exception to a demo being self-contained: without demo51 the pages fall back to the frames in img/. Data: public/_db/demo51/series.json; uploads share demo51's media/ and library.

Notes

• The series is an imitation. The album has no real before-and-after set, so stages 1 to 3 were made from one finished cover with ImageMagick: colour taken off the skin, lips, hair and paper, then added back step by step, and the masthead painted out. Only stage 4 is the real cover. Real frames are uploaded in the editor (4:5 fits without cropping, about 1000×1250 or larger).
• Stages 1 to 3 use the same hair style, since a retouch can change its colour but not its shape.
• Shutter is the version the owner chose to take further. The sound choice is remembered in localStorage (d52-sound).
• The close-ups in Aperture and Shutter zoom towards the upper middle of the frame, so a face far from there needs the position sliders. There is no dragging on the page and no deleting of photos yet.