Catalogue / Plate 43← All plates
Shapes that fuse
Flat coloured discs that fuse with a smooth neck where they touch and snap apart as they part.
Sampleton Paint Co.
Colours that meet, mix.
Forty shades in the tin, and the best ones were never on the card.
Drag a disc into another, then pull it back out. Fling it and let go.
Discs: 0. Separate shapes right now: 0. Biggest fused shape: 0 discs.
Remake it
Build one interactive web page: Sampleton Paint Co. Big flat discs drift behind a headline. When two come close a neck grows between them and they become one shape, shading from one colour into the other; pull them apart and the neck thins and snaps. The neck is a drawn curve, not a filter. Drag a disc into another, fling it, pour them all together or flick them apart. The readout counts the separate shapes and the biggest fused one. Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A brand that is about colour or liquid, an intro, a loader, a calm page that needs one living thing. Do not let it fail the way this kind of piece usually does: Moving colour behind a headline, and a filter that costs a full-frame pass every frame. Here the text is dark on bright flat colour, the neck is drawn rather than filtered, the loop pauses off screen, and reduced motion keeps the shapes still. 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 brand that is about colour or liquid, an intro, a loader, a calm page that needs one living thing.
- When it does not
- Data-heavy pages and anything where moving colour behind text hurts reading.
- How it fails
- Moving colour behind a headline, and a filter that costs a full-frame pass every frame. Here the text is dark on bright flat colour, the neck is drawn rather than filtered, the loop pauses off screen, and reduced motion keeps the shapes still.
Measured on: labs.google · T6. Built from scratch for an invented business; nothing here comes from the site studied.