JohnPhamous
14K posts
JohnPhamous
@JohnPhamous
- prediction cone/safe triangle - horizontal buffer increases as pointer approaches nested menu - caches bounding boxes to prevent reflows
00:00 - onboarding ends with fog reveal - css-only dynamic fog (no canvas/shaders) - fluid sizing - features the 4 spirits of whimsy
00:00 - animated console.log messages - respects prefers-reduced-motion
00:00 - don't forget `touch-action: manipulation` for buttons on mobile double taps shouldn't zoom
00:00 - additional affordance to show if current scroll position is at the top or not
00:00 - rendering a table with 10 million rows—fast rendering with just content-visibility no ghosting effect if you scroll super fast
- animated pipes - animation is made by stacking 2 layers of the lines; 1 gray & 1 color - the color layer has linear-gradient mask. keyframes translate the mask by animating mask-position-x when `prefers-reduced-motion`, shows a static version instead 👇
00:00 - text responds to background colors - text mask, text-shadow, and backdrop filter code below
00:00 - After seeing the right, I can't go back to the left What's the difference? Right is using P3 colors. Checking for support is easy 👇
