JL
Orbit
[View live]

Orbit

Fifty cards in six rings make a globe that turns slowly on its own. Drag it to spin and let go to watch it coast, tap a card and the globe rotates until that card faces you, then pulls it in to fill the center. Tour steps through the equator, Surprise me jumps anywhere, and Escape returns to the full globe. Orbit is a fictional brand, and every image and the looping dunes clip were generated with Runway.

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

How It Works

1
About 2s

Arrive

The globe starts far behind the screen and eases forward into place while the headline lines rise out of their masks and the rest of the interface fades in.
2
Every frame

Spin

Dragging adds to a target rotation, and releasing hands the last movement to a velocity that decays each frame. Every value eases toward its target with a correction based on frame time, so the motion feels the same at 60Hz and 120Hz. Pitch is clamped so the globe never flips.
3
On tap

Focus

A tap that moves less than a few pixels counts as a click. The page finds the card under the pointer with a hit test through the 3D stack, turns the globe the short way round to face it, and zooms until the card fills most of the screen. Arrow keys move along the card's ring.
4
Reduced motion

Rest

With reduced motion on, the globe stops its idle spin, the text appears without its rise, and the looping clip is never added, so those cards show their still.

Engineering

  • Sharp at full zoom

    A card scaled up by a CSS transform turns soft. Here every card is laid out at the size it has when focused, and the whole globe sits proportionally further from the camera, so the idle view and the close-up are the same pixels at two distances. The zoom distance comes from the perspective formula, so the focused card lands at its target width on any screen.

  • Video only where it plays

    The dunes loop is a ten-second clip whose first and last frames are the same image, trimmed by one frame so the seam does not stutter. It sits over its still and fades in only once playback starts, so a browser that cannot play it, or a visitor with reduced motion, sees the photo.

  • One file, original media

    The page is a single HTML file with no framework and no build step, and it loads only its own images. All twelve stills come from one prompt system with a shared lighting and palette suffix, so the set reads as one shoot.

More projects

SightlineView project

Sightline

Sightline is a concept wildlife archive of 21 photographs arranged on a sphere in CSS 3D, which I built as a single page. Drag the sphere to turn it, scroll to move the camera in, and open any frame into a lightbox that grows out of the card you clicked.

html5
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

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