Build a visitor guide section for a fictional seaside town, Port Quillan, on a near-black navy page (#0c111c): an amber (#f3b664) uppercase label, the serif heading "The same harbour, after dark" and "Hover a postcard to stay out late." Below, three postcards up to 300 by 380px, 16px radius, each an SVG scene drawn by day and by night and rendered to canvas: the harbour with a lighthouse and boats, Gull Head cliff path with lamp posts, and Chapel Street with coloured houses, lit windows and string lights. Hovering a postcard turns it to night with a pixel transition: cut the canvas into 15px tiles and flip each tile like a card, scaleY from 1 to 0 on the day image and 0 to 1 on the night image over 300ms ease-in-out, darkened at mid-flip. Each tile waits for its distance from the pointer entry point (up to 380ms) plus up to 260ms at random. Leaving flips it back from the exit point. A frosted pill swaps Day and Night icons and the caption crossfades, "Fish market on the quay from 8 am" becoming "Torchlit boats leave at 9 pm". Each postcard is a button with aria-pressed. On phones the cards become a scroll-snap row, tapping toggles, and the centred card flips by itself every 2.6s. Reduced motion swaps all tiles at once.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
- Copy the prompt with the button above.
- Paste it into your tool, such as v0, Lovable, Bolt or Claude.
- Make it yours by drawing your own two scenes, such as summer and winter or before and after.
About this pixel transition
This pixel transition swaps one picture for another the way a departure board changes, one small tile at a time. Each postcard is cut into 15 pixel squares, and every square flips over like a card, showing the daytime harbour on the way up and the lamplit night on the way down. The flips start where your pointer came in and spread across the card with a little randomness, so the change reads as a wave rather than a wipe.
Both versions of each scene are drawn in SVG and painted to a canvas once, so the animation is just copying squares between two images. The caption under each card changes with the picture, which turns a visual trick into something useful: what the place is like by day, and what is on after dark.
Why the prompt works
- It gives the tile size and flip timing, 15px and 300ms, which set the whole character of the effect.
- It defines the delay as a formula, distance from the pointer plus a random spread.
- It describes both scenes, so the tool draws two matching illustrations rather than fetching photos.
- It covers phones, with taps and an automatic flip on the centred card.
Where to use it
Travel guides, venue pages, before and after comparisons and seasonal product shots. Any two images with the same framing work, because the tiles line up perfectly.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
