Users
12.4k
↑ 14%
Motion principles, micro-interactions, scroll effects, layout patterns and the UX laws behind them. Every section is something you can actually use, not just admire.
Type, color, spacing, elevation and grid. Everything downstream depends on these.
Fluid responsive scale using clamp(). Shrinks on mobile, grows on desktop without media queries.
OKLCH tokens from design.seantippen.com. Perceptually uniform lightness so contrast stays consistent across hues.
Fluid t-shirt sizes. Every gap, padding and margin uses one. Consistency beats precision.
Three shadow levels. Resist the urge to invent more. Hover to lift.
The default grid unit. Most dashboards snap to 1, 2, 3, 4, 6 or 12 column arrangements.
Tokens flip wholesale with the html.light class. No component knows or cares which theme it is in.
Default, hover, focus, active, disabled, loading, empty, error. If any one of those is missing, the interface feels dead.
Primary, outline, ghost, danger. Each responds to hover, press, focus and disabled.
Inline errors, success on valid input, shake on failure.
Shimmer placeholders reduce perceived wait. Shape should match the real content.
Transient messages. Colored edge encodes severity without shouting.
Spinner for unknowns, progress bar for knowns. Never a spinner longer than 4 seconds.
Always pair color with a word so the meaning lands for color-blind users.
The curve tells the story. Linear feels mechanical; ease-out feels natural; spring feels alive.
Same distance, four personalities. Watch them race.
Small offsets between items give direction to the eye. 60ms is the sweet spot.
Button translates toward the cursor on hover. Subtle physical feel.
Tilt on hover with a moving highlight that tracks the cursor.
Tactile feedback that anchors the interaction to the cursor position.
Tweened numbers feel richer than hard cuts. Uses requestAnimationFrame.
The tiny confirmations that tell you the system heard you. Without them, every click feels like a guess.
Springs into place. The motion itself communicates the state change.
Numeric increment with boundaries. Disables at the floor.
Satisfying pop on tap. The count animates to reinforce the action.
Color and fill shift in real-time. Never block submit on the meter itself.
Thumb slides with spring. Two to five options work; more = use a dropdown.
One-shot confirmation that flips color and label, then resets after 1.4s.
Scroll-triggered reveals, parallax layers, sticky reveals, horizontal scroll scrubs and a progress ring tied to total scroll.
The left column stays pinned. The right column steps through supporting points. Common in product explainers and sponsorship decks.
A clear promise that rewards the reader for scrolling further.
Numbers, logos, or outcomes that make the claim feel earned.
A diagram or walkthrough that demystifies the thing.
One call to action, not three. Conversion comes from clarity.
Tokens, grid, type.
Timing, easing, delay.
Reveal, parallax, sticky.
Charts, counters, sparks.
The ring fills based on how far down the page you are.
Each word fades up as the block enters the viewport. Use sparingly on headlines.
Good design is obvious. Great design is transparent. The best design feels inevitable.
Blur, elevation, gradients and clipping create a sense of depth without pretending to be 3D.
Backdrop blur over a colored surface. Works best with translucent white and a subtle border.
Hover to reveal the layers. Depth without perspective.
Radial gradient follows the pointer. The card feels lit by the mouse.
Type is not just content. Clip it, animate it, reveal it. The word itself can be the interaction.
CSS width 0 to 100% with steps(). No JS.
Each letter is its own element with an offset animation delay.
Characters randomize then settle. Hacker vibe without being corny.
A moving linear-gradient clipped to the text. Works for display headlines.
Each line slides up from below a mask. Classic editorial motion.
Inter is a variable font. Interpolating weight feels like breathing.
Bento grids, masonry, marquees. The containers that make content look considered.
Mixed cell spans inside a uniform gap. Fills space without feeling square.
CSS columns. Items flow vertically then break. Order is top-to-bottom per column.
Animated bars, donut charts, KPIs, sparklines. Everything you need for the first half of a deck.
Bars grow from zero when the section enters view. The motion draws the eye to the outlier.
Categorical breakdown. The center holds the headline number.
Label, value, delta. Tabular numerics keep the columns aligned.
Tiny line charts inline with metrics. Shape matters, scale does not.
The patterns every pitch deck and sponsorship proposal reuses. Stats, quotes, timelines, before and after, pricing, FAQ.
The scroll rhythm on the new deck was so smooth that our sponsors stayed on every slide. We closed two renewals by the end of the call.
This is the cleanest interface work I have seen in the region. Every detail feels considered and the motion never gets in the way.
Shipped the OKLCH token system, linked it to every project, and retired per-project CSS variables.
First tabbed version with interactive motion, states, and UX law demos.
Continuous scroll, reveal system, data viz, deck showcase blocks, and parallax.
Reveal the underlying HTML and CSS for each demo inline.
| Feature | Basic | Pro | Enterprise |
|---|---|---|---|
| Custom tokens | ✓ | ✓ | ✓ |
| Scroll effects | — | ✓ | ✓ |
| Data dashboards | — | ✓ | ✓ |
| Custom domain | — | ✓ | ✓ |
| Dedicated support | — | — | ✓ |
| SSO & audit log | — | — | ✓ |
tokens.css at design.seantippen.com/tokens.css. Update the file once and every downstream project picks up the change on next reload.prefers-reduced-motion. Focus rings stay visible. Color pairings hit WCAG AA at a minimum.This playground is a living reference. New patterns get added whenever a real project teaches me something worth keeping.
Hierarchy, whitespace, contrast, Gestalt. Named ideas that change how you see an interface.
Body text pressed right against the title has no room to breathe.
Another line touching the first.
Body text with intentional space lets each block hold its own.
Another line with rhythm.
Named laws that show up in every serious design conversation. Knowing them is how you make and defend better decisions.
Time to acquire a target is a function of its distance and size. Headline CTAs get bigger buttons for a reason.
Decision time scales logarithmically with the number of options. Hide the uncommon ones behind a more menu.
Short-term memory holds about seven items. Chunking multiplies that. Phone numbers, IBANs, card numbers are all chunked for a reason.
Response times under about 400ms keep attention. Above that, users context-switch and productivity collapses.
Users perceive attractive designs as more usable, even when they are functionally identical. Craft matters.
Items at the start (primacy) and end (recency) of a list are recalled more often than the middle. Put critical items at the edges.
People judge an experience by its most intense moment and its ending, not the average. Nail the end.
They expect yours to work the same. Familiarity is a feature. Reinvent selectively.
The closer people are to completion, the faster they move. Progress indicators work because of this.