earth.nullschool — Wind map

Maps & SearchSee it liveearth.nullschool.net

The entire interface is nine characters of grey text and a hamburger glyph in one corner. A rendered globe of animated wind particles on pure black IS the app.

earth.nullschool — Wind map — captured interface — Page excerpt · scroll inside to explore

Source capture · 2026-08-01Open full image ↗

Search & discovery Dashboards

Why this pattern works

About earning the right to hide all your chrome. When the underlying visualisation is strong enough to be the whole product, delete every piece of UI except the one entry point back into it — here, a single label plus a menu glyph, ~14px, bottom-left. This only works if the render already reads as compelling with zero labels, zero legend and zero header — steal the confidence to remove, not the specific glyph.

Design notes

Surface: earth.nullschool.net default view, animated globe of global wind
Navigation: Effectively zero tiers. One text label ('earth') and one hamburger glyph, bottom-left corner, ~14px, both in muted grey-white on black — that is the entire navigational surface. Presumably opens a settings/layer panel on click; nothing about that panel is visible or hinted at otherwise.
Layout: Single fixed canvas, pure black, edge to edge. The globe sits centered with generous, even black margin on all four sides — no sidebar, no header bar, no footer, no legend panel taking any of that space.
Density: As sparse as an interface can be and still be interactive. Built for someone who already knows the tool and wants nothing standing between them and the data.
Color: Black canvas, nothing spent on chrome. The only colour on screen lives inside the visualisation itself — a wind-speed gradient (deep blue for slow air, green for fast) rendered on the globe, plus faint white coastline strokes and a barely-there lat/long grid.
Type: One label. Lowercase 'earth', thin/light weight, ~14px, grey — deliberately quiet, not a title.
Pattern: Chrome-as-afterthought: every control that would normally live in a header, sidebar or overlay is folded into a single hamburger glyph, so the visualisation owns 100% of the screen until the user explicitly asks for controls.
States: No empty, loading or logged-out state visible in this shot — implies the globe renders directly on load with no auth wall and no configuration step required before first paint.
Don't: Don't add a legend, a title bar, a search box or a data readout 'for context' — the whole point is that none of that earns its pixels next to a visualisation this legible on its own. Adding chrome back is the single easiest way to ruin this screen.

Make it your own

Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.

Your project

Use withI want to

Tech stack

Add constraints

What should the tool respect?

Preview & edit prompt

Prompt text

# My project
[Describe the product, audience, and screen you want to improve]

Stack: Use the existing project stack
Task: Implement the interface and verify the result in the existing project.

## Tool guidance (Any AI tool)
Use available project tools to inspect, implement, and test. State any unavailable capabilities.

# Design reference: earth.nullschool — Wind map
Source: https://earth.nullschool.net/
Swipefile reference: https://swipefile.design/ref/nullschool-earth/
Captured: 2026-08-01. This is a dated reference, not a claim about the current live product.
Capture scope: a page excerpt. Do not infer unseen sections or interactions.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- surface: earth.nullschool.net default view, animated globe of global wind
- nav: Effectively zero tiers. One text label ('earth') and one hamburger glyph, bottom-left corner, ~14px, both in muted grey-white on black — that is the entire navigational surface. Presumably opens a settings/layer panel on click; nothing about that panel is visible or hinted at otherwise.
- layout: Single fixed canvas, pure black, edge to edge. The globe sits centered with generous, even black margin on all four sides — no sidebar, no header bar, no footer, no legend panel taking any of that space.
- density: As sparse as an interface can be and still be interactive. Built for someone who already knows the tool and wants nothing standing between them and the data.
- color: Black canvas, nothing spent on chrome. The only colour on screen lives inside the visualisation itself — a wind-speed gradient (deep blue for slow air, green for fast) rendered on the globe, plus faint white coastline strokes and a barely-there lat/long grid.
- typography: One label. Lowercase 'earth', thin/light weight, ~14px, grey — deliberately quiet, not a title.
- pattern: Chrome-as-afterthought: every control that would normally live in a header, sidebar or overlay is folded into a single hamburger glyph, so the visualisation owns 100% of the screen until the user explicitly asks for controls.
- states: No empty, loading or logged-out state visible in this shot — implies the globe renders directly on load with no auth wall and no configuration step required before first paint.
- dont: Don't add a legend, a title bar, a search box or a data readout 'for context' — the whole point is that none of that earns its pixels next to a visualisation this legible on its own. Adding chrome back is the single easiest way to ruin this screen.

Useful for: About earning the right to hide all your chrome. When the underlying visualisation is strong enough to be the whole product, delete every piece of UI except the one entry point back into it — here, a single label plus a menu glyph, ~14px, bottom-left. This only works if the render already reads as compelling with zero labels, zero legend and zero header — steal the confidence to remove, not the specific glyph.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.

Assembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

earth.nullschool — Wind map

Make it your own

Keep exploring