Horizon · Side Project

Horizon turns the weather where you are into a moving sky you can stay with.

Horizon is an independent web tool. Choose a place and its live weather drives a procedural sky, made for looking rather than parsing a forecast. When the sky deserves the screen, the view can expand fullscreen.

Live product capture: Taiwan and Taipei selected. The canvas responds to the current weather and local time.

Overview

Horizon begins after a location is chosen. Its country and city controls supply a place, then the canvas turns the current weather there into a changing sky. There is little to scan on purpose: the controls stay at the edge while the scene is the output.

Problem

Weather interfaces usually ask people to read a condition. Horizon asks them to look at one.

A forecast organizes weather as readings and categories. Horizon needed to use the same changing conditions without making another weather dashboard. The interaction had to make a selected location meaningful while keeping the result open enough to watch.

Constraints

  • Weather arrives as changing values, not as a ready-made scene. The connection between a place, its conditions, and the rendered sky still had to feel legible.
  • Country and city selection had to remain clear on a page that otherwise behaves more like a viewing surface than a utility.
  • Fullscreen needed a clear way in and out, without becoming a separate version of the product.
  • The portfolio preview needed to stop moving for visitors who request reduced motion, while still showing a useful sky state.

My Role

I designed and developed Horizon independently. I decided which weather controls stayed visible, how those inputs became a visual system, and how the experience moves from a compact tool to a fullscreen view.

Translating Weather Into Sky States

A weather state is not a visual state until it has a rule.

The product converts the selected place's live conditions and local time into the sky. Cloud cover, wind, precipitation, and time of day affect the rendered scene, so choosing a city changes the atmosphere instead of only relabelling the page.

Key Decisions

Make weather a state, not a report.

Live conditions are inputs to colour, clouds, and movement. The product does not place a second set of readings beside the sky, so the scene remains the primary output.

Keep place selection plainly visible.

Country and city selectors sit together in the header. They answer the one required question before a sky can render without opening a separate search flow or obscuring the canvas.

Use fullscreen to change the job of the product.

A fullscreen control and double-click behaviour let the viewer leave the utility frame and give the sky the whole viewport. The controls do not need to become a second mode.

Make motion optional in the portfolio preview.

The homepage preview only updates while it is in view. When a visitor prefers reduced motion, it draws a still sky instead, keeping the project visible without requiring continuous movement.

Outcome

Horizon is live at horizon.now. The completed tool lets a visitor choose a listed location, see its current sky state, and expand the view. I do not have product analytics for this project, so this is shipped, observable scope rather than a usage claim.

Reflection

Useful weather information does not always need to begin as a forecast.

Horizon made the tradeoff clearer: a location can provide context without asking the viewer to inspect a dashboard. If the tool grows to cover more locations or weather behaviours, I would test whether the controls still stay out of the way instead of assuming the visual alone solves that problem.

More Work

Small tools sit alongside systems with more moving parts.

Return to the work index to see the broader product-design case studies.