Screen Share UX Recipe
A step-by-step pattern for building a frictionless screen-share flow inside Meridian.
1. Capture Intent
Present a single primary action — a large, violet button labeled “Share Screen.” Place it above the fold with a subtle pink glow on hover. No secondary CTAs compete for attention.
Share your entire screen
Participants will see everything on your display.
2. Source Selection
After the user clicks “Share,” show a modal with thumbnails for each available screen and application window. Highlight the active selection with a violet border ring.
Screen 1
Window — VS Code
3. Live Indicator
Once sharing begins, replace the button with a pulsing status pill. Use a pink dot animation to signal “live” and provide a single-tap “Stop Sharing” control.
4. Error Recovery
If the browser denies permission or the stream fails, surface a compact inline alert with a retry link. Never use a full-page error state.
Permission denied. Please allow screen capture in your browser settings and try again.