Point Of View, how it’s made: the history of glasses told with the eyes

Point Of View, at readingstones.com, is an English longread on the history of glasses: it starts from the polished stones that were laid on the lines to enlarge them, goes through rivet spectacles, the pince-nez, the lorgnette and the monocle, reaches temples and mass production and ends with glasses as fashion and identity. Whoever made it does not say: there is no signature on the page, and we did not find it among the awards.

Everything is black and white, an almost solid black and a slightly cool paper white, with black-and-white photographs, oil portraits and thin grey technical drawings; colour comes only from the images. And every animation speaks about sight. The first screen is an eye chart, P O I N T, O F, V I E W, with acuity labels; titles arrive blurred and come into focus; portraits stay short-sighted until you pass over them; a window blinks to change scene. Even the loader is an eye: a grey line crosses the black, then the black opens into two eyelids.

Underneath there is Taptop, a no-code site builder whose engine carries GSAP 3 with ScrollTrigger, Observer and CustomEase; on top, fourteen hand-written scripts with IntersectionObserver, the Web Animations API and CSS animations. No WebGL, no canvas, no smooth scrolling. Here we take it apart in three moments, with a demo rebuilt from scratch for each: drawings, texts, colours and code are our own. From the site we took the idea and the timing.

The lens on the strip

In the black section about reading stones a strip of thirteen manuscript pages glides by, small, blurred and dark. In the middle there is a window one page wide: whatever passes under it turns sharp and takes on colour, then blurs again. It is the reading stone turned into an animation.

The strip is cloned once and moves with the Web Animations API, 32 seconds per loop, forever, and stops when the tab is not visible. On top, two panels cover the sides with a background blur and darken them; each has two intersected masks, a 48-pixel fade towards the centre and an 18-pixel one at top and bottom, and between the two the window remains, framed by two brackets. In our demo the manuscripts are drawn stamps, and the lens is round and truly enlarges: inside it there is a second copy of the strip, sharp and enlarged around the lens centre. The strip slows down under the mouse, and it can be dragged and thrown.

The blinking window

Further down, full screen, there is a black-and-white photograph, and in front of it a window with a detail video: the smile of the hugging couple, the seeds of the dandelion field. Every two seconds the window closes onto its middle line, like an eyelid, and reopens on another scene.

The cycle is written with the Web Animations API: two seconds open, a second and a half to close with the curve cubic-bezier(0.65, 0, 0.35, 1), three hundred milliseconds closed, while the photo behind fades in three hundred milliseconds and the next video starts, then the same animations in reverse. It only runs while the section is visible. In our demo the scenes are drawn in SVG and the detail is the same scene enlarged, a second use with a tight viewBox, so always sharp; the eyelid is an ellipse that narrows only in height, so the rectangle becomes an almond before it closes.

The seam

The footer is split in two. On the left, on black, the sentence says that glasses are no longer just about seeing the world; on the right, on white, that they are about how the world sees you. Across the middle runs a row of faces: crossing the seam, each one puts on glasses, and the background changes colour.

There are two rows, identical, with the same people in the same places: one of portraits without glasses, the other of the same people with sunglasses or fashion frames; each is cut to its own half, and both move by half their width in thirty seconds, over and over. On phones the seam turns horizontal and the row vertical, and you see Einstein split in half, without glasses above and with dark glasses below. In our demo objects take the place of faces, technical drawings on one side and finished things on the other, and the seam can be dragged.

The other details

At the top centre a woman changes glasses twice a second: nine images stacked on top of each other, and a 500-millisecond interval that moves to the next with no fade, like stop motion. Six oil portraits, from Pushkin to Catherine the Great, sit under a blurred veil with a crossed-out eye, and passing over them reveals them sharp and wearing glasses. Elbow arrows draw themselves inside an SVG mask, dimension lines open from the centre, bars grow with scrolling. In the word RIVET the V is transparent and a pair of rivet spectacles takes its place. A pinned card goes through pince-nez, lorgnette and monocle, with indexes on both sides. In the sentences, between words, there are small pictograms, and one adjective is written in Braille dots. The menu is a black pill that widens, and an archive of eight styles, from the round frames of 1900 to glasses with a camera, changes a large portrait at every tab.

Where it stumbles

The loader waits for the page to finish downloading everything, and the page is heavy: five 1920-pixel videos and about a hundred and thirty images. In our tests the eyelids opened after four or five seconds the first time, then after twenty or twenty-five; on phones the load event arrived at almost twenty-five seconds. On top of that, at start the page blocks the wheel, the finger and the arrow keys for 2.7 seconds.

The grey captions on white, at 11.7 pixels, have a contrast of about 2.5 to 1, and the smallest labels go down to 9 pixels. The menu has a noticeable typo: «Archieve».

The rest holds up: the blinking section only runs when visible and pauses its videos, the manuscript strip stops when the tab is hidden, and on phones every effect survives, the seam included, even clearer.

What we take away

When the subject is sight, every animation can be a gesture of the eye: focusing, squinting, blinking, looking through a lens. And to make something change before your eyes, it is enough to draw it twice and cut both copies at the same point.