Loading…
Live component · try it
Premiumimage · scroll · light
Colour Sweep Image
Photos that sit in black and white until they earn colour: as each one crosses the middle of the viewport a wipe of colour sweeps across it from the left, and hovering sweeps it back to grey. The sweep is a moving mask over a coloured copy, so the grey never fades, it is overtaken.
Placeholder photos by Iswanto Arif, Dylan Jenkinson and Kyle Glenn on Unsplash. Replace them with your own before launch.
The mechanic
Colour layer mask: `linear-gradient(100deg, #000 50%, transparent 50%)` at `mask-size: 220% 100%`, `mask-position: 100% 0` (hidden) → `0 0` (shown) over 0.8 s `cubic-bezier(.76,0,.24,1)`. The observer at 50 % visibility adds `.on`; `:hover` removes the effect by moving the mask back. The grey layer is always present beneath.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
