A fixed bottom-right chat bubble, commonly used for customer support or feedback. It expands into a side panel, features a notification badge for new messages, and includes a text input for user interaction, often with a scrollable conversation history. Notable behavior: Expand/Collapse; Typing; Expanded.

This pattern describes a desktop web landing page, featuring a fixed navigation bar, footer, and interactive elements such as carousels, buttons, and hypertext links. It integrates animations, video, and anchor scrolling to create an engaging user experience. Notable behavior: Animation; Carrousel; Fixed on Scroll.

Desktop, Pathfinding, Accessibility, Decision Making, Web, English, Side Panel, Scrollbar, Toggle Field, Button, Image / Illustration, Fixed on Scroll, Filters, Animation

Facilitates file uploads with drag-and-drop or click interactions, providing background loading, progress indicators, and visual feedback. Manages empty, loading, and completion states for user awareness.

A visual transition pattern where an element, such as a window or panel, animates by shrinking and moving to a designated dock area when minimized.

Applies a dynamic 3D shadow effect to a button, enhancing visual depth and responsiveness upon interaction through animation and transition.

Desktop, Decision Making, Feedback, Awareness, Onboarding, Pathfinding, Web, Español, Modal, Thumbnail, Animation, Close Overlay, Cards, Dim Overlay

Desktop, Landing Page, Web, Español, Drag & Drop Gesture, Carrousel, Image / Illustration, Animation, Navbar, Hypertext Links, Fixed on Scroll

A background element that responds to user input or system events with dynamic visual changes, often used to enhance engagement or provide subtle feedback on web or desktop interfaces.

This modal dialog pattern utilizes a blackout overlay and animation to effectively capture user attention. It is commonly employed for critical decision-making processes, guiding users through onboarding flows, or displaying important information within web and desktop applications. The pattern ensures user focus on the modal content by dimming the background, often incorporating animated transitions for a more engaging and smoother user experience. Notable behavior: User attention capture; Decision prompting; Modal active (background dimmed).

A navigation component that allows users to toggle the visibility of a sidebar menu, often used for pathfinding on desktop and web applications.

A population pyramid visualization with interactive live filters, often using dropdown menus, for data exploration on desktop and web platforms. Features transitions for dynamic updates.

A modal dialog with a blackout overlay, containing a form, and featuring transition animations for opening and closing.

Desktop, Pathfinding, Awareness, Decision Making, Web, English, Modal, Animation, Image / Illustration

This pattern implements an image zoom or magnifier effect, enabling users to inspect fine details by hovering over an image. A magnified view typically appears as an overlay or adjacent panel, dynamically revealing content under the cursor. Notable behavior: Hover; Mouse Movement; Default.

Provides sliders for users to customize the display of an image grid, allowing adjustments to parameters like size, spacing, or number of columns. Supports interactive drag-and-drop gestures for precise control.

Simulates platform onboarding, guiding users through initial setup and feature discovery. Involves text input, pagination, and animated transitions for an interactive learning experience.

This pattern describes a zoom-in/out transition effect applied to browser windows, commonly found in desktop operating systems like Apple OS. It facilitates navigation between windows, tabs, or thumbnail views, often triggered by user interactions such as a pinch gesture. Notable behavior: Pinch gesture; Window selection; Zoomed in.

A web landing page for the Snap Camera product, featuring a fixed navigation bar, interactive buttons, and animated video content to showcase its features and encourage user engagement. Notable behavior: Scrolling; Button Click; Fixed Header.

Features an animated illustration alongside a navigation menu, often used in a carousel or paginated content structure for web and desktop applications.

A visual pattern showcasing a brand gradient, typically found on web landing pages. It may incorporate animation and custom scrollbar effects, often used in contexts displaying photo content.

A hero slider, or carousel, presents a series of prominent content items, often images, in a rotating sequence. Users can navigate through the slides using drag gestures, with smooth transitions between each item. This pattern enhances awareness and pathfinding on a webpage. Notable behavior: Drag Gesture; Slide Navigation; Active Slide.

This pattern features a background animation that plays automatically upon page or component load. It is commonly used to enhance user onboarding, create awareness, or provide visual interest during initial content display. Notable behavior: Automatic Play; Page Load Trigger; Initial Load.

A user interface pattern where a theme switcher, typically for toggling between light and dark modes, is accessible within a side-drawer or side panel. This interaction involves opening the drawer, selecting a theme, and often includes visual transitions. Notable behavior: Click event; Drawer open/close; Side-drawer open.

A visual component displaying audio levels or data using a graph of sound bars, often incorporating dynamic transitions. Typically found in desktop applications, it can be interactive, responding to click events.

A sidebar menu that can be collapsed or expanded to manage screen real estate, often used for navigation. Supports user pathfinding and awareness in web applications.

Animates a background element, often an image or illustration, as the user scrolls, creating a dynamic visual transition. The background can be fixed in position relative to the viewport.

Layout sidebars that can be expanded or collapsed, often used for navigation or supplementary content, improving screen real estate management and pathfinding.

This pattern allows users to upload files by dragging and dropping them onto a designated area, often featuring visual feedback, progress indicators, and potentially appearing within a modal dialog. Notable behavior: Drag and Drop; File Selection; Idle.

A background animation that provides visual feedback, often responding to user interactions like drag & drop gestures or indicating loading states, enhancing user awareness and engagement.

Desktop, Pathfinding, Apple OS, English, Animation, Click Event, Image / Illustration, Vectors, Figma

This pattern provides a multi-level sidebar navigation system, typically found on desktop and web applications, designed to help users efficiently navigate complex information architectures. It utilizes a side panel to display hypertext links, allowing users to drill down into multiple depths of content. The navigation often incorporates animations to enhance the user experience during expansion, collapse, or selection of menu items, facilitating clear pathfinding within the application. Notable behavior: Click to expand/collapse; Click to navigate; Expanded.

This pattern illustrates how a side panel dynamically adjusts its visibility and layout in response to changes in the viewport size. It often incorporates smooth animations to enhance the user experience during these responsive transitions. Notable behavior: Viewport Resizing; Panel Expansion/Collapse; Expanded Panel.

Desktop, Decision Making, Awareness, Accessibility, Web, English, Animation, User Selection, Drag & Drop Gesture, Timeline, Image / Illustration, Button, Steps, GIPHY

Allows users to toggle the visibility of a sidebar menu on desktop interfaces via a mouse click. This pattern typically involves a visual transition to expand or collapse the side panel, optimizing screen real estate and aiding in content pathfinding.

A Progressive Layout Loader displays content incrementally, often utilizing placeholders or animations, to enhance perceived performance and user experience during data fetching or complex rendering operations.

Applies a dynamic visual effect to an element's background when a user hovers their mouse over it, enhancing interactivity and drawing attention to the element.

Desktop, Accessibility, Web, English, Hypertext Links, Dropdown Menu, Empty State, User Selection, Avatar, Animation, YouTube, Google

Desktop, Pathfinding, Web, English, Side Panel, Transition, Image / Illustration, Tooltip, Hover Event, Intercom

Desktop, Decision Making, Awareness, Web, English, Animation, Loader, Hypertext Links

This pattern describes an email page featuring animations and hypertext links, designed to enhance user awareness and support decision-making, primarily within a desktop environment.

This pattern describes a two-pane sidebar designed for widget customization. It typically features a side panel that organizes configurable cards, often using tabs and a toolbar. Users can interact with widgets via drag & drop gestures and long-click events, with options to close overlays.

Provides a concise visual indicator, often bubble-shaped, to communicate the current status of an item or process. It enhances user awareness, particularly within dynamic content flows like infinite scroll or pagination, by highlighting progress or empty states, potentially with animation and fixed positioning. Notable behavior: Animation; Progress State; Empty State.

A dynamic visual effect that simulates an explosion of confetti, typically used to celebrate user actions or provide positive feedback.

A floating desktop widget, fixed on scroll, designed for macOS to provide awareness of voice interactions. It features an avatar, a sound bar, and a color marker, along with actionable controls.

Applies a zoom-out visual transition to an element, typically an image or illustration, when a user hovers over it. This interaction provides immediate visual feedback, indicating interactivity and drawing attention to the element on desktop web interfaces.