01 / LANDING
OPEN FULL SCREEN
Make the world move.
The front door, rebuilt as a scroll-driven film: a kinetic paper hero, a pinned eight-stop rail, a scrubbed manifesto, a fleet switcher and a photo wall.
A complete visual redesign for Traveler — the interactive route studio. Seven screens, one design system, zero lines of application code. Editorial type, a single signal colour, and a globe that never stops moving.
Neon cyan and magenta become international orange on warm paper and ink. Square chamfers become calm 14–20 px radii. Dense labels become one clear hierarchy: serif for scale, sans for action, mono for coordinates.
Every existing capability keeps a home: named routes, nine vehicles, the filmstrip timeline, photo drops, AI proposals, 4K export, guest preview, public player and the owner dashboard. No feature was cut for the redesign.
Static HTML mockups at 1440 × 900 and 390 × 844. The app's React, CSS and Worker code were not touched. This is the design artefact to react to before any implementation begins.
The front door, rebuilt as a scroll-driven film: a kinetic paper hero, a pinned eight-stop rail, a scrubbed manifesto, a fleet switcher and a photo wall.
Slate, shot list, monitor, margin and one filmstrip. The assistant is a pencil note in the margin; every note re-cuts the film.
Three 390 × 844 states: the editor, a paper manifest sheet, and an AI proposal. The timeline never covers the current stop.
The signed-out public route: oversized title, chapters, a photo card, and one quiet playback capsule.
Serif KPIs, an activity chart, the open → export funnel, grouped errors and service health — a dashboard you can read.
AI proposal, export film and share route — dark surfaces on paper, one accent, and nothing that competes with the globe.
Colour, type, grid, space, components and motion. One page to build every other screen from.
This is a design artefact for review. Open any screen full size, compare states, and mark what should survive. Nothing here changes the live application.