01
Exits are quicker than entrances.
Arrive with care, leave out of the way.
ui lab / by xevrion
Things I made because I liked how they felt
Not a library, just a lab. Small interaction experiments I built in React while learning motion and detail. Each one has a live demo and its source, if you want to see how it works.
178 components
/
- Pressto searchsource
Keycap hint new
Keycaps that sink when you press the real keys.
- source
A small caps lock key with its light on slides into the field when caps is on.
- source
Eye toggle new
The eye shuts when your password is hidden and watches while you type.
- source
Checks itself off with a quick pen stroke and strikes the words through.
- Inbox, 8 unreadsource
Badge counter new
Rolls its digits the way the count moved and bumps each time it changes.
- source
Star button new
Spins once and throws off tiny sparks when starred, then rolls the count.
- source
Follow button new
Turns its plus into a check as you follow, and warns before you unfollow.
- Live, about 1,284 watchingsource
Live indicator new
Breathes while live, lets the viewer count drift, and blinks hollow while reconnecting.
- source
Mini clock new
A tiny analog clock that sweeps in its city's time and turns dark after sundown.
- LoadingLoadingLoadingsource
Pixel loader new
A tiny pixel grid that cycles spiral, snake, pulse and checker, then draws a check when done.
- try dragging this!source
Arrow callout new
A handwritten note whose arrow draws itself to whatever it points at.
Tap listen to talk
sourceVoice orb new
A glassy orb of drifting mist that listens to your real mic, thinks in a slow swirl and breathes as it speaks.
Maya ChenIncoming video callMaya Chen is callingsourceCall widget new
Accept turns into hang-up as the call controls unfold out of it, one by one.
The stack
The tools behind the lab
sourceLogo orbit new
Logos orbit a heading on tilted rings, passing behind it, and brake to a stop when you point.
- source
Rolls forward like a mechanical counter and wraps from 999 back to 000.
- source
Fills slowly while you commit to it, snaps back the moment you let go.
- source
The pill stretches toward your pick like an inchworm, recoloring each label as its edge crosses.
- ui lab004xevrion2026source
Leans toward your cursor with a glare that follows the light.
- source
Icons swell as your cursor nears them, and launch with a macOS-style bounce.
Lab notes
Drag this sheet down to close it. A quick flick works too, and dragging it up pushes back.
sourceDrag it down or flick it away; pull it up and it pushes back.
- source
Stacks with depth, fans out on hover, and each toast's edge drains as its timer.
- source
Stretches like rubber when you drag past the end, then springs back.
- source
Stretches toward your cursor like soft rubber on a magnet, then wobbles home.
- source
Fling a card away and the rest of the deck steps forward.
$ bun add motionsourceThe two pages merge into one before a check draws itself in.
- Projects
Press / to search
sourceOpens from a circle into a search field, and closes faster than it opens.
A collection of small interface components, each built to get the details right: timing, easing, focus and both themes.
React with Tailwind, CSS transitions wherever they can do the job, and Motion only for springs and gestures CSS cannot express.
Yes. Every component is a single file with no setup, so copy it into your project and adjust the tokens to match.
It does. Movement drops out and only gentle fades remain, so every state change is still clear without anything sliding around.
sourceAnswers unfold from under their question like a folded flap, and the row you clicked never moves.
- source
Grows from its slot into a detail view and folds back when you are done.
Try 123456
sourceSix slots mirror one real input, so paste and SMS autofill just work.
- source
Leans into the move when pressed, then springs across and squashes on landing.
- source
Opens on ⌘K and filters commands as you type.
- Nuvole bianche5:57
- Holocene5:37
- Retrograde3:43
- Weightless8:09
- Svefn-g-englar10:04
Press Space to pick up. While holding, use the arrow keys to move, Space to drop, or Escape to cancel.
sourcePicks rows up by the handle and slides the rest out of the way.
- source
Drag the line to see what polish actually changes.
- source
Slides between steps while the card grows around each one.
- source
Shrinks into a progress ring, fills, then checks off.
- Bold, ⌘BItalic, ⌘IUnderline, ⌘UStrikethrough, ⌘⇧XCode, ⌘EQuote, ⌘⇧9
Scan the toolbar, not the docs.
sourceOne tooltip slides from button to button and reshapes around each label.
- source
Grows out of its trigger, and press, drag, release picks an item like a native menu.
- 00:12source
Morphs between live states with a springy, Apple-style bounce.
- Transformsource
Drag the label and a tape measure runs under the needle, or just type.
How was your stay?
sourceHover to preview, click to commit with a little pop.
- source
Pops, bursts and rolls the count when you like.
- 3 projects are live. Build times are down 12% since last week.source
An underline stretches toward the tab you pick while a soft pill follows your pointer.
- source
A pill that inches between pages like a worm and counts down to the next.
Home
Everything that moved since you last checked in.
- Q3 planning notesEdited 2h ago
- Onboarding checklistEdited yesterday
- Design reviewEdited Monday
sourceFolds down to an icon rail, with labels that step aside before it closes.
- source
Snaps cards to center, drags with the mouse, and each card acts out its motion principle.
- Loading profilesource
Holds the exact shape of what is coming, so nothing jumps.
- Press Shift F10 for actions
Right-click anywhere
Long-press on touch, Shift F10 from the keyboard
sourceOpens at your cursor and grows from it.
Notifications
- Unread: Sam invited you to Q3 planning5m
- Backup completed1h
- Welcome to the workspace2d
sourceRings when something new arrives, and the badge rolls up with each one.
- source
Fans open when you reach for it, with a name above each face.
- source
Shrinks into a spinner while it saves, then answers with a check or a shake.
Press Space to pick up. While holding, use the arrow keys to move within or between columns, Space to drop, or Escape to cancel.
sourceLift a card and the others slide aside to make room for it.
- source
The ring glides to the color you pick and the color floods the preview from that side.
- source
Months slide past in the direction you travel.
- source
The label peels up letter by letter, and never covers what you wrote.
- 8 or more characters, not met
- A number, not met
- A symbol, not met
sourceReveals the password with a wave of dots turning into letters; the meter fills as it gets stronger.
- source
Rows fade out of the way while the rest slide up to close the gap.
- source
Ticks light up as the value sweeps in, and a peak marker holds where it was before falling.
Response time
107 ms
-13 ms vs Aug 25
Response time Day Value Aug 25 120 ms Aug 26 112 ms Aug 27 121 ms Aug 28 125 ms Aug 29 126 ms Aug 30 124 ms Aug 31 124 ms Sep 1 120 ms Sep 2 121 ms Sep 3 126 ms Sep 4 122 ms Sep 5 116 ms Sep 6 121 ms Sep 7 122 ms Sep 8 116 ms Sep 9 114 ms Sep 10 111 ms Sep 11 112 ms Sep 12 109 ms Sep 13 118 ms Sep 14 114 ms Sep 15 121 ms Sep 16 116 ms Sep 17 109 ms Sep 18 104 ms Sep 19 100 ms Sep 20 101 ms Sep 21 106 ms Sep 22 99 ms Sep 23 107 ms sourceDraws itself in, then scrubs to the nearest point under your cursor.
Focus hours
36.7 h
sourceGrows its bars from the baseline and springs them between two weeks.
Drafts
Launch notes
Three fixes, one new component, and a faster index. Ship Thursday after review.
Share draft
Anyone with the link can view. Invite people to let them edit.
Invite people
They'll get an email and can edit right away.
sourceStacks iOS sheets that push the page back and drag down to dismiss.
- Click to celebrate, or hold for a bigger one.source
A click pops confetti; hold it and the fuse burns until the whole thing blows.
- motion
- design
- react
Press Enter or comma to add. Backspace twice removes the last tag.
sourceYour typed words stay put while a chip forms around them.
- Price$200 to $750source
Two thumbs that glide, stop at each other, and show their value as you drag.
- Linen shirtOat, M · $48.00
- Canvas toteNatural · $24.00
- Wool socksCharcoal, 2 pack · $12.50
Total$133.50sourceRolls each digit the way the count moves, and speeds up the longer you hold.
- Time zoneWeek starts onsource
Opens with your current choice sitting exactly on the button, macOS style.
- Q3 roadmap.pdf2.4 MB, edited 2h ago
- Invoice 0142.pdf86 KB, edited yesterday
- Team offsite.jpg4.1 MB, edited Monday
- Interview notes.md12 KB, edited Aug 29
sourceDeletes instantly and gives you five seconds to change your mind.
- source
Its dashed edge marches when a file enters the window and seals solid when it is overhead.
- MayaOnlinesource
Replies arrive after a beat of typing, and the thread follows only if you are.
Click a tile to see how it finishes
sourceFour loaders that each know how to finish: leapfrog dots, an inchworm bar, a ring that closes into a check.
- source
Spins through the hours on a curved drum, just like iOS.
- Drag to the end, or press Entersource
Drag the knob all the way across to confirm.
Following
Ava Chen@ava · 7m
Shipped the new onboarding today. Two screens instead of five.
Ben Ortiz@ben · 14m
Hot take: most loading spinners should be skeletons.
Cara Nwosu@cara · 21m
Springs over durations for anything you can touch. Every time.
Dev Patel@dev · 28m
Rewrote the settings page with plain CSS grid. Deleted 400 lines.
Fay Laurent@fay · 35m
The best animation is often the one you remove.
Ava Chen@ava · 42m
Anyone else test gestures at 10% speed? It changes everything.
Ben Ortiz@ben · 49m
Tabular numbers in every table, please.
Cara Nwosu@cara · 56m
Friday demo went well. The drag-to-reorder finally feels right.
sourcePull the feed down and new posts slide in at the top.
Last week shipped the new motion guidelines, rebuilt the gesture system on top of them, and is already writing the docs. Hover a name to meet them.
sourceOne card travels between names as you hover them.
- src
- app
- layout.tsx
- page.tsx
- globals.css
- lab
- components
- code-block.tsx
- reading-progress.tsx
- tree-view.tsx
- registry.ts
- lib
- cn.ts
- public
- favicon.svg
- og.png
- package.json
- README.md
sourceFolders unfold in place while the selection glides to the file you pick.
Starter
For side projects.
$9 per month
- 3 projects
- Basic analytics
- Email support
Pro
PopularFor growing products.
$24 per month
- Unlimited projects
- Full analytics
- Priority support
Team
For whole companies.
$59 per month
- Everything in Pro
- Shared workspaces
- SSO and audit log
sourceEach digit rolls to its new price on its own, and new digits grow in.
- Design notes2 min left
Motion people never notice
Most interface motion goes unnoticed, and that is the goal. When a menu opens from the button you pressed, or a toast leaves the way it came in, nobody stops to admire it. They simply understand what happened and carry on. Good motion answers a question before the user thinks to ask it.
Bad motion is the opposite. It asks for attention it has not earned. A dialog that takes half a second to appear feels slow even when the network is instant, and a list that staggers in on every visit turns a quick glance into a small wait. The cost is paid every single time the thing happens.
Start from frequency
The first question is how often someone will see an animation. Something used a hundred times a day, like a command palette, should appear at once. Something seen a few times a day, like a drawer or a modal, can take around two hundred milliseconds. Something rare, like finishing onboarding, has room for a little delight.
Easing matters as much as duration. An ease-out curve moves quickly at the start, so the interface responds the moment you act, then settles gently. An ease-in curve does the reverse and feels sluggish, because the slow part lands exactly when you are watching most closely.
Motion as explanation
The best animations explain structure. A panel that slides in from the right tells you it can be dismissed by sliding it back. A highlight that glides between tabs tells you the tabs belong together. Change the element without motion and you lose that small lesson about how the interface is built.
Finally, motion should always be interruptible. People change their minds mid-gesture, click twice, or press Escape halfway through an opening. Transitions and springs can reverse from wherever they are; fixed keyframes restart from zero and feel broken. Build for the interruption and the rest tends to follow.
sourceA progress bar fills as you read while the time left counts down.
- import { cn } from "@/lib/cn";type ButtonProps = React.ComponentProps<"button">;// Scales to 0.96 on press, so the click feels physical.export function Button({ className, ...props }: ButtonProps) {return (<buttonclassName={cn("h-10 rounded-full px-4 transition-[scale] duration-150 active:scale-[0.96]", className)}{...props}/>);}export default function Demo() {return <Button onClick={() => console.log(42)}>Save</Button>;}/* Strong ease-out: responds at once, then settles. */.button {height: 40px;padding: 0 16px;border-radius: 999px;transition: scale 150ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease;}.button:active {scale: 0.96;}@media (prefers-reduced-motion: reduce) {.button {transition: background-color 150ms ease;}}source
Switch files with a sliding underline and copy with one click.
A decorative grid of dots that swell and move away from the pointer. Clicking sends a ring outward through the grid.
sourceDots swell and part around your cursor, and a click sends a shockwave.
Instant sync
Edits land on every device before you switch tabs.
Works offline
Keep writing on a plane. Changes merge when you reconnect.
End-to-end encrypted
Only you and the people you invite can read your notes.
Full history
Step back to any version, down to the keystroke.
sourceThe cursor is a lamp: cards catch its glow and their icons cast shadows away from it.
- 1 / 5
12k. People tried the lab this week.
sourceTap through stories, hold to pause.
web Ready main 1m 34s Sep 22 api-gateway Building feat/rate-limit 3m 32s Sep 23 docs Ready main 41s Sep 19 billing Error fix/invoice-tz 2m 37s Sep 21 auth Ready release/2.4 2m 08s Sep 17 search Queued chore/deps - Sep 23 analytics Ready main 5m 05s Sep 14 mailer Ready feat/digest 1m 16s Sep 20 0 selectedsourceSorts, selects and bulk-acts on rows without losing its place.
- Ava Morenoava@acme.dev
- Ben Okaforben@acme.dev
- Cara Lindqvistcara@acme.dev
- Dev Ramandev@acme.dev
- Fay Nakamurafay@acme.dev
- Hugo Brandthugo@acme.dev
- Isla Carvalhoisla@acme.dev
- Jonah Weissjonah@acme.dev
sourceThe person you pick flies out of the list and into the field.
No dates selected
Pick a start date
sourcePaints the range as you hover, then commits it on the second click.
@ava · Lisbon
sourceEdits your name and bio in place without moving a pixel.
northwind-web
Deployed 2 hours ago
sourceOpens a modal over the page, with a confirmation that stacks on top of it.
Showing 1-5 of 100
- Harbor SupplyINV-1001$119.19
- DriftlineINV-1002$198.38
- Kestrel AirINV-1003$277.57
- Granite WorksINV-1004$356.76
- Cobalt & CoINV-1005$435.95
sourceNumbers roll in place like an odometer; the one you click never moves.
Deploys now build twice as fast.
See what changedNorthwindOverviewDeploymentsSettingsOverview
Three deploys today, all healthy.
Requests
1.2M
Latency
84 ms
Errors
0.02%
sourceDismissing folds the bar away and the page slides up to fill the gap.
- source
Press ? anywhere to see every shortcut, then press one to watch it light up.
Drag the ball and let go, or press Play.
- Settles
- 0.51s
- Overshoot
- None
- Damping ratio
- 1.01
- Behaviour
- Critically damped
Menus, toggles, anything clicked all day. Fast and never overshoots.
How hard it pulls to the targetHow fast the motion dies outHeavier is slower and swings longerRoughly visualDuration 0.25, bounce 0 in perceptual terms.
{ type: "spring", stiffness: 500, damping: 45 }sourceTune a spring and watch its overshoot and settle, plotted live.
Drag a handle. Arrow keys nudge, Shift more.
PreviewThings entering or answering a click: dropdowns, toasts, modals. The fast start feels instant.
cubic-bezier(0.23, 1, 0.32, 1)sourceDrag a cubic-bezier into shape and see it move.
30 to 80ms per item feels natural. Longer starts to feel slow.
Each row is a tile, in grid orderDone at 850ms Last tile finishes at 850 milliseconds.
Easingease-outDirectionNatural. Reads as a sequence without waiting.
Delay = position in the list × delay per item.
sourceShows what per-item delay actually does to a list entrance.
Get started
1 of 5 complete
20%Projects keep pages, settings and people together in one place.
Work goes faster together. Each teammate gets their own login.
Link a repository so commits and pull requests show up here.
Choose where you hear about mentions and reviews: email, desktop or both.
Add a logo and a name so the space feels like yours.
sourceA setup checklist that counts up as you go and celebrates the finish.
- source
Turns over in 3D to show what is on the back.
- source
Icons reshape themselves between states instead of swapping.
- source
Cards pile up and sink back as you scroll.
- Launch checklist
Pricing page, changelog, and the email to the waitlist.
Open questionShip dark mode first, or keyboard shortcuts?
IdeaLet people pin their favourite components to the top.
Done this weekSpring presets and the new docs sidebar.
You found itPress 0 to head home, or Fit to see everything.
Drag or scroll to pan, pinch to zoom. Ctrl and scroll also zooms. Arrow keys pan, plus and minus zoom, 0 resets.
sourcePan, pinch and zoom around a board of notes.
Documents
16 items
0 selected
Arrow keys move, Space toggles, Shift with arrows extends the selection, Control or Command A selects all, Escape clears.
sourceDraw a box across files to select them, like the desktop.
Drag to reorder, or press Space to pick up, arrow keys to move, Space to drop and Escape to cancel.
sourceDrag an app tile and the others slide out of its way.
A decorative grid of short lines that turn to point at the pointer, like iron filings around a magnet, and drift in a slow wave when left alone.
sourceLines turn toward your cursor like iron filings near a magnet.
- source
One dropdown panel reshapes and slides as you move between menu items.
Recent
sourceDrag a color out of the square, then fine-tune hue and opacity.
- source
Formats as you type, spots the card brand, and flips to show the CVC.
- source
The selection ring glides to the plan you pick.
Shift click to select a range
sourceCheck marks draw themselves in, and Shift-click fills a range.
- Cart
- Shipping, not started
- Payment, not started
- Done, not started
sourceFills the line toward the next step and unfills it in reverse.
- source
One toast that morphs from saving to saved, or to an error with retry.
q3-report.pdf
2.4 MB, edited 3h ago
Delete this file?
This can't be undone.
sourceAsks before deleting, from a popover that grows out of the button.
Activity
Mira commented on #482
2m agoLooks good, one nit on the spacing.
Yash pushed to main
18m agofix: debounce the search input
Deploys shipped v2.4.1
1h agoProduction, build finished in 48s
Yash replied on #479
3h agoPinned it to the top, try again?
Arjun pushed to feat/timeline
1d agofeat: relative times that update
sourceNew events slide in at the top as the line grows to meet them.
Drag the edge to resize. Folded folders live behind the dots.
sourceFolds the middle of a deep path into a menu when space runs out.
- 3 projects are live. Build times are down 12% since last week.source
Scrolls a long row of tabs, fading whichever edge still hides more.
Home
Three things on today.
- Standup notes9:30, with the design team
- Review tab bar11:00, two comments open
- Ship the releaseBefore 5, tagged v2.4
sourceA phone tab bar whose pill slides over and fills in the icon it lands on.
Good interfaces are made of details nobody notices. The press that gives a little under your finger, the menu that grows out of the button you clicked, the toolbar that appears right where your attention already is.
Select any part of this note to format it. Try a word on the first line too: with no room above, the toolbar flips below the text.
sourceA formatting toolbar that grows out of whatever text you select.
- 01
ResponseFeedback lands on press.
Response, card 01 of 08
sourceSpin a ring of cards and flick it to land on the one you were aiming for.
- Under the lens, the card shows its specs: 16px radius, 20px padding, a 36px avatar, 18px semibold title and 14px body. Arrow keys move the lens, Enter makes it larger.Ada Sørensen2 min read
Springs are behaviour, not a timeline.
A target that moves mid-flight bends the path instead of restarting it.
sourceA lens follows your cursor and shows the specs hidden under a card.
- source
Pull a string and let go to watch it ring back to rest.
40px 56px Demo state only. The lab's own theme stays as it is.
sourceA sun that folds its rays away and turns into a crescent moon.
Essay
Notes on interruptible motion
Why a transition that can change its mind halfway feels faster than one that always runs to the end.
6 min readsourceFills from the bottom up and lands with a small squash.
- source
The plane takes off along a curve, and a check lands in its place.
brand-assets.zip
24.8 MB
sourceThe arrow drops into the tray while the button fills with progress.
3,853 contributions in the last year by @xevrion
sourceA year of activity at a glance, sweeping in week by week.
Visits by source
Last 30 days
Visits by source, last 30 days Category Value Share Organic search 4,820 42% Direct 3,140 27% Referral 1,760 15% Social 1,190 10% Other 640 6% sourceDraws itself in, then lifts whichever slice you point at.
Overview
Compared with the previous day
- Revenue
- $48,210, +4.1%
- Users
- 12,480, +2.1%
- Conversion
- 3.42%, +2.2%
- Latency
- 184 ms, -4.5%
sourceNumbers count up to their value; scrub a sparkline and the figure rolls back through its history.
Weekly league
Round 1
- 1st, Amara Okafor, 2,480 points
- 2nd, Jonas Weber, 2,310 points
- 3rd, Mei Tanaka, 2,265 points
- 4th, Rafael Costa, 2,140 points
- 5th, Sara Lindqvist, 2,055 points
- 6th, Gus Holm, 1,990 points
- 7th, Ivy Nakamura, 1,920 points
- 8th, Jon Reyes, 1,875 points
sourcePlayers glide past each other to their new ranks.
- Phone numberType digits to dial them. Backspace deletes.source
Drag a hole to the finger stop and each digit lands as the disc unwinds.
- Shelf depth28.0cmLocked
Pull the tab to measure. Release the lock to reel it back in.
sourcePull the blade out to measure; release the lock and it reels itself back in.
- Pull the chainsource
Pull the ball chain to switch the site's lights; light pours from the bulb as a cone.
- RightLeftRight
Try 12, 30, 7. Arrows turn, Enter sets a number.
sourceSpin right, left, right to fill each number, then turn the handle to open.
- Pending
EXP-2041
Design offsite, Goa
Priya Shah, Product design
- Flights, BOM to GOI
- $486.00
- Hotel, 2 nights
- $412.00
- Team dinner
- $96.40
Total$994.40sourceStamps a document approved or rejected, with ink that looks pressed in.
- Due Fri
Call the landlord
Ask about the radiator before it gets cold.
5 reminders left
sourcePeel the top reminder off by its corner to mark it done.
Paper loaded
sourceFeeds a receipt out of the slot line by line; twist it against the cutter to tear it off.
- Arrow keys change the day, Home returns to today. Drag the page up for the next day, down for the previous one.
Wednesday, 23 September 2026
Today
sourceTear a day off to move forward, pull one back to go back.
Take the new offer?
Leaning yes: pros outweigh cons by 2Pros6
- Higher salary
- Sharper team
- New stack to learn
Cons4
- Longer commute
- Less vacation
sourceWeighs your pros against your cons on a balance that tips and slowly settles.
Laps
Tap the sheet or use the arrow keys
sourceCounts in hand-drawn tally marks, one pen stroke at a time.
- 122 of 160 characters remainingsource
Drains a glass inkwell as you spend your character limit.
- At rest0 words per minutesource
Records the rhythm of your typing on a scrolling seismograph.
Send feedback
Tell us what to fix. We read every note.
Ctrl + Enter to sendOn its way
Thanks for the note. We read every one.
sourceFolds your note into an envelope, seals it and sends it off.
Documents
4 filesQ3 report.pdf
PDF, 2.4 MB
Invoice 0142.pdf
PDF, 184 KB
Contract draft.docx
Word, 96 KB
Tax return 2025.pdf
PDF, 1.1 MB
Press Delete to shred the focused file, or drag it into the shredder.
ShreddedsourceDrag a file into the shredder and it comes out in strips.
Leave a tip
Tap a coin, or throw one in.
6 coins$2$1$5$1$2$1sourceCoins drop into a glass jar and pile up as the total counts.
- Voucher20% offLAB-7Q2XDrag the pull downsource
Unzip the pouch to reveal the code inside.
0:48 / 3:34
Drag the reels to scrub
sourceScrub audio by dragging the tape, with reels that spin like the real thing.
0 / 24 popped
sourcePop every bubble to clear the list, one click or one long swipe.
2:15 PM
Drag the sun, 6 AM to 8 PM
sourcePick a time by dragging the sun across the sky.
Road mapNo. 03
Porto to Lisbon
3 days, 412 km
sourceAn itinerary that unfolds panel by panel like a paper road map, recentring as it opens.
- source
Maps the article as a spine of bands, each as long as its section, filling in as you read.
Inês Duarte
Product designer, Lisbon
Replies within 4 hours
MeYou12am6am12pm6pmÂ
Calm software for busy teams.
Previously design lead at a payments startup. Now taking on two projects a quarter: design systems, onboarding, and anything with a dashboard.
StatusView assourceShows when the owner is working, and when that overlaps with your day.
- xevrion.dev/writingsource
Signs the footer by hand when it scrolls into view, slowing through every loop.
What's new
Version 2.4.0
v2.4.0
Offline drafts
- NewDrafts save locally and sync on reconnect
- NewConflict view for edits from two devices
- ImprovedLarge documents open 40% faster
- FixedPasted tables keep their column widths
Version 2.4.0, Sep 18, 2026: Offline drafts. New: Drafts save locally and sync on reconnect. New: Conflict view for edits from two devices. Improved: Large documents open 40% faster. Fixed: Pasted tables keep their column widths
sourceFiles each release card behind the stack like a hand riffling index cards.
- PlanStarter
Your team
6seats
Team pricing kicks in at 10 seats.
- 6 × $12.00 list price
- $72.00
- Volume rate from 10 seats
- $0.00
- Pay yearly to save 20%
- $0.00
- Total
- $72.00/mo
Billed monthly
sourceItemizes your bill like an invoice and upgrades the plan the moment your team crosses a seat threshold.
- source
A camera zooms into the part of the product screenshot each feature describes as you scroll past it.
We moved our month-end close into Ledgerly in March. What used to eat the first week of every month now takes an afternoon, and nobody on the team misses the spreadsheets.
We moved our month-end close into Ledgerly in March. What used to eat the first week of every month now takes an afternoon, and nobody on the team misses the spreadsheets. Ava Chen, Controller, Northwind Traders
sourceSwipes a highlighter across the line that sold the customer, one line at a time.
Parcel · Private beta
Join the waitlist
Parcel lets in 200 new people every Friday. Save your spot in line.
Front of the line1,283 waitingOne email when your invite is ready. Nothing else.
sourceDrops your face into a real queue and rolls out your place in line.
Field Notes · 6 min read
Cold brew at home, without the sludge
Grind coarse, steep for eighteen hours in the fridge, and filter twice. The second pass through a paper filter is what takes it from muddy to clean, and it costs you five minutes.
A ratio of one to eight makes a concentrate you can cut with water or milk. Stronger than that and the bitterness creeps back in.
We bake a few cookies
Only the ones you allow. Switch one on and its bite bakes back in. Leave it off and the bite stays.
- Always on
Essential
Sign-in, your cart and security. The site breaks without these.
3 of 3 optional cookie types turned off.
sourceBakes a bite back into the cookie for every category you allow.
- Try another typosource
Catches gmial.com and fixes it by moving only the letters that were wrong.
Order summary
2 items- Linen overshirtSand, size M$68.00
- Waxed canvas toteOlive$24.00
Codes are not case sensitive.
- Subtotal
- $92.00
- Shipping
- $6.00
- Total
- $98.00
Try WELCOME10, FREESHIP or SUMMER20
sourceStamps your promo code onto the order and strikes out the price it beat.
function Profile({ id }) { const [user, setUser] = useState(null); useEffect(() => { fetch(`/api/users/${id}`) .then((res) => res.json()) .then(setUser); }, [id]); return <Card user={user} />; }1/3Fetch the user in an effect
sourceGlides every surviving token to its new spot as a tutorial moves to the next step.
Aurel Field 38
Automatic, 38 mm steel case
$495
sourceDraws a leader line to one label card that travels between a watch's features, never covering the product.
Pricing in public, one year later
Small Batch, Episode 42
1/5Cold open
Paused0:00 / 42:18
sourceInks in a podcast's waveform, with chapter markers and a ghost playhead.
Heavyweight Tee, Bone
$48
Fits like
Relaxed through the chest
- Chest
- 111 cm
- Length
- 73 cm
- Room
- 15 cm
You: 96 cm
Size L
Size L: Relaxed through the chest. Chest 111 cm, length 73 cm.
sourcePulls a tee over a body outline so you see the fit before you pick the size.
Order #48213
Thursday, Sep 24
Arriving indays
Arriving in 3 days, Thursday, Sep 24Packed at our Leeds warehouse
- Ordered, Sep 21, 9:14 AM
- Packed, Sep 21, 4:40 PM
- Shipped, next
- Out for delivery, pending
- Delivered, pending
sourceDrives a parcel across a street map to your door and stamps each stop as it arrives.
Your bag
1 item
Hinoki Candle
Hinoki and cedar, 220 g
Qty 1
$38.00
- Subtotal
- $38.00
- Gift wrap
- $0.00
- Total
- $38.00
sourceFolds kraft paper over the cart item, ties a ribbon and bow, and asks who it's for.
Marlow & Pine
212 Wythe Ave, Brooklyn
Checking hoursMonday: closedTuesday: 7 AM to 2 PM and 5 PM to 11 PMWednesday: 7 AM to 2 PM and 5 PM to 11 PMThursday: 7 AM to 2 PM and 5 PM to 11 PMFriday: 7 AM to 2 PM and 5 PM to 2 AMSaturday: 8 AM to 3 PM and 5 PM to 2 AMSunday: 8 AM to 3 PMsourceDraws the week's hours on a 24-hour scale and can redraw them in your own time zone.
Design that feels calm, fast, honest, alive
sourceWord rotator new
Keeps the letters two words share and glides them into place as the rest trade out.
Ana Ruiz opened this edited synced
sourceRelative time new
Says "4 min ago" and changes only at the moment the words would change.
- source
Copy email new
Click the address and its letters flip, one by one, into "Copied to clipboard".
I build interfaces at a small studio, write about motion on weekends, and keep a reading list of the good stuff.
sourceThe underline comes in from the side your cursor entered and leaves toward the side it left.
Most of my motion thinking comes from this essay, and the springs in this lab are tuned with Motion.
sourceHover a link to get a preview card that trails your cursor and leans as it moves.
Good interfaces rarely ask for attention. They wait at the edge of the page until your hand arrives, then answer with the smallest possible gesture. A button settles when pressed. A sentence steps forward while you read it. Everything else politely steps back.
sourceFocus paragraph new
Brings the sentence you're reading forward and lets the rest step back.
- source
Text progress new
Fills the label itself with ink as the upload runs.
Halfway through the book you learn the narrator is . The last chapter shows the lighthouse keeper , which quietly recolors everything before it.
sourceSpoiler text new
Hides a spoiler under shimmering grain that blows away from your click.
Hello, Ada
sourceGreeting new
Greets by time of day, with a sun or moon that rises into place along an arc.
- source
Hover a word and a block cursor reads it in, one letter at a time.
- source
Words light up one by one as you scroll through them.
- Motion
- Springs
- Easing
- Layout
- Gestures
- Tokens
- Focus
- Blur
- Stagger
- Clip path
- Velocity
- Origin
- Presence
- Drag
- Shadows
- Radius
sourceDrifts endlessly past a reading lens, and brakes gently when you hover.
Build interfaces that feel right, fast, alive, or effortless.
sourceTypes, pauses and rewrites the last word with a human rhythm.
Move across the letters, or tap them.
sourceLetters rise in a wave that follows your cursor.
- LABsource
A word made of dots that part around your cursor and burst when clicked.
Essay · 4 min read
Put the notes where the reader is
The first printed books kept their notes in the margin, right where the reader needed them. Footnotes only took over when typesetting got fussy about columns, and endnotes arrived when publishers decided notes were too expensive to set on the page at all.
On the web we inherited the worst of both: a tiny number that jumps you to the bottom of the page and a back link you have to hunt for. Margins are free on a wide screen, so notes can live beside the sentence they belong to, the way Edward Tufte sets them in his books. Hover a number to peek, click to keep it open.
None of this needs a new format. The notes are still written inline, where the author thought of them, and the page decides how to show them from the room it has.
sourceSlides footnotes into the margin beside their sentence, and folds them inline on narrow screens.
- source
Lifts the words you select out of the paragraph and into a shareable quote card.