UI/UX Playground
for people who build interfaces.
A living reference of modern UI patterns, motion principles, and UX laws. Every demo is interactive — click, hover, scroll, and inspect. Built to learn from and to steal from.
Ten categories. One giant playground.
Each category is a focused deep-dive. Click anything to jump straight to its interactive demos below.
Poke at the interfaces.
Every demo below is live. Click the Show CSS toggle on any card to see how it's built.
Foundations
The building blocks: hierarchy, color, type, and spacing create clarity and guide the eye.
Visual Hierarchy
Size, weight, and color create a reading order. Your eye follows the loudest element first.
/* Negative letter-spacing on headlines = tighter, authoritative */ .headline { font-size: 2.5rem; letter-spacing: -0.03em; } .overline { text-transform: uppercase; letter-spacing: 0.08em; }
OKLCH Color Explorer
Perceptually uniform: same lightness = same perceived brightness regardless of hue.
Fluid Type Scale
clamp() smoothly scales between viewport breakpoints. No media query jumps.
Spacing Rhythm
5 values force intentional decisions. xs=tight, xl=breathing room.
Contrast Ratios
WCAG requires 4.5:1 for normal text, 3:1 for large. Real examples from this system.
States & Feedback
Every interactive element communicates what it is and what's happening.
Button States
Default, hover, active, focus, disabled, loading.
Input Focus
Ring, glow, and underline.
Hover Effects
Six treatments. Hover each card.
Skeleton Loading
200%-wide gradient slides through. Reduces perceived wait ~30%.
Toast Notifications
Spring enter + auto-dismiss. Two chained animations.
Accordion
grid-template-rows: 0fr to 1fr. Smooth height, no JS calc.
The grid-template-rows trick. 0fr collapses to zero, 1fr expands to fit content. Unlike max-height hacks, speed is consistent.
CSS can't transition height:0 to height:auto. Grid gives real smooth transition without workarounds.
Yes. FAQs, nav menus, settings, filter drawers. Grid parent + 0fr/1fr toggle + overflow:hidden on inner.
Progress Stepper
Click nodes. Active scales with spring; completed change color.
Form Validation
Inline real-time vs on-submit. Red rings, shake animations, and success states.
Motion
Easing, duration, and transforms make interfaces feel physical.
Easing Curves
Linear=robotic, ease-out=natural, spring=overshoots.
12 Keyframe Animations
Hover each to trigger. CSS-only.
Transform Playground
5-axis control. GPU-accelerated.
Staggered Grid
Each item enters with increasing delay.
Morphing Blob
8-value border-radius animates organic shapes. Pure CSS.
Infinite Marquee
Duplicate content + translateX(-50%). Hover pauses.
Micro-interactions
Small animations that respond to actions. They make interfaces feel alive.
Toggle Switches
Standard, stretch (knob deforms), glow (ambient light).
Animated Checkboxes
stroke-dashoffset draws the checkmark. Spring scale on check.
Ripple Effect
Circle from click point. Spatial feedback.
Heart & Stars
Heart: SVG fill + particles. Stars: hover previews, click locks.
Password Strength
Real-time color shift as you type.
Counter, Menu, Tooltip, Magnetic
Four micro-interactions in one demo.
3D Card Flip
preserve-3d + backface-visibility. Click to flip.
Modal / Dialog
Scale-in animation, backdrop blur, click-outside dismiss, Escape key close. The native <dialog> alternative.
Scroll & Reveal
Scroll-triggered animations guide the eye as content enters.
Scroll Reveal
IntersectionObserver adds class on viewport entry. Four entrance styles.
Fade Up
Starts 30px below, slides into position.
Scale In
Starts at 90%, grows to full.
Slide Left
Enters from the left.
Slide Right
Mirror of slide-left.
Sticky Parallax
position:sticky bg + content scrolling over. Pure CSS.
Content slides over the sticky background. position:sticky keeps it fixed while content flows on top.
Simpler and more performant than JS parallax.
Rounded top corners enhance the layer illusion.
Keep scrolling...
Scroll Snap Carousel
scroll-snap-type: x mandatory. Native snapping. Drag to scroll.
Transitions
Animate between two states.
Keyframes
Multi-step sequences.
Transforms
GPU-accelerated geometry.
Filters
blur, brightness, contrast.
Clipping
clip-path crops to shapes.
Progress Indicators
Determinate, indeterminate, circular.
Depth & Glass
Shadows, blur, gradients, and clipping create layers.
Shadow Elevation
5 levels. Dark themes need stronger opacity.
Glassmorphism
backdrop-filter: blur(). Three intensities.
Subtle
blur(12px), 4%
Frosted
blur(20px), 8%
Strong
blur(30px) saturate
Neu vs Flat vs Glass
Three elevation philosophies.
raised
inset
border
blur
Animated Gradient Border
conic-gradient spins via @property.
Gradient Gallery
6 gradient types.
Clip-path Shapes
Hover to morph. Same point count required.
Text Effects
Animation, clipping, and SVG turn text into an interactive medium.
Typewriter
CSS width 0→100% with steps(). Monospace = each step = 1 char.
Animated Gradient Text
background-clip: text + 300% shifting gradient.
Text Stroke
-webkit-text-stroke + transparent fill. Hover fills.
Glitch Effect
Two pseudo-elements via attr(data-text). Pure CSS.
Wavy Text
Each letter: same animation, staggered delay = sine wave.
Text Scramble
Characters randomize then settle. Click to trigger.
Staggered Letter Reveal
Each letter fades up with increasing delay.
Variable Font Weight
Inter 100-900 on continuous axis. Hover to shift.
Layout & Creative
Grid tricks, creative patterns, effects beyond basic boxes.
Auto-Fill Grid
repeat(auto-fill, minmax(120px, 1fr)). Zero media queries. Resize browser.
Bento Grid
grid-column/row span. Apple-style magazine layout.
Aspect Ratio
aspect-ratio without padding hacks.
Cursor Spotlight
Radial gradient follows mouse. Two CSS variables.
Card Stack
Three layered cards. Hover to fan out.
Drag & Drop
Sortable list with smooth reorder. Drag handles, visual drop targets, and position feedback.
Animated Dot Pattern
radial-gradient dots drifting diagonally.
Design Concepts
Named ideas you'll hear in every design conversation. Understanding these changes how you see interfaces.
Gestalt Principles
Your brain groups visual elements automatically. Proximity, similarity, and closure are the three most important grouping rules in UI design.
/* Gestalt in practice:
PROXIMITY: Use spacing to group related items.
Nav links close together = one group. Form fields
close to their labels = clearly connected.
SIMILARITY: Same style = same function.
All primary buttons look the same. All links
share a color. Break similarity to draw attention.
CLOSURE: You don't need to draw everything.
Progress bars, icon hints, card borders that
fade out — the brain fills in the rest.
These aren't CSS tricks. They're how human
perception works. Use them intentionally. */White Space (Negative Space)
Empty space isn't wasted space — it's a design element. It creates breathing room, improves readability, and signals quality.
Premium Headphones
Noise-cancelling wireless headphones with 30-hour battery life and premium sound.
Premium Headphones
Noise-cancelling wireless headphones with 30-hour battery life and premium sound.
/* Same content. Same fonts. Same colors.
The ONLY difference is padding.
Left: padding: var(--space-sm) (~8px)
Right: padding: var(--space-lg) (~24px)
White space signals:
• Quality (luxury brands use tons of it)
• Hierarchy (space separates sections)
• Readability (text needs room to breathe)
• Focus (less clutter = clearer message)
Rule of thumb: when in doubt, add more space.
Cramped layouts feel cheap and overwhelming. */F-Pattern & Z-Pattern
Eye-tracking studies show users scan pages in predictable patterns. F-pattern for text-heavy pages; Z-pattern for minimal layouts.
/* F-PATTERN (text-heavy pages):
1. Scan across the top (nav, headline)
2. Drop down, scan a shorter line
3. Scan vertically down the left edge
→ Put important content in the first 2 lines
→ Left-align key info (labels, headings)
→ Front-load sentences with keywords
Z-PATTERN (landing pages):
1. Top-left → top-right (logo → CTA)
2. Diagonal to bottom-left
3. Bottom-left → bottom-right (footer CTA)
→ Place your logo top-left
→ Place primary CTA top-right or bottom-right */Affordances
An affordance is a visual cue that suggests how to use something. A raised button affords clicking; a flat label doesn't. Compare these two:
Elevated, border, hover effect = clickable
Flat, no border, no cursor change = ??
/* Affordances tell users what's interactive WITHOUT
reading instructions or documentation.
Strong affordances:
• Elevated surface + shadow = clickable button
• Underlined colored text = link
• Drag handle (⋮⋮) = draggable
• Rounded toggle with knob = switchable
Weak affordances:
• Flat text that's actually a button
• Icons without labels
• Invisible scroll areas
Rule: if users have to guess whether something
is interactive, the affordance is too weak. */Progressive Disclosure
Show only what's needed now. Reveal more on demand. Reduces cognitive load and keeps interfaces clean.
/* Progressive disclosure examples:
• "Show more" buttons (like above)
• Accordion FAQs
• Hover tooltips for extra detail
• "Advanced settings" collapsed by default
• Wizard/stepper flows (step 1 → 2 → 3)
• Truncated text with "Read more"
Why it works:
Hick's Law says more options = slower decisions.
Showing 3 items is less overwhelming than 8.
Power users can still find everything —
it's just not all visible at once. */Bento Grid
Named after Japanese bento boxes: a grid with asymmetric, mixed-size cells. Popularized by Apple's product pages. Creates visual interest through intentional hierarchy.
2x2 — primary focus
2x1 — secondary
/* BENTO GRID RULES:
1. One hero cell (2x2) — the main attraction
2. Supporting cells vary in size (2x1, 1x1)
3. No uniform grid — asymmetry creates hierarchy
4. Cells should have rounded corners + gaps
5. Content density varies: hero has big text,
small cells have icons or single stats
CSS:
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 80px;
.hero { grid-column: span 2; grid-row: span 2; }
.feature { grid-column: span 2; }
.full { grid-column: span 3; }
Used by: Apple, Linear, Vercel, Raycast */UX Laws
Research-backed principles with names. Knowing these helps you make (and defend) better design decisions.
Fitts's Law
The time to reach a target is a function of distance and size. Bigger targets closer to the cursor are faster to click. Try clicking each circle:
/* FITTS'S LAW IN UI DESIGN:
• Mobile touch targets: minimum 44x44px (Apple HIG)
• Primary CTAs should be large and prominent
• Navigation at screen edges is fastest
(infinite edge = infinitely large target)
• Don't make destructive actions easy to hit
(small, far from the main flow)
• Dropdown menus: wider items = easier to click
Formula: T = a + b × log2(D/W + 1)
T = time, D = distance, W = width
Doubling button size is more impactful than
halving the distance to it. */Hick's Law
Decision time increases with the number of choices. Compare choosing from 3 options vs 9. Click an option in each panel.
/* HICK'S LAW: T = b × log2(n + 1)
Design implications:
• Limit nav items to 5-7 (use "More" for rest)
• Pricing pages: 3 plans, not 7
• Form selects: group options into categories
• Onboarding: one choice at a time (wizard)
• Remote controls: 4 buttons beat 40
Exceptions:
• Expert users prefer seeing all options
• Search is faster than browsing for large sets
• Alphabetical lists let users jump ahead
The fix isn't always "fewer options" — it's
better ORGANIZATION of options. */Miller's Law (7 ± 2)
Working memory holds about 7 items (± 2). After that, recall drops sharply. The items below show the comfortable limit vs overload.
/* MILLER'S LAW IN UI:
• Navigation: max 5-7 top-level items
• Phone numbers chunked: 555-867-5309 (not 5558675309)
• Credit card inputs: 4 groups of 4
• Onboarding steps: max 5-7 screens
• Dashboard widgets: 5-7 key metrics
Important nuance: it's 7 CHUNKS, not 7 items.
Grouping related items into categories lets
users process more total information.
"Home | Products | Company | Resources"
is 4 chunks that contain 15+ pages. */Doherty Threshold
System response under 400ms keeps users in a state of flow. Above that, attention breaks. Click each card to see the difference.
/* DOHERTY THRESHOLD (1982 IBM research):
< 100ms → feels instant (hover, toggle)
< 400ms → feels responsive (page nav, submit)
> 1000ms → user notices delay, needs feedback
> 10s → user leaves
How to stay under 400ms:
• Optimistic UI (show success before server confirms)
• Skeleton screens (perceived speed)
• Prefetch on hover (load before click)
• Edge computing (CDN, serverless at edge)
• Streaming (show partial results immediately)
When you CAN'T be fast:
Show a progress indicator. Users tolerate delay
if they can see something is happening. */Von Restorff Effect (Isolation Effect)
An item that stands out from its peers is more likely to be remembered. One different element in a group draws all attention.
/* VON RESTORFF EFFECT IN UI:
• Pricing pages: highlight the recommended plan
with a different color/size/badge
• CTAs: primary button stands out from ghost buttons
• Notifications: red badge on an otherwise calm nav
• Data viz: highlight the anomaly in a chart
• Sales: "Most Popular" tag on one option
The effect is stronger when:
• The difference is in COLOR (not just size)
• Only ONE item is different (not 3 of 7)
• The group is otherwise very uniform
Warning: if everything stands out, nothing does. */Jakob's Law
Users spend most of their time on OTHER sites. They prefer your site to work like ones they already know. Familiarity reduces learning time.
Familiar
Unfamiliar
/* JAKOB'S LAW:
Don't reinvent conventions that already work:
• Logo top-left → links to home
• Shopping cart icon → top-right
• Hamburger menu → mobile nav
• Blue underlined text → link
• X button → close
• Swipe left → delete (mobile)
Being "creative" with navigation or standard
patterns almost always hurts usability.
When CAN you break convention?
• Games, art, experimental sites
• When your new pattern is dramatically better
AND you guide users through it
• Never for e-commerce checkout flows */Peak-End Rule
People judge an experience by its peak (most intense point) and its end — not the average. A great finale redeems a rough middle.
/* PEAK-END RULE:
Your checkout is slow? Make the confirmation
page delightful — confetti, clear summary,
personal touch.
Bad customer support? End with "Is there
anything else I can help with?" + a follow-up.
The peak matters too:
• Onboarding: one "wow" moment (e.g., first
result appearing instantly)
• Unboxing: Apple's box design IS the peak
• Cancellation: Duolingo's sad owl
People don't recall the average.
They recall the best moment and the last one. */Aesthetic-Usability Effect
Users perceive attractive designs as more usable — even when they're not. Beauty creates trust and forgiveness for minor issues.
Settings
Same functionality
Settings
Same functionality
/* AESTHETIC-USABILITY EFFECT (Kurosu & Kashimura, 1995):
Users tolerate more friction from beautiful UIs.
They literally report fewer usability issues.
Implications:
• Polish IS a feature, not vanity
• First impressions set expectations for hours
• Beautiful error pages feel less frustrating
• Consistent spacing/type = perceived reliability
• "It looks professional" = "I trust my data here"
The trap: beauty can MASK real problems.
A/B test usability, don't just ask users.
They'll say the pretty version "works better"
even when it objectively doesn't. */Serial Position Effect
Items at the beginning (primacy) and end (recency) of a list are remembered best. The middle gets forgotten. Click items to test your recall.
/* SERIAL POSITION EFFECT:
PRIMACY (first items remembered):
• Put key nav items first (Home, Dashboard)
• Lead with your strongest selling point
• First onboarding step sets the tone
RECENCY (last items remembered):
• Put CTAs at the end of lists/pages
• "Contact" and "Sign Up" go last in nav
• End of scroll = conversion opportunity
THE MIDDLE IS A GRAVEYARD:
• Don't bury important features mid-nav
• If you must, break lists into chunks
• Or visually distinguish mid-list items
This is why nav bars typically put the most
and least important items at the edges. */What I actually care about.
Opinions earned from shipping interfaces that ticket reps, season members, and executives all use in the same week. No hot takes — just the rules that keep the work honest.
Content is the decoration.
Grids, dot patterns, rotating glows, and noise textures are how you hide a weak layout. A flat background forces the hierarchy, the typography, and the spacing to do all the work — and when they do, you don't need ornament.
Tokens, not values.
Every color, every spacing value, every radius lives in one CSS file. When the system updates, every surface updates. Hardcoded hex codes are how drift starts — and drift is how brands die.
Motion that means something.
Animation is UX feedback, not garnish. A button lifts 2px on hover so you know it's clickable. A toast slides in from the corner so your eye catches it without losing the task. Decoration slows things down. Meaning speeds them up.
Naked data beats card wrappers.
Tables and KPIs should sit directly on the surface. A card around every number is training wheels — it tells the reader "I wasn't sure this was important, so I put it in a box." Trust the grid. Trust the type.
Sharp edges, not puffy corners.
Large border-radius reads as consumer toy. Sharp corners and minimal rounding read as serious software. The difference between a dashboard that looks like a SaaS demo and one that looks like a professional tool is usually just border-radius.
Keyboard first, mouse second.
If it can't be navigated with Tab, it doesn't ship. Every input gets a focus ring. Every modal traps focus. Every link says where it's going. This is the floor, not the ceiling.
One screen, one job.
A dashboard that tries to tell you six things tells you nothing. Pick the one decision the user needs to make and design the whole screen around it. Everything else is a link to the next screen.
Performance is a design choice.
A 400ms interaction feels instant. 800ms feels broken. Every shadow blur, every glassmorphism pane, every rotating gradient has a frame budget — and you only get 16ms per frame. Choose what earns its cost.
Where to go deeper.
The people, books, and tools that actually shaped how I think about interface design. Everything here is worth your time.