Watch it live on Cloudflare DocsMore patterns from Cloudflare393. Colored Checkboxes392. Nuqlea - Plataforma para constructores390. Icon Software Landing Page389. Text Edit Inline Input388. Multiple Item Selection Drag & Drop386. Skeleton Loader383. Video Animation on Touch382. Interactive Background Animation379. Dropdown Filters378. Modal Blackout with Animation363. Better History - Back to Top on scroll362. Slack - Side Menu Toggle361. WhatsApp - Progress Bar Loading360. Figma - Page Outline Navigation359. Discord - Button to Input Transition358. Google Drive - Floating Menus357. Google/Youtube Help - Fixed Form with Steps356. MetaMap - Multi-Layout Topbar Menu355. Jira - Feature Presentation Tooltip354. Figma - Floating Form with Steps353. Population Pyramid - Visualizations with live filters362. Modal Blackout with Form & Animations350. Netifly - Multi-layout Topbar Menu349. HubSpot - Toggle High Contrast359. Toggle List/Grid View 347. YouTube - Floating Progress Bar357. Modal with Steps (No blackout)355. Navigation Tabs with Slider (Swipe)344. MercadoLibre - Horizontal Item Slider343. Behance - Login with Code Validation 342. Savee - Light/Dark Mode Switcher 340. Asana - Zoom/Magnifier Over Image341. Savee - Image Grid Customization339. Asana - Platform Onboarding Simulator338. Toggl - Sidebar Menu Show More345. Vertical Accordion for FAQs336. Apple - Floating Window Tooltip343. Modal Drag & Drop to Fixed Position334. MercadoLibre - Call to Action Trigger Effect332. Apple - Drag&Drop Browser File to Desktop331. Linkedin - Search Bar Blackout330. PositivePsychology - Article User Feedback322. Apple - Search on Menu Items328. Apple Safari - Zoom In/Out Transition333. Static Tooltip with Steps325. Apple - Drag & Drop Slots324. Visual Studio Code - Dual View Scroll Sync329. Postman - Onboarding Tooltips321. Caloriemama - App Hero Swiper320. Discord - Sign In with Loading Tips319. Wordpress - Delete Confirmation with Name318. Binance - Tooltip on Features317. Apple - Photos Zoom In/Out Navigation316. Apple - Tooltip on icon315. Signal - PIN Reminder314. Snapchat - Snap Camera312. Pocket - View Switcher312. Instagram - Animated Illustration with Menu310. HubSpot - Checkbox Confirmation309. Instagram - Brand Gradient308. MercadoLibre - Hero Slider313. Modal Blackout with Scroll312. Google Data Studio305. Notion - App Download Page309. Horizontal Slider for Styles308. Spinners for Module Loading307. Hover Tooltip306. Drag & Drop for Reordering Items305. Button Combo for App Download303. Background Animation302. Theme Switcher in Side-drawer300. Sound Bars Graph299. Fixed Corner Popup with Steps298. Avatar Sync with NFT297. Thumbs Up/Down295. “NEW” Badge on Menu Items294. Full-Screen Steps Animated Transition 293. Collapsable Sidebar Menu292. Vertical Icon Menu291. Action Menu from Button289. Unsplash - Fixed Popups288. Vimeo - Topbar Language Switching286. Apple - Background Animation on Scroll285. Cloudflare - Sidebar with Scroll284. Emergency Information Map284. Top Tooltip on Link Hover282. Telegram - Chat Setup Wizard281. Ideabot - Background Animation on Mouse Movement280. Slack - Workspace Creation Wizard271. Slack - Collapsable Sidebars278. Search Menu Dropdown from Input Text277. Horizontal Card Slider with Actions268. GIPHY - Alert on Drag & Drop275. Bottom Tooltip on Icon Hover266. Github - Interactive Background Animation265. Youtube - Hidden Options Menu (Dots)264. Figma - Interactive Background Animation268. Modal Blackout with Swiper262. Google - Horizontal Card Slider261. Mailchimp - Hold Button for Confirmation259. Apple - Drag & Drop List Items262. Fixed Modal Blackout 257. Spotify - Zoom In Transition256. Squarespace - Multi-depth Sidebar Navigation245. Squarespace - Adaptable Viewport Size256. Modal Blackout with Steps & Forms243. GIPHY - Trim Video Slicers242. Notion - Side Menu Toggle253. Youtube - Table Row Selector240. Instagram - Horizontal Accordion251. Cursor Tooltip on Mouse Pointer238. WhatsApp - Color Switcher Preview237. Apple - Snackbar Popup Animation236. GIPHY - Horizontal Slider Navigation235. Disney Plus - Background Animation on Hover233. Asana - Floating Animation241. Modal Blackout with Steps231. Fixed Popup with Steps230. Apple - Secondary Sidebar Toggle229. Top Banner for Design Changes228. Notification Bell Status236. Horizontal Graph with Time Ranges226. Youtube Studio - Image Multi-zone Crop 225. Cloudflare - Multiple Graphs by Time Ranges224. Drag & Drop to Browser223. Apple - Stop Operation Progress222. Cloudflare - Toggle Light/Dark Theme221. Apple - Image Grid Spacing220. Apple - Multi-window App219. Apple - Adjacent Sidebar Toggle218. Apple Keynote - Template Format Selection217. Apple - Cropping multiple screens222. Floating Banner on User Input215. Stacked Action Button214. Netflix - Information Toggle218. Modal Blackout with Steps, Forms and Animations211. Intercom - Vertical Icon Menu212. Multi-layer Background Animation 45. Webapp Video Loader165. Two-step Download Flow59. Ecommerce App Homepage (5)183. Apple MacOS - Full Screen Widget Customization162. Login Value Compare101. Downloading Desktop App169. Youtube Studio - Delete Content Forever121. 2-pane Audio Navigation172. PedidosYa - Search Results Recommendation52. Uber EATS - Making a Food Order31. Page Blocker Edition Warning5. Website Promotional Top Banners53. Apple Safari - Editing Bookmarks189. Feature Preview on Menu95. Delete Confirmation with Name175. Tab Preview on Hover State161. Apple - Two-Factor Validation (2FA)91. Settings for Account Privacy138. Read Modes148. Search Bar Fade-out134. Save for Reading Later43. File Upload Status201. Sidebar Emptystate54. Apple Safari - Browser Reader Mode201. Modal Blackout with Actions189. Illustration (Meme) on Empty State130. Animated Email Page114. News Swiper151. Menu Drop-down144. Meeting Guest Warning93. Top Secondary Banner137. Product Color Selector132. Amazon - Store Tooltip Reminders181. Plan Upgrade Flow106. In-App Promotional Banner111. Magazine Subscription7. sitepoint - Accessibility Adjustments163. Open App from Web164. Static Tooltip on Menu191. Viedo Rewind & Forward42. Browser Status Banner for Pages157. Webflow - Magnifying Glass on Images65. PedidosYa - Location Confirmation184. Apple App Store - Download & Confirmation Buttons198. Take action on Music Claims89. Bottom Page Fake-News Warning61. Section Dropdown11. Apple MacOS - Split OS Screens90. In-product Top Primary Banner70. Trip Starting Point62. Google Maps - Weekly Schedule127. Google Maps - Notifications Disabled Warning179. Stylized Feature Highlighting203. Password Expiration on Login56. Fixed Popup Blackout with Steps153. Bar Reading Status115. Buffer - Hover Instructions81. MercadoLibre - Saving Favourites as Guest51. Download App Reminder167. Apple MacOS - 2-pane Widget Customization140. Synced Hover Animations193. Apple iOS - Contextual Feature Presentation73. App Swiper152. File Icon Selector149. Security Top-banner145. Communication Preferences on Sign Up Flow145. Suscription Options147. Linked Settings for User Permissions148. Half-page Illustration Slider29. About.me - Wizard Generation Profile36. Contact Segmentation87. Warning on Product Homepage10. Background Ads83. Banner on News Page100. Tooltip Feature Presentation 174. User Input for Image ALT Text182. Static Tooltip for Text Formatting124. Critical Changes Warning107. Updating Phone Number Flow192. Modal with Actions128. Navigation Preferences125. Product Highlights103. Subscription Reminder133. Card Slider with Call-to-Action131. Free Audiobook Trial8. Adobe - In-App NPS Survey49. Notification for Order Review116. 2-pane Automatic Slider28. Slack - Find your Workspace15. Apple Find My - Notification by Geolocation63. GitHub - Contextual Back Navigation Bar14. App Bottom Popup122. Figma - Stepped Tooltip Onboarding32. Mailchimp - Makes me feel40. App Image Loader Skeleton96. Encouraging Allowing Ads171. Slack - Multi-browser Sign In186. Apple Safari - Browser Background Customization116. User Feedback on Web Content6. Side Status Notification173. Diseney Plus - Invitation to Share Live Movie205. TechCrunch - Bubble Status Reading 94. Top Primary Banner93. Welcome Screen with Background129. PDF Show & Download190. Ask Email for Playing Video168. Anfibia - Natural Article Rating79. Out of downloads176. Wordpress.com - Natural Inputs with Suggestions133. Website-Browser Notification Reminder208. Checkbox for User Confirmation98. Features on Signing-up57. IDF - Encouraging Newsletter Sign-up173. Toggl - Onboarding Action Tooltip9. App Integration Banner202. Apple Reminders - List Widget Customization118. Whereby - Pricing Step on Sign Up3. Apple Safari - Search Options on Focus99. Letterboxd - Topbar Dropdown Menu109. Native Long-press Menu55. Contextual Form Input Errors170. Figma - Fixed Form with Steps204. StackExchange - Rewards on Notification Topbar185. Bottom Action Menu78. Apple iOS - Dark & Light Color Themes86. Table Column Slicer25. Apple - Two-factor Auth2. Youtube - Feed Filter Tabs54. Modal for Language & Region Picker159. Wix - Natural Language Form23. Suscription gimmicks110. Vertical Perspective Grid69. Uber EATS - Tab Menu Navigation11. Intercom - Likert in chat196. Video Story on Website119. PrestaShop - Site Cookie Management66. Products Discounts24. Window Maximize Options39. Youtube - Dismissed Bottom Popup126. WeTransfer - In-front Site Terms66. Actionable Empty State38. Youtube - Video Statusbar85. Bottom Popup Secondary60. MercadoLibre - Ecommerce App Searching (3)104. Slack - Creating & Customization Workspace80. Contextual Input Status135. Stories From Network58. Getting on Fitness47. Notion - Workspace Types41. Context Banner Card42. Modal for Tags Editing21. Apple MacOS - Advanced Color Picking75. Notification Recommendation22. Mailchimp - First Mailing Campaign172. Contextual Popup for Service Upgrade84. Pandemic Warning Message on Map37. Branded Illustrations for Reinforcement209. Apple Calendar - Zoom Transition Navigation35. Do Not Leave Popup156. Figma - Keyboard Navigated Menu88. Fake-News Warning105. Tooltip Blackout