| name | feel-lab |
| description | A catalogue of 41 perceived-performance and interface-craft techniques that make an app feel faster without changing how fast it actually is — skeletons, optimistic UI, spring physics, the Doherty threshold, and more. Invoke with /feel-lab. |
| disable-model-invocation | true |
Feel Lab
A reference catalogue of 41 techniques for perceived performance. The thesis: nothing here makes an app faster; everything here makes it feel faster. Each technique has a real off-state — the point is always the contrast between "trick on" and the bare interaction underneath.
When to apply
This skill only runs when you invoke it with /feel-lab — the model won't auto-trigger it. Once running: pick the technique(s) that fit the problem, name them, and give the one-line mechanism + the failure mode to avoid. Don't dump the whole list unless asked. Reach for the target numbers in Perception first — they're what every other technique is chasing.
The catalogue
Waiting — cheat the user's clock, not the machine's.
- 1. Skeleton screens — grey layout ghost, not a spinner; the shimmer sweep says "working," static grey says "frozen."
- 2. Optimistic UI — paint success before the server confirms, reconcile/roll back on failure. The cost only shows on a real error.
- 3. Blur-up images — inline a ~1KB thumbnail, blur it, cross-fade the full file over it. Never show an empty rectangle.
- 4. Prefetch on hover — spend the 200–300ms between hover and click fetching; the click resolves against memory.
- 5. Streaming — flush the shell first, fill holes as data resolves. Same total time, readable far sooner.
- 6. Virtual lists — render only the ~20 visible rows of 10,000, keep a tall spacer, recycle on scroll.
- 7. Debounce — wait for a ~300ms typing pause before firing; one request instead of eleven stale ones.
- 8. Code splitting + quiet prefetch — ship only this screen's JS, pull the next likely screen during idle time.
- 9. Keep it in memory — the meta-trick: delete the loading state; render from a client cache, sync in the background.
Motion — motion explains what just happened to what.
- 10. Spring physics — springs overshoot and settle like objects with mass; easing curves stop dead. Use a real sim (stiffness ~170, damping ~16).
- 11. Shared-element transitions — the thumbnail becomes the detail view via FLIP (First-Last-Invert-Play); the eye tracks one object.
- 12. Stagger — offset items ~40ms each so entrance reads as composed, not dumped. Keep the total under ~350ms.
Hands — patterns borrowed back from phones.
- 13. Drag to dismiss — throw a sheet away with resistance + a velocity threshold; closing stops being a target to hit.
- 14. Swipe actions — hide frequent/destructive actions under the row; commit past ~40%, else spring back.
- 15. Long press — a menu that costs nothing until asked for; the progress fill is mandatory, not decoration.
- 16. Command palette (⌘K) — every action, one keystroke, from anywhere. Table stakes for daily-use tools.
Surfaces — stop a screen from looking like a screen.
- 17. Glass — backdrop blur PLUS
saturate(150%); blur alone goes muddy grey.
- 18. Layered shadows — stack three (tight+dark, medium, wide+faint); one shadow reads as a smudge.
- 19. Grain — an inline
feTurbulence SVG noise layer breaks gradient banding for a few hundred bytes.
- 20. Mesh gradients — 4–5 radial-gradient color points bleeding together; organic, not ruled.
- 21. Dark mode done right — sit on ~#121212 not #000; elevate cards by getting lighter, not by shadow; desaturate accents.
Layout & type — where a page gets its posture.
- 22. Editorial headline — oversized, tight tracking (~-0.03em at display size only), mixed weights within one line.
- 23. Bento grid — deliberately different cell sizes in one grid; size says what matters without a heading.
- 24. Parallax depth — layers at slightly different scroll speeds read as distance. A few percent = atmosphere; a lot = nausea.
- 25. Scroll reveal — fade/rise elements as they enter view via one
IntersectionObserver, never a scroll listener.
Micro — the one-second details.
- 26. Button feedback — press compresses ~2–3% and brightens; scale down, never up (up reads as escaping the press). Ripple from the touch point.
- 27. Focus states / floating labels — label lifts to a caption, border takes the accent, soft ring appears. Keep the ring — it's the only orientation a keyboard user has.
- 28. Hover cards + counting numbers — preview on hover; ease-out a counter to its real value and stop (a still-climbing number is noise).
- 29. Toast, not modal — "Saved" is information, not a decision; a toast leaves on its own. Reserve modals for genuine forks/destruction.
Input — how fast the interface answers you, not itself.
- 30. Instant tap —
touch-action:manipulation kills the legacy ~300ms tap delay. Biggest single "web vs native" tell.
- 31. Typing that keeps up — keep a field's paint off the critical path; defer heavy work (e.g.
requestIdleCallback) so the character lands first. This is INP.
- 32. Yield mid-task — slice long jobs and
scheduler.yield() between chunks so a click during the work still registers (React concurrent mode's idea).
- 33. Passive scroll listeners — register
{passive:true} so the browser scrolls on the compositor without waiting on your JS.
Perception — the theory the rest of the page chases; reach for these targets before any specific tactic.
- 34. Doherty threshold — the targets: ≤100ms feels instant; ~400ms attention slips; ≥1000ms you've lost them. Everything else is a tactic to hit these.
- 35. Fake progress — an ease-out bar (fast then slow, snap to 100% on finish) feels faster than a truthful linear one over the identical wait.
- 36. Min-display spinner — don't show a loader before ~200ms of wait; once shown, hold it ≥~400ms. Fast loads show nothing; slow loads never strobe.
Loading craft — get the cure right so it isn't the disease.
- 37. Stale-while-revalidate — paint the last known value instantly, fetch fresh in the background, swap in (SWR / TanStack Query).
- 38. Reserve space (anti-CLS) — give async elements their final dimensions up front (
aspect-ratio) so content never jumps under a finger. The worst "slow" feeling is motion, not latency.
Senses — feel beyond the eyes.
- 39. Haptics — a ~10ms
navigator.vibrate() on success lands before any pixel; confirms via a channel the eyes aren't using. Mobile only.
- 40. Sound — one synthesized Web Audio earcon on the action that matters. Rare and quiet, or it's a toy.
- 41.
font-display:swap — show a system-font fallback immediately, swap the web font in when it arrives. A flash of unstyled text beats a flash of no text (FOUT > FOIT).
Output format
Name each technique used, give its one-line mechanism, and state the failure mode / the number to hit. Prefer 2–4 relevant techniques over the whole list. If the user wants to see them, point to the live demo page (feellab.html) where every technique has a working on/off switch.
