Live 3D, drawn in ink

Live 3D drawn as an engraving, lit by your pointer, trembling like pen work.

45 / WebGL

Night shift at Sampleton Glassworks.

Eleven hundred degrees, and it is still soft.

Every one turned by hand.

Sampleton Glassworks · drawn live, in ink

Every line is worked out as you move the lamp.

Move the pointer over a panel to move the lamp: the lines thicken as the light falls away and break into dots where it is brightest. Open a panel to step inside.

Loading…

Remake it

Build one interactive web page: A comic page of three panels from an invented glassworks: a cobalt decanter, the furnace, a shelf of bottles. Everything is live 3D, drawn as ink: each surface adds a line pattern to its tone from the lamp and cuts it to ink or paper, so the lines thicken as the light falls away and break into dots where it is brightest. Your pointer is the lamp. Lines and panel borders are redrawn eight times a second, so they tremble like drawing. Open a panel and the camera flies in.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A brand with an illustrative identity, a crafted product, storytelling: anywhere 'drawn' says more than 'photographed', and a moving light shows the form. Do not let it fail the way this kind of piece usually does: Locked out and noisy: the exemplar's age gate cannot be passed by keyboard, its sound starts on that click, and reduced motion is ignored. Here every panel is a button, the arrow keys move the lamp, there is no sound, reduced motion stills the boil, and a drawing is shown if WebGL fails.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.

Notes: when it suits, when it does not, how it fails

When it suits: A brand with an illustrative identity, a crafted product, storytelling: anywhere 'drawn' says more than 'photographed', and a moving light shows the form.
When it does not: Anything whose truth is photographic (a property, a menu, a product the buyer must see exactly), and pages people use in a hurry.
How it fails: Locked out and noisy: the exemplar's age gate cannot be passed by keyboard, its sound starts on that click, and reduced motion is ignored. Here every panel is a button, the arrow keys move the lamp, there is no sound, reduced motion stills the boil, and a drawing is shown if WebGL fails.

Measured on: santionispirits.com · T1 · santionispirits.com · T2 · santionispirits.com · T3. Built from scratch for an invented business; nothing here comes from the site studied.