VHS Shelf

Scroll, drag, or click through twelve made-up films. The tape in the middle swings out of the row and leans toward your cursor, while its title, year, genre, and runtime roll into place beneath it in the direction you scroll. Click the cover and a blank page grows out of it into the film's detail view, where the poster spreads in like ink soaking into paper.

html5
css3
javascript

Format: Interactive experience
Platform: Desktop + Mobile
Engine: CSS 3D + Web Animations API
Type: Concept

How It Works

Every frame

Browse

One animation loop springs the shelf toward its target position, places each of the 60 tapes by its distance from the center, and turns the center tape 90 degrees on its vertical axis until its cover faces you. Dragging, scrolling, the arrows, the keyboard, and the decade tabs all move the same target, so every input glides through the tapes in between.

On hover

Tilt

Over the open cover, the cursor ring fills into an open button and the cover leans toward it; any other spine rises slightly on the shelf while you hover it.

On click

Open

A blank sheet starts at the cover's size and slight tilt, straightens as it grows to fill the screen, and the film's details rise into place line by line from behind masks.

After open

Reveal

The poster bleeds in through seven ink blots, circles roughened by a noise displacement filter that grow until they merge into the full image. With reduced motion on, every transition lands at once and the poster shows in full.

Engineering

Spine titles generated on their side
Every tape face is a generated image. When the model drew a vertical title on a tall, narrow strip, it misspelled the end of the word on 28 of 38 takes, and two titles never came back right. I generated one of those spines lying flat, so the title runs left to right, and rotated it a quarter turn; all three horizontal takes came back spelled right. The other came back crisp except for one doubled letter, which I cut out of the image.
A sheet that starts as the cover
The detail page opens from the cover itself, and the browser reports a tilted element's size as its upright bounding box, which is larger than the card. Before the sheet starts, I solve back from that box and the cover's tilt to its upright width and height, so the paper starts close to the cover's outline.
A shelf with no end
The shelf holds five copies of the twelve films and places each tape by its distance from the scroll position, wrapped into range, which keeps the seam past the edge of even an ultrawide screen. Tape spacing comes from one continuous curve, so the open cover and its neighbors slide smoothly through every in-between position, and the shelf settles on the nearest tape when you stop.

More projects

View project

Soda

Soda is a 3D product landing page where the can follows the visitor through four sections, turns once between each, and settles with its label facing out.

html5