Directions explored

Before building, each direction was prototyped in code against a real snapshot of the DeoVR catalogue. They are throwaway explorations with limited functionality, kept so the decisions behind the final homepage can be seen and tried. Reasoning: docs/design-direction.md.

Round 1 · Structure

A

Marquee Not pursued

Cinematic streaming service: rotating full-bleed hero and themed horizontal rails.

Looks premium instantly, but hides the catalogue's breadth and does nothing for the VR-specific decision. Reads as a Netflix clone.

B

Viewfinder Stage kept

Focus-driven 10-foot UI: a stage plays whatever has focus, with shelves and a filmstrip below. Arrow keys or thumbstick.

Excellent in a headset, too slow to scan on desktop. Its featured stage and focusable alternates became the top of the final page.

C

Field Guide Grid kept

The grid, made VR-aware: every card carries the Immersion Signature, and discovery separates where from how it feels.

The most useful, but it felt safe. Its grid, signature, filters and quick view became the discovery layer under B's stage.

Round 2 · Spatial (WebGL)

D

Portals Shipped

Every card is a window: hover and move to look around inside the real 360° or 180° scene. A Planet toggle draws each video as its shape: spheres for 360°, domes for 180°.

Answers "what's it like there?" without leaving the grid. Became the portal cards, the "Where in the world" planets and Step inside.

E

Inside-out Moment kept

You stand inside the featured world, with a curved shelf in front of you. Pointing at a tile cross-dissolves the whole world to that place.

The biggest first impression, but a single shelf can't show a large catalogue. Its world crossfade now drives the stage alternates.

The result: B's stage as a real look-around world, C's grid with D's portals, E's crossfade, and WebXR "Enter VR" on headsets.

Open the homepage

Media and catalogue data © DeoVR and its creators, used for a non-commercial design prototype. Data from scripts/snapshot.mjs; equirect stills and loops from scripts/media.mjs.