Notes
Tasks
Links
Animated tabs
Cliffs at low tide
Pines after rain
Dunes at noon
Wireframes, the visual system and every screen state.
Components, pages and the motion that ties them together.
Testing, a soft release, then the public announcement.
mail.example.com
docs.example.com
listen.example.com
Bishop, ElizabethOne Art. Shelf 4, bay C.
Chekhov, AntonThe Seagull. Shelf 9, bay A.
Woolf, VirginiaTo the Lighthouse. Shelf 2, bay F.
09:30Morning. The office is filling up.
17:30Evening. Eight hours ahead of London.
04:30Before dawn. Wait a few hours to call.
The hunter, with three stars in a row for his belt.
A small lyre hanging from Vega, one of the brightest stars.
A queen on her throne, drawn as a crooked W.
Q1 · PlanResearch, roadmap and the first hires.
The arrivalA stranger steps off the last train.
The stormThe lights go out across the town.
The returnMorning, and one empty chair.
PROJECT NORTHMapping the coast with low-flying drones.
PROJECT HARBORA quieter engine for the night ferries.
PROJECT SUMMITWeather stations on the three high peaks.
Lisbon, 09:40, gate B12. Boarding.
Kyoto, 11:15, gate C04. On time.
Oslo, 13:05, gate A21. Delayed 10 min.
Cliffs, Sunday
Morning walk
Last night out
MailThree unread, one from the studio.
CalendarStand-up at 10, design review at 3.
PhotosForty new shots from the weekend.
MusicYour focus mix, 48 minutes left.
NotesGroceries, the talk outline and a poem.
import { spring } from './motion';
export function enter(el) {
return spring(el, { y: [8, 0] });
}
.card {
border-radius: 12px;
transition: transform 0.3s;
}
.card:hover { scale: 1.02; }
# Motion kit
Small helpers for UI motion.
npm i motion-kit
From MiaLisbon is all hills and tiled walls. A postcard is on its way.
From TheoThe band played our song last night. Wish you were there.
From AvaSnow at last! The cabin smells of pine and toast.
Six glasses so far today. Two to go.
One oat latte at 8:40. Easy does it.
A green tea after lunch, still warm.
Ada ParkProduct designer, Seoul. Says yes to coffee.
Contactada@example.com, +82 10 5555 0199
Met atConfig, the session on motion systems.
Burrata, peaches
Charred leeks
Oysters
Hake, brown butter
Lamb shoulder
Mushroom risotto
Olive oil cake
Plum sorbet
Brief.pdf
Contract.docx
Notes.md
Hero.png
Logo.svg
Team.jpg
2024.zip
Old site.zip
New bridge opens at dawn
Crowds cross before the ribbon is cut
The lost mural returns
Forty years in a basement, restored
Rowers win in fog
A finish nobody on the bank could see
Picks based on what you read this week.
New posts from the forty people you follow.
What everyone is talking about right now.
Twelve new messages, three of them flagged for today.
Your last message went out to the design team at 9:14.
Two drafts saved, the newest from this morning.
Night Drive by The Lumens
Paper Moon by Ida Grey
Slow Train by Marlow & Co
Pencil, pen and marker. Hold Shift for straight lines.
Rectangles, circles and arrows that snap to the grid.
Click anywhere to type. Double-click to edit.
Pick up where you left off: chapter nine.
The audiobook is at 2 h 14 min.
Eleven highlights, three with notes.
Hour by hour, with travel time between events.
Seven columns, today outlined.
The whole month at a glance, busy days shaded.
Forty limited prints, signed and numbered.
Monographs and catalogues, most out of print.
Correspondence from 1962 to 1978, in full.
Ferries every 20 minutes. Fish market on the left.
Covered stalls, open until two. Try the figs.
Free on Thursdays after five. Lockers inside.
Bandstand concerts on Sunday afternoons.
Japan
Peru
Iceland
Eight bars, left hand only, very soft.
The melody comes in; keep the pedal light.
Both hands, louder, and lean into the third.
Slow down over the last two bars and hold.
Green HillsCollect the stars before the sun sets.
Ice CavesMind the slippery floors and falling icicles.
Sky CastleThe last climb. Save your double jump.
PizzaMargherita, 12 min away
6:12 amFirst light, cool and still. Best for long shadows.
12:40 pmHard light from overhead. Look for shade.
7:58 pmThe golden hour, soft and warm.
Twenty-three recipes you marked to cook later.
Nine you made, with your own notes on each.
Four you sent to friends this month.
On breadEvery street shall have one good bakery.
On restSundays belong to long lunches and naps.
On musicThe square shall have a piano, always tuned.
EcoLower power, quieter fans, longer battery.
NormalBalanced for everyday work.
BoostFull clock speed while plugged in.
SilentFans off; the system throttles to keep cool.
About animated tabs
Animated tabs that make switching a moment: books tip off a shelf, a slot reel spins to your pick, curtains close on one act and open on the next, a stamp slams onto a passport. Every set follows the ARIA tabs pattern, with arrow keys, Home and End moving between tabs, and none needs an animation library. Pick a tab to see the change, then open it for the React or plain HTML, CSS and JavaScript version.