Meridian

Meridian showcase 06 / 09

Demonstration page. The business is invented, the words are sample copy, and this is not work done for a client.

All nine

Verdigris Paint Works - Paint manufacturer

Two greens that behave differently at four o clock.

Small-batch mineral paint in forty-two colours, ground and tinted in one works and sold by the two and a half litre tin.

42 colours

Each one drawn down on card, not printed

Every sample card is painted with the actual batch, so what arrives in the post is the paint rather than a photograph of it.

Two colourways

The same wall, painted twice, at the same hour.

Both colours are named below with their behaviour written out, because a page that hides half its information inside a hover has not communicated it.

  • Verdigris 04Cool, slightly grey, holds up in north light
  • Ochre 21Warm, opaque, goes green under a low sun

On a desktop pointer the panel repaints in Ochre 21 under the cursor. On a phone it stays in Verdigris 04, which is why both are written out here.

Order sample cards

Two coats, mineral base, matt

Drawn down on card, photographed flat, colour uncorrected.

The rest of the range

Twelve of forty-two. The full range is on the sample card order form.

  • Pigment

    Mineral, not plastic

    Lime and silicate bases with mineral pigment. The finish is matt because of what it is made from, not because a matting agent was added.

    01

  • Batch

    Ground in small runs

    Tinting happens in the same works as grinding, so a repeat order is matched against the retained sample from your first one.

    02

  • Coverage

    Told honestly

    Coverage on the tin is measured on bare plaster with no primer, which is the worst case rather than the flattering one.

    03

Six cards, painted from the tin, posted flat.

Order sample cards

Verdigris Paint Works

Six cards, painted from the tin, posted flat.

Choose any six of the forty-two. Cards are A5, painted in two coats, and the cost comes off your first order.

That is where the demonstration ends. Verdigris Paint Works is invented, so the buttons above lead here rather than anywhere. These two do work.

Build a page like thisThe other eight

What you are looking at

Technique
Pointer-driven mask
Why here
A paint company sells the difference between two colours in the same light, and no static image shows that. A soft radial mask follows the pointer and paints the second colourway through the first, so the comparison happens where the reader is looking rather than in a slider they have to operate.
With animation off
The mask layer is never rendered at all unless there is a fine pointer and motion is allowed. Both colourways are named and swatched in the copy regardless, so nothing is only available by hovering.
  • mask-image with a radial gradient
  • one rAF loop, no React state
  • hover and pointer gating
  • magnetic wrapper offset

Demonstration page. The business is invented, the words are sample copy, and this is not work done for a client. Verdigris Paint Works does not exist. Built by Meridian to show one technique working, and to show what it does when nothing is allowed to move.

All ninePricesNext 07

Order sample cards
Magnet - landing page example - Meridian