See it, copy the words, get the same result

Each example is a live demo with a ready-to-paste prompt, the technique and style words behind it, and copy-ready source. Pick one and tell your AI “make it like this”.

See the feature cards on a sample landing page: Tallyfern →

Compare: One idea, six ways: data syncing from a laptop to a phone 6

All examples 23

Clay sync: laptop to phone

feature card css keyframes inline svg svg gradients clay

Prompt tested

Flat sync: laptop to phone

feature card css keyframes inline svg flat vector

Prompt tested

Glass sync: laptop to phone

feature card css keyframes inline svg svg gradients glass

Prompt tested

Isometric analytics: rising bars and a climbing chart

feature card css keyframes inline svg svg clip path isometric flat shaded

Prompt tested

Isometric automation: conveyor and stamp

feature card css keyframes inline svg isometric flat shaded

Prompt tested

Isometric backup: files slide into a vault (Web Animations API, speeds up on hover)

feature card waapi inline svg isometric flat shaded

Prompt tested

Isometric collaboration: two cursors, one board

feature card css keyframes inline svg isometric flat shaded

Prompt tested

Dusk alerts: a spike lifts an alert card

feature card css keyframes inline svg isometric flat shaded

Prompt tested

Dusk deploy: build block to server rack

feature card css keyframes inline svg isometric flat shaded

Prompt tested

Dusk sync: laptop to phone, dark palette

feature card css keyframes inline svg isometric flat shaded

Prompt tested

Isometric integrations: four apps feeding one hub

feature card css keyframes inline svg isometric flat shaded

Prompt tested

Isometric notifications: tray, envelope and bell

feature card css keyframes inline svg isometric flat shaded

Prompt tested

Isometric routing: parcels on a curved route

feature card offset path css keyframes inline svg isometric flat shaded

Prompt tested

Isometric schedule: a calendar that fills itself in (SVG SMIL)

feature card svg smil inline svg isometric flat shaded

Prompt tested

Isometric search: magnifier over file stacks

feature card css keyframes inline svg isometric flat shaded

Prompt tested

Isometric security: shield dome over a locked server

feature card css keyframes inline svg isometric flat shaded

Prompt tested

Isometric sync: laptop to phone

feature card css keyframes inline svg isometric flat shaded

Prompt tested

Line-art sync: laptop to phone

feature card css keyframes inline svg stroke dashoffset line art

Prompt tested

Scroll story

Route drawing: a line that draws itself as you scroll

scroll story view timeline stroke dashoffset isometric flat shaded

Prompt tested

Brindlecove · Weekend trails

Find the quiet side of the coast

Ferries, footpaths and a bed for the night, planned in one go.

Plan less, walk more

Pick a stretch of coast and a weekend. Brindlecove lines up the ferry times, the footpaths between them and a place to sleep at the end of each day.

Pack for the weather you get

A short forecast for every stop sits beside the route, so the rain jacket goes in the bag on the right morning.

Scroll story

Parallax hero: landscape layers at three speeds

scroll story view timeline parallax flat vector

Prompt tested

Scroll story

Pinned scene: a desk that sets itself up as you scroll

scroll story view timeline position sticky isometric flat shaded

Prompt tested

Field notes · 4 min read

How Pellbrook keeps one shopping list for a whole house

Four flatmates, two supermarkets and one list that never forgets the oat milk.

One list, many hands

Everyone in the house adds to the same list from their own phone. An item added at the bus stop shows up on the kitchen tablet a moment later, with a small initial beside it so nobody buys the same loaf twice. There is no account to set up for guests: a visitor scans the card on the fridge and can add things for the weekend.

Aisles, not alphabet

Pellbrook sorts the list by where things sit in the shop you pick. Walk in through the fruit and vegetables and the list starts there, then moves past the bakery to the fridges at the back. Each shop learns its own order from the way you tick things off, so the second visit is already quicker than the first.

Quiet reminders

When someone passes a shop on the list, Pellbrook can send one gentle nudge with the three things still missing. It never sends more than one an hour, and it stays silent at night. If nobody needs anything, it says nothing at all, which turns out to be the feature people like most.

Receipts that split themselves

Tick an item as bought and it moves to a shared tab with its price. At the end of the month Pellbrook shows who paid for what and suggests the fewest transfers to even things out. The list stays light because finished items fold away, and the history is there when you need it.

End of article

Scroll story

Reading progress: a bar that fills as you scroll

scroll story scroll timeline editorial

Prompt tested

From desk to pocket in three steps

Scroll on: each step adds its piece to the picture.

Step 1

Start on your laptop

Draft the plan where you have room: routes, notes and bookings in one place.

Step 2

Pick it up on your phone

The same plan opens on your phone, ready for the platform or the queue.

Step 3

Kept in sync, quietly

Every change travels both ways through the cloud, so nothing is ever out of date.

Scroll story

Sticky steps: a picture that builds up step by step

scroll story view timeline timeline scope position sticky isometric flat shaded

Prompt tested

See it, copy the words, get the same result

All examples 23

Clay sync: laptop to phone

Flat sync: laptop to phone

Glass sync: laptop to phone

Isometric analytics: rising bars and a climbing chart

Isometric automation: conveyor and stamp

Isometric backup: files slide into a vault (Web Animations API, speeds up on hover)

Isometric collaboration: two cursors, one board

Dusk alerts: a spike lifts an alert card

Dusk deploy: build block to server rack

Dusk sync: laptop to phone, dark palette

Isometric integrations: four apps feeding one hub

Isometric notifications: tray, envelope and bell

Isometric routing: parcels on a curved route

Isometric schedule: a calendar that fills itself in (SVG SMIL)

Isometric search: magnifier over file stacks

Isometric security: shield dome over a locked server

Isometric sync: laptop to phone

Line-art sync: laptop to phone

Three harbour towns, one easy drive

Route drawing: a line that draws itself as you scroll

Find the quiet side of the coast

Plan less, walk more

Pack for the weather you get

Parallax hero: landscape layers at three speeds

One desk, everything in reach

Pinned scene: a desk that sets itself up as you scroll

How Pellbrook keeps one shopping list for a whole house

One list, many hands

Aisles, not alphabet

Quiet reminders

Receipts that split themselves

Reading progress: a bar that fills as you scroll

From desk to pocket in three steps

Start on your laptop

Pick it up on your phone

Kept in sync, quietly

Sticky steps: a picture that builds up step by step