Add handshake animation to HCW

[jescalan]

🔎 Previews:

• https://clerk.com/docs/pr/2191/how-clerk-works/overview#the-handshake

What does this solve?

Handshake is a challenging architectural concept and I felt like adding an animation to clarify the flow might help readers to better contextualize how it works. Big props to the design team for nailing the graphics here on the first shot!

Checklist

• I have clicked on "Files changed" and performed a thorough self-review
• All existing checks pass

[github-actions]

Hey, here’s your docs preview: https://clerk.com/docs/pr/2191

[alexisintech]

"User requests app from server" I'm not really sure what this is trying to say - Maybe "User makes a request to the server with an expired token"? Also "w/expired token" should be "with expired token" as not everyone, especially non-english native speakers, will know what "w/" stands for.

Should be "Server returns a redirect response to the browser. This includes a callback URL to the server."

Should be "FAPI checks the authentication state and if valid, returns a new session token when it returns the request to the server callback URL." we can say returns a new session token or mints a new session token or whatever jargon sounds better here, but we should make it clear that FAPI checks the client cookie to check the auth state. if it's valid, it will return a new session token, but if it's not valid, it won't.

[jescalan]

Getting the suggested copy changes addressed by design ⏲️

[jescalan]

Ok @alexisintech updated video with text edits

[alexisintech]

yup!! love it 💘