Product engineer interested in crypto, agents, end user programming, and interfaces.
Don't fade in hover highlightsMotion & feel
A tiny transition-delay on hover captures intentMotion & feel
Start content animating at 60% of the page transitionMotion & feel
Animate the hierarchy, not just the layerMotion & feel
Use proximity, not just hoverMotion & feel
Use cursor velocity, not just positionMotion & feel
Separate the object from its shadowMotion & feel
Make number steppers feel awesomeMotion & feel
Pressed state that doesn't shrink the outlineMotion & feel
CSS transitions are interruptible, keyframes aren'tMotion & feel
A little joy when removing an itemMotion & feel
Mask scrollable content instead of clipping itMotion & feel
The upward accordionMotion & feel
lerp(a, b, t) is all you needMotion & feel
Stop using gray 1px bordersColor & depth
Tint the whole gray palette with the brand hueColor & depth
Blend grays onto color instead of painting themColor & depth
Muddy gradients? Interpolate in OKLCHColor & depth
Ease the gradient backdropColor & depth
Noisy gradients at a tenth of the file sizeColor & depth
Progressive blur, but leave the scrollbar aloneColor & depth
De-emphasize everything else while editingColor & depth
Frosted, saturated bordersColor & depth
Spend hierarchy "credits" one at a timeType & layout
Trim the invisible space above and below textType & layout
Middle-truncate, and keep the extensionType & layout
Animated placeholders teach without clutterType & layout
Image hover reveal with two stacked copiesCSS tricks
A half-cylinder carousel without Three.jsCSS tricks
Constrain the grid so components stay consistentCSS tricks
Velocity-driven blur on a dial wheelMotion & feel
Use useMotionTemplate for derived stylesMotion & feel
Animate weight with tighter optical sizingMotion & feel
Small CSS that makes a web app feel native on mobileMotion & feel
Make the orbiting border beam feel organicMotion & feel
Ask your agent to review animations against Lasseter's principlesMotion & feel
Reveal chain-of-thought with a blur, not a jumpMotion & feel
Add motion to dither with a blue-noise layerColor & depth
Make stickers pop with layered strokes and an edge glowColor & depth
Spotlight cards that follow the cursorColor & depth
Wide tables: scroll, show pagination, support the keyboardType & layout
Selected state that tracks what's actually on screenType & layout
A keypad from an image mask and one translateCSS tricks
Playback should mirror the inputCSS tricks
A background image has no business being over 300kbCSS tricks
Web animation performance, roughly tieredCSS tricks
Split text by the browser's real line breaksCSS tricks
Torn paper and crunchy text, all in CSS and SVG filtersCSS tricks
Completed steps hover above, and you can click them to go backSpotted in the wild
Agentic UIs should show what they're doingSpotted in the wild
Autosuggestions that don't get in the waySpotted in the wild
A menu with blur, staggered reveal and a satisfying collapseSpotted in the wild
Bring back whimsical, delightfully useless UISpotted in the wild
Linear's AI filters: a tiny detail that packs a punchSpotted in the wild
Collections of this kind of tipCollections
Delay the first tooltip, then open the rest instantlyFrom the Are.na channel
Animate only the incoming screen, over a shorter distanceFrom the Are.na channel
Optically align the icon, not geometricallyFrom the Are.na channel
Don't repeat animation props, change the keyFrom the Are.na channel
Four levels of motion choreographyFrom the Are.na channel
Clicking anywhere in the prompt box should focus the textareaFrom the Are.na channel
Open the menu so the selected value sits over the triggerFrom the Are.na channel
Animate the command menu's height, about 100msFrom the Are.na channel
Expand hit areas with a pseudo-elementFrom the Are.na channel
Letter-spacing should change with sizeFrom the Are.na channel
Set scroll-margin-top on headingsFrom the Are.na channel
Bold on hover without layout shiftFrom the Are.na channel
Morph an icon by animating its pointsFrom the Are.na channel
Scroll fades that disappear at the edgesFrom the Are.na channel
Give inline icons a height of 1lhFrom the Are.na channel
The hovered item gets a bigger hitbox and a higher z-indexFrom the Are.na channel
Safe triangles for nested menusFrom the Are.na channel
Use ease-out for enter and exitFrom the Are.na channel
Cursor trails from a grid and a dynamic hover transitionFrom the Are.na channel
Offset the dropdown by its own padding and align everythingFrom the Are.na channel
A 10% black-or-white hairline on a pseudo-elementFrom the Are.na channel
Blur, opacity and a spring make motion look smoothFrom the Are.na channel
Contain overscroll inside scrollable panelsFrom the Are.na channel
One shimmer across every skeleton, not one per blockFrom the Are.na channel
Use the brand colour for text selectionFrom the Are.na channel
A text reveal that still selects and reads as a sentenceFrom the Are.na channel
Scale the hover background from where the cursor enteredFrom the Are.na channel