JL
Sightline
[View live]

Sightline

Twenty-one wildlife frames hang on the surface of a sphere around the title. Drag to turn it and let go to watch it coast to a stop, scroll to move in closer, or switch to a flat grid of every frame. Click a photo and it lifts out of the sphere into a plate with its title, place, and field note. The photographer, Rowan Lind, is fictional, and every image, including the intro film, was generated with Runway.

  • html5
  • css3
  • javascript
Format
Interactive experience
Platform
Desktop + Mobile
Engine
CSS 3D + requestAnimationFrame
Type
Concept

How It Works

1
Before the first frame

Load

A splash screen holds until every photo and the intro film report in, with a minimum hold so it never flashes and a backstop so a slow network never strands it. The film then plays at double speed, and the page reveals under a black veil timed to land just before its last frame.
2
Every frame

Turn

Dragging rotates the whole world around the center of the screen, and releasing hands the last movement to a momentum loop that decays to rest. Pitch is clamped so the sphere never flips. On a phone, the drag only takes over once the gesture is clearly sideways, so a vertical swipe still scrolls the page.
3
On scroll

Approach

A short scroll track dollies the camera toward the sphere, stopping well short of its surface, while the title fades and the back of the sphere darkens.
4
On click

Open

The lightbox plate starts at the size and position of the card you clicked, then animates to the center of the screen with a FLIP transition. The card already on screen shows first, and the full-resolution still swaps in only once it has loaded. Closing animates the plate back to its card, in the sphere or the grid.

Engineering

  • A title that stays at the center

    The title lives inside the 3D world at the same point as the sphere's origin, so the nearest photos pass in front of it. Every frame, its transform cancels the world's rotation and then pushes it forward along its own axis. The words stay square to the camera and centered in the ring while the photos turn around them, on a desktop and on a phone.

  • Depth as a flat wash

    Each card's distance from the camera comes from rotating its position on the sphere by the current yaw and pitch, which takes a few multiplications instead of a layout read. That depth drives a black wash over the photo instead of a CSS filter, and the page writes a card's opacity or wash only when the value changes.

  • Decode once, size per screen

    Every photo is decoded once onto a canvas and scaled to a width set by the screen size, and that one copy feeds both the sphere card and the grid tile. The sphere is already laid out and turning behind the splash, so its first visible frame does not jump.

More projects

VHS ShelfView project

VHS Shelf

VHS Shelf is a concept filmography of twelve invented films, which I designed and built as a single page. The film at the center of an endless 3D shelf of worn VHS tapes turns out of the row to show its cover, and a click opens it into a full-screen sheet of paper.

html5
SodaView 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

Get in touch

Email me

Working end to end across design, creative, and engineering, where creativity, collaboration, and ownership build toward the company's goals.

jeffkliu@gmail.com