Curated archive of 17 design references, UI interactions, and animations published by JohnPhamous on X.
the ▲ design team is hiring - high agency, ownership, feedback volu... - JohnPhamous
the ▲ design team is hiring - high agency, ownership, feedback volume - low ego, red tape, process send me a dm - product design, marketplace: https://vercel.com/careers/product-d...
@JohnPhamousA dark, moody motion piece marking 365 days at Vercel, featuring a... - JohnPhamous
A dark, moody motion piece marking 365 days at Vercel, featuring a rotating 3D tetrahedron catching dramatic light against a pixelated typographic backdrop.
@johnphamouswedding website as an rpg - JohnPhamous
wedding website as an rpg
@JohnPhamousdog follows pointer + avoids collisions with no dependencies - buil... - JohnPhamous
dog follows pointer + avoids collisions with no dependencies - builds the page as a graph, more subdivisions towards the text for perf - dijkstra shortest path
@JohnPhamousi added my dog to my website - JohnPhamous
i added my dog to my website
@JohnPhamoustruncating behavior for file paths - prioritize showing the start &... - JohnPhamous
truncating behavior for file paths - prioritize showing the start & file name
@JohnPhamousthe vercel design team - JohnPhamous
the vercel design team
@JohnPhamoussomething special for members of the vercel for startups program -... - JohnPhamous
something special for members of the vercel for startups program - shader that's lazily loaded on hover - shader makes a looping triangle pattern collab with @williambout, designe...
@JohnPhamousbetter multi-select for deployment status' - labels convey action -... - JohnPhamous
better multi-select for deployment status' - labels convey action - keyboard accessible
@JohnPhamousempty state for vercel agent - reduced motion variant - JohnPhamous
empty state for vercel agent - reduced motion variant
@JohnPhamousicon transition - svg - dashed line is a horizontal line with 3 poi... - JohnPhamous
icon transition - svg - dashed line is a horizontal line with 3 points - animate to check by animating 3 points
@JohnPhamousstatus transitions - JohnPhamous
status transitions
@JohnPhamousselection color depends on the content - JohnPhamous
selection color depends on the content
@JohnPhamousbadges - icons/dots/labels are aligned - p3 colors when supported -... - JohnPhamous
badges - icons/dots/labels are aligned - p3 colors when supported - special icon treatments to make sure they're visible
@JohnPhamousanimated dashed border with rounded linecaps - JohnPhamous
animated dashed border with rounded linecaps
@JohnPhamouschromatic aberration sf compute - JohnPhamous
chromatic aberration sf compute
@JohnPhamousincidents history page - sticky dates - today's date is marked with... - JohnPhamous
incidents history page - sticky dates - today's date is marked with today - back-to-back empty days are grouped for more useful information to scroll distance ratio - times are lo...
@JohnPhamous