Lightnews — Scholar-powered news

johnphamous @phamous.dev · 22h

empty state for vercel agent

- reduced motion variant

1

johnphamous @phamous.dev · 1d

sticky header + border radius changing from 0 to rounded when reaching end of scroll container

1 4

johnphamous @phamous.dev · 2d

icon transition

- svg
- dashed line is a horizontal line with 3 points
- animate to check by animating 3 points

5

johnphamous @phamous.dev · 7d

prior
x.com/JohnPhamous...

1

johnphamous @phamous.dev · 7d

corner radii goes to 0 when layout is inset

1 6

johnphamous @phamous.dev · 8d

foreground with same hue as background instead of neutral so it doesn't look fuzzy

1 5

johnphamous @phamous.dev · 9d

if the same radius

johnphamous @phamous.dev · 9d

border radius smaller for shorter content so it looks similar to longer variant

1 3

johnphamous @phamous.dev · 12d

structural diffs

3

johnphamous @phamous.dev · 13d

horizontal sticky header to maintain context

8

johnphamous @phamous.dev · 14d

prior
x.com/JohnPhamous...

1

johnphamous @phamous.dev · 14d

prediction cone/safe triangle

- horizontal buffer increases as pointer approaches nested menu
- caches bounding boxes to prevent reflows

1 1 8

johnphamous @phamous.dev · 15d

vercel.com/design/guid...

Web Interface Guidelines

Guidelines for building great interfaces on the web. Covers interactions, animations, layout, content, forms, performance & design.

vercel.com

2

johnphamous @phamous.dev · 15d

guidelines for building interfaces on the web

interactions, animations, layout, content, forms, performance, design & copywriting

includes an AGENTS.md

1 4 23

johnphamous @phamous.dev · 16d

nbsp wrapping behavior for non-inline elements

1 10

johnphamous @phamous.dev · 19d

wig

5

johnphamous @phamous.dev · 20d

in-product empty state with personalized example

username is derived from logged in user

this way the user can feel it

x.com/vercel_chan...
x.com/vercel_chan...

1

johnphamous @phamous.dev · 21d

set `scroll-margin-top` on headers for spacing between the header and the top of the viewport

3

johnphamous @phamous.dev · 22d

every section is deep-linkable

2

johnphamous @phamous.dev · 23d

an iteration on @rauno's prior

- reduced motion variant
- preserves text selection
- accessibility tools announce the sentence instead of letter-by-letter
- no enter animation on mount
x.com/raunofreibe...