UI / UX lab
Feel things before you pick them. Every panel gives you code to copy into a template, or words to paste to Claude.
Cursor playground
Move your mouse in the box. Pick a style, a colour and how lazily it follows. The code underneath updates with your choice.
Scroll feel
Scroll inside the box with your mouse wheel or trackpad. “Smooth” scrolling uses a small free library called Lenis; the number is how quickly it catches up (lower = floatier).
Easing
Easing is the speed curve of an animation. It decides if a site feels cheap or expensive. Press play and compare.
Hover effects
Hover each one. Copy gives HTML + CSS (+ a few lines of script where needed).
Text effects
Click a card to replay its effect.
Loaders
Show one when something takes longer than about half a second. Under that, show nothing.
UX rules in plain words
Twelve checks before you call a site finished.
Headline says what it is, the button says what happens next.
Everything else is quieter. Two loud buttons cancel each other out.
Body text 16 px or bigger, lines about 60–70 letters long, strong contrast with the background.
Anything you tap is at least 44 px tall, with space around it.
Hover lifts or lights up, pressing goes down, forms say “Sent” or what went wrong.
Hero video under ~3 MB with a poster image, pictures as WEBP/AVIF, nothing huge above the fold.
Animate to guide the eye or show a change. One big moment beats twenty small ones.
Some people get sick from movement. Turn off parallax and big animations when their device asks.
Custom cursors must still show where clicks land and must vanish on phones.
Test at 390 px wide. Nothing scrolls sideways, menus open, video plays muted.
Tab through the page: you can always see where you are and press every button.
No sound without a click, no pop-up in the first 10 seconds, no fake buttons.