Search modal view transitions

I have no idea if the team is interested in something like this, but I figured I'd propose it 🙂

Live demo: tailwind-search.barvian.me (the Vercel previews are choppy for me; I think it's the dev toolbar)

https://github.com/tailwindlabs/tailwindcss.com/assets/868352/74b8d8fe-1285-4578-baa5-079e93f563e2

I've always thought the search bars on the site would look great if they smoothly transitioned to the modal. The View Transitions API makes this trivial to implement while gracefully falling back to existing behavior if the browser doesn't support it or if the user prefers reduced motion. Plus, there's no lag because the modal is fully active while it's transitioning, so you can start typing immediately without waiting for the animation to end. I used a linear() spring transition with a perceptual duration of 250ms to keep things feeling snappy. I made sure to support the small-screen version too:

https://github.com/tailwindlabs/tailwindcss.com/assets/868352/b1b9918e-625d-4367-bf44-f5cca56611cb

The only noticeable difference from prod for browsers that support View Transitions is shown above 👆🏻: the "Quick search..." button on the homepage disappears whenever the search icon in the header is visible (on prod both are visible between sm and md breakpoints). This dramatically simplifies the view transition logic. Like everything else, though, it only applies if the user's browser supports view transitions and is "motion-safe".

It even works with route transitions:

https://github.com/tailwindlabs/tailwindcss.com/assets/868352/e3b08c8e-9eef-44e6-a596-f7e6817986c2

I'm curious to hear your thoughts, if any!

tailwindlabs / tailwindcss.com

Search modal view transitions #1831