visual hash - bayer 4x4 dither - oklch monotone gradient

designing with ai demos next thursday at the vercel sf office

visual hash shader - signed distance function determines shape - key hashes to color, breathing & flicker

bresenham's line algorithm used to get the pixelated line style - makes staircase diagonals - each path segment snapped to 4px grid

dog follows pointer + avoids collisions with no dependencies - builds the page as a graph, more subdivisions towards the text for perf - dijkstra shortest path

middle truncation

when your build fails - loading state shows for at least 1.5s to prevent super faster transition that's dependent on the network

i added my dog to my website

mermaid theme + animations x.com/marijanapav...

come jam with us x.com/bramirezz_/...

started as a scout for a16z let’s collab devtools & design, pre-a

dog following cursor has a dead zone - once dog becomes idle, movement in deadzone doesn't trigger movement - better experience for users without precise movement - adds more intentionality to the dog moving, feels more dog-like than robot

labels drop insignificant values once the y-axis range max is large enough

better labels in vs code/cursor for next.js files

searching for settings within a project also shows the team level settings - helps people find a setting but don't remember which scope it's under

datadog for humans - realtime heart rate - correlates with typing speed, clicks, pointer travel distance & what app you're in - breakdowns by websites & slack channels - insights in deep focus, context switching, hr per-app - local, native app

vip startup in the new dashboard

can tap the screen to call dog over to you faster - dog has base speed (similar to irl) - each tap gives +1pts speed, exponentially decaying with each successive tap - speed decays over time (dog gets tired) - speed resets when reaching cursor

jam with us - high agency, low ego team - design + interface building - unlimited opus 4.5 credits if you obsess over perceived performance, interaction design & typography dm me

searching for settings searches team-level and within your projects - helps people find a setting but don't remember which scope it's under

pov: inspecting an animation

typography details - tabular nums - right-aligned number columns - curly quotes, not straight - no text widows - no ligatures in code blocks

warns you if you made a typo

vercel logs now render pretty json - search highlighting via css custom highlight api (zero extra dom nodes) - a11y/keyboard (implements wcag tree view pattern)

agent skill to help with learning and retention 1. read the thing 2. use skill on the thing: reads in a diff way, follow up q&a, propose anki cards 3. creates and syncs anki cards 4. do anki cards on phone while walking

dog is animated using a sprite sheet - single network request for 57kb image to get animation frames - no 3rd party dependencies

unit test logs for our main app is reduced - makes it easier for humans and agents to understand what's going on - 40 lines when there's no failed tests - ~70 lines per failed unit test

warns you if you're about to make the news

learned about potential fields

the vercel environment variables ui has been updated a collab with @mamuso & @merycodes thanks to @mschoening for feedback

should we do a 2026 edition? x.com/JohnPhamous...

hit target should be large enough - visual size is 20px - hit target is 36px

tip for screensharing animations on zoom - set display size as close to 1920x1080 (viewers get a 1080p video, closer you are the less downscaling) - make sure this is checked before starting screenshare viewers will see a crispier feed and closer to 30fps (regular is ~5fps)

vercel web interface guidelines are an installable agent skill 𝚌𝚞𝚛𝚕 -𝚏𝚜𝚂𝙻 𝚟𝚎𝚛𝚌𝚎𝚕.𝚌𝚘𝚖/𝚍𝚎𝚜𝚒𝚐𝚗/𝚐𝚞𝚒𝚍𝚎𝚕𝚒𝚗𝚎𝚜/𝚒𝚗𝚜𝚝𝚊𝚕𝚕 | 𝚋𝚊𝚜𝚑 - supports claude code, @opencode, @cursor, @geminicli & @windsurf - suggestions output file:line:column for 1-click

vercel agent code reviews now uses your coding guidelines

bulk checkboxes gives preview of change

more context file name labels

scroll-synced table of contents

big fan x.com/ndrewpignan...

button overlay has a mask to blend with overlapping content

sticky headers for lists + conditionally rendered border

interface chaos testing for user generated strings vercel staff have access to a tool to test it in our cmd+k menu

different llms playing snake, last snake standing x.com/rauchg/stat...

congrats x.com/evanjconrad...

generative music generated from streaming data - no mp3s, all generated at runtime using tone.js - sounds are reactive & synced with visual - to reduce repetitiveness, uses a markov chain to decide the next note to play for each track - mixed on a master bus for a crispy sound

hover state background colors are tinted to match foreground color

event delegation + shared button - renders 1 button that's shared across N lines - attaches 1 event listener for N lines

truncating behavior for file paths - prioritize showing the start & file name

truncating the middle branch names - preserves the prefix if there is one (issue IDs, namespaces) - relies on people recognizing the word with only the start & end

grouping contiguous messages from the same author