Showcase / Original concept
Signal
Atlas.
A fictional city-operations intelligence site. An original network map moves from atmospheric introduction to inspectable sample decisions.
Explore the working site
01 / Inspect the result
From a signal to a decision.
Scroll from the opening map into the operational explanation, then select mobility, energy, or weather. Each scenario changes both the route visual and the written signal, assessment, and proposed action. All values are sample data.
02 / Design pattern study
Make the metaphor earn its place.
The public SentientX experience ↗ informed the narrative structure: a reversible opening visual, a stable thesis beside changing evidence, and a shift from metaphor to proof to action. Signal Atlas uses its own subject, map, content, and graphic language.
- 01 / OPENING
One visual thread.
The angular network map connects the opening claim to a concrete model of routes and alerts. A bounded sticky desktop scene lets the map, dot field, and caption card move at different rates with native scroll, then rewind when the reader scrolls back.
- 02 / EVIDENCE
Context stays put.
A separate bounded desktop split keeps the explanation in view while three evidence cards enter and their illustrations move within the frames. On narrow screens, those beats become a simple reading sequence.
- 03 / CHOICE
A working state.
The scenario controls turn a cinematic idea into an inspectable interaction. Selected state, signal, assessment, and next action are available as text as well as color.
03 / Visual system
Dark for the question. Light for the answer.
Jay's Lab ivory, charcoal, Geist, and action lime anchor the page. Scenario colors are semantic accents. Rectilinear panels, hairline dividers, and angular paths make the system feel precise; large documentary imagery makes the abstract network easier to place in a city context.
The opening gives the message and map distinct space. Two bounded sticky desktop chapters carry the map progression and the evidence explanation, followed by a wide image chapter with a moving backdrop and a direct scenario workspace. Mobile stacks headline, map, evidence, image, and controls in reading order without parallax.
04 / Motion score
Scroll sets the pace.
The reference's exact durations and easing curves were not verified. These values are choices for this prototype, made to keep movement measured and reversible.
Settle into the scene
The headline settles over about 680ms with cubic-bezier(.22, 1, .36, 1) and a small upward translation. The map caption joins the scroll sequence.
Follow the scroll
Within a bounded sticky scene, the map translates, rotates, and grows as the dot field drifts and the caption card rises away. Native scroll position is the linear clock; scrolling back restores the earlier composition.
Make the cut
Cards enter the light evidence chapter while the figures inside move at a different rate. A stronger image drift creates depth in the photographic chapter; its text stays still. These effects are desktop only.
Compare scenarios
Route overlays fade in about 240ms; the written decision changes immediately and control colors respond in about 200ms. Controls stay interruptible, and reduced-motion mode keeps a complete static story.
- Project status
- Fictional public prototype. No city deployment, live feed, or validated operational result.
- Skill version
- None used. This page and working site were manually assembled; no private Design Skill output was used.
- Manual edits
- Original copy, network map, scenario content, layout, component styling, scroll progression, and responsive behavior.
- Quality and limits
- Lab lint, TypeScript, production build, and browser checks cover the public route and desktop/mobile interaction. Keyboard selection and focus were checked. Reduced-motion behavior is implemented in CSS but was not browser-emulated in this review.
Sample data / Generated illustration / No production backend