Design Lab

Catalogue / Plate 28← All plates

A cloud front you can blow apart

A drift of pixel-block clouds you can blow apart, in front of a forecast.

28 / Motion · canvas

Sampleton Weather Station · five days

Clear by Thursday

Mon19°CSun, a light breeze
Tue17°CCloud building, dry
Wed14°CShowers by the afternoon
Thu16°CClearing from the west
Fri20°CSun and a few clouds

Move the pointer, or drag a finger, across the sky: the clouds blow apart and drift back together.

Cloud over the forecast cards: 0% of its blocks. The forecast is plain text and the same five days are listed in the page below the stage.

  • Mon: Sun, a light breeze, 19°C.
  • Tue: Cloud building, dry, 17°C.
  • Wed: Showers by the afternoon, 14°C.
  • Thu: Clearing from the west, 16°C.
  • Fri: Sun and a few clouds, 20°C.

Remake it

Build one interactive web page: Sampleton Weather Station. Clouds made of blocks drift across a five-day forecast and a block-drawn sun. Move the pointer or drag a finger through them and the blocks scatter and slowly come back together. A button hurries them on. The forecast is ordinary text with the same five days listed again below the stage, and a readout says how much of the lower half is covered.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A weather, travel or outdoor brand, an intro with something to clear away, a calm page that needs one thing drifting. Do not let it fail the way this kind of piece usually does: Content the effect hides. Here the clouds only drift in front, never block the pointer, scatter wherever you point, can be hurried off, and everything behind them is real text that is also listed in plain below the stage.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.
Notes: when it suits, when it does not, how it fails
When it suits
A weather, travel or outdoor brand, an intro with something to clear away, a calm page that needs one thing drifting.
When it does not
Pages where the words behind the effect carry the urgent point, since the cloud hides them while it passes.
How it fails
Content the effect hides. Here the clouds only drift in front, never block the pointer, scatter wherever you point, can be hurried off, and everything behind them is real text that is also listed in plain below the stage.

Measured on: labs.google · T5. Built from scratch for an invented business; nothing here comes from the site studied.