Shots

1510

Apps

363

Learn

254

Storyboards

30

Glossary

85

Shots

1510

Apps

363

Shots

1510

Apps

363

Learn

254

Storyboards

30

Glossary

85

Shots

1510

Apps

363

Learn

254

Storyboards

30

Glossary

85

Learn how to use Gestures, Patterns,
Effects, and Elements

Learn how to use Gestures, Patterns,
Effects, and Elements

Learn how to use Gestures, Patterns,
Effects, and Elements

Learn how to use Gestures, Patterns,
Effects, and Elements

#

3D

3D is a pattern that adds depth and realism to interfaces, making digital objects feel tangible and immersive by turning flat surfaces into layered spaces.

3D

3D is a pattern that adds depth and realism to interfaces, making digital objects feel tangible and immersive by turning flat surfaces into layered spaces.

A

AI

AI is a pattern that brings intelligence into interfaces, adapting to user needs with personalized, context-aware actions that simplify tasks and make experiences smarter.

AI

AI is a pattern that brings intelligence into interfaces, adapting to user needs with personalized, context-aware actions that simplify tasks and make experiences smarter.

Assistant

Assistant is a pattern that guides users through tasks with AI-powered support, simplifying workflows while staying approachable and keeping the user in control.

Assistant

Assistant is a pattern that guides users through tasks with AI-powered support, simplifying workflows while staying approachable and keeping the user in control.

B

Badge

Badge is a small indicator attached to icons or components, highlighting counts, updates, or achievements with clear, at-a-glance signals.

Badge

Badge is a small indicator attached to icons or components, highlighting counts, updates, or achievements with clear, at-a-glance signals.

Blur

Blur softens the background to highlight foreground content, adding depth and focus while keeping the experience smooth and immersive.

Blur

Blur softens the background to highlight foreground content, adding depth and focus while keeping the experience smooth and immersive.

Bottom Sheet

Bottom sheet is an element that slides up from the screen’s bottom to show options or content, adding functionality while keeping users in context.

Bottom Sheet

Bottom sheet is an element that slides up from the screen’s bottom to show options or content, adding functionality while keeping users in context.

Button

Button is a core interface element that triggers actions or navigation, giving users a clear, immediate point of interaction shaped by its design and motion.

Button

Button is a core interface element that triggers actions or navigation, giving users a clear, immediate point of interaction shaped by its design and motion.

C

Calendar

Calendar is an element that organizes dates and events into a structured layout, making time visible, interactive, and easy to navigate for planning and tracking.

Calendar

Calendar is an element that organizes dates and events into a structured layout, making time visible, interactive, and easy to navigate for planning and tracking.

Card

Card is an element that groups related content into a clear, compact container, making information easier to scan, organize, and interact with flexibly.

Card

Card is an element that groups related content into a clear, compact container, making information easier to scan, organize, and interact with flexibly.

Chat

Chat is a pattern that enables real-time text communication, creating a conversational flow that makes digital experiences feel social, interactive, and immediate.

Chat

Chat is a pattern that enables real-time text communication, creating a conversational flow that makes digital experiences feel social, interactive, and immediate.

Color

Color guides attention, conveys meaning, and shapes mood. When animated, it adds energy to transitions, signals state changes, and highlights key areas.

Color

Color guides attention, conveys meaning, and shapes mood. When animated, it adds energy to transitions, signals state changes, and highlights key areas.

Confetti

Confetti is a playful effect that celebrates achievements by filling the screen with animated particles, adding joy and turning moments into memorable experiences.

Confetti

Confetti is a playful effect that celebrates achievements by filling the screen with animated particles, adding joy and turning moments into memorable experiences.

D

Drag

Drag lets users pick up and move elements freely, creating a natural, precise, and tactile connection between touch and content.

Drag

Drag lets users pick up and move elements freely, creating a natural, precise, and tactile connection between touch and content.

E

Easter Egg

Easter Egg is a hidden interaction or playful surprise in digital products, rewarding curiosity and creating delight through secret animations or content.

Easter Egg

Easter Egg is a hidden interaction or playful surprise in digital products, rewarding curiosity and creating delight through secret animations or content.

Empty State

Empty State is a pattern that appears when no content is available, guiding users with instructions or actions that turn a blank screen into a helpful next step.

Empty State

Empty State is a pattern that appears when no content is available, guiding users with instructions or actions that turn a blank screen into a helpful next step.

F

Fade

Fade is a transition where elements appear or disappear gradually, softening changes and making interactions feel smooth, calm, and intentional.

Fade

Fade is a transition where elements appear or disappear gradually, softening changes and making interactions feel smooth, calm, and intentional.

Featured

Featured is a pattern that spotlights important or curated content, guiding discovery by breaking the flow and drawing attention to what matters most.

Featured

Featured is a pattern that spotlights important or curated content, guiding discovery by breaking the flow and drawing attention to what matters most.

Flick

Flick is a quick gesture that sends elements flying with momentum, turning a light touch into fast, satisfying, and natural motion.

Flick

Flick is a quick gesture that sends elements flying with momentum, turning a light touch into fast, satisfying, and natural motion.

Flip

Flip rotates an element to reveal new content or a different state, like turning a card, adding both function and visual engagement without changing the layout.

Flip

Flip rotates an element to reveal new content or a different state, like turning a card, adding both function and visual engagement without changing the layout.

G

Gallery

Gallery is a pattern that displays images or videos in a structured collection, creating a visual-first experience that encourages exploration and discovery.

Gallery

Gallery is a pattern that displays images or videos in a structured collection, creating a visual-first experience that encourages exploration and discovery.

Get Started

Get Started is a pattern that introduces users to an app with clear first steps, reducing hesitation and guiding them toward initial engagement.

Get Started

Get Started is a pattern that introduces users to an app with clear first steps, reducing hesitation and guiding them toward initial engagement.

Goal

Goal is a pattern that defines clear targets through progress or milestones, motivating users by giving direction, focus, and a sense of purpose.

Goal

Goal is a pattern that defines clear targets through progress or milestones, motivating users by giving direction, focus, and a sense of purpose.

Graph

Graph is an element that visualizes data into clear shapes and patterns, helping users quickly spot trends, understand relationships, and make informed decisions.

Graph

Graph is an element that visualizes data into clear shapes and patterns, helping users quickly spot trends, understand relationships, and make informed decisions.

Grow

Grow is an effect where an element expands in size to draw attention, adding emphasis and presence by making interactions feel dynamic and alive.

Grow

Grow is an effect where an element expands in size to draw attention, adding emphasis and presence by making interactions feel dynamic and alive.

Gyroscope

Gyroscope interactions use device motion sensors so tilts and rotations trigger real-time shifts or animations, creating an immersive, hardware-connected experience.

Gyroscope

Gyroscope interactions use device motion sensors so tilts and rotations trigger real-time shifts or animations, creating an immersive, hardware-connected experience.

H

Hold

Hold is a long press that triggers intentional actions, unlocking secondary functions or confirming commitment through deliberate interaction.

Hold

Hold is a long press that triggers intentional actions, unlocking secondary functions or confirming commitment through deliberate interaction.

I

Icon

Icon is a simplified visual element that represents actions or concepts, offering quick recognition and clear communication without relying on text.

Icon

Icon is a simplified visual element that represents actions or concepts, offering quick recognition and clear communication without relying on text.

Illustration

Illustration is a visual element that adds personality and storytelling to interfaces, conveying mood or identity while making designs feel more human and approachable.

Illustration

Illustration is a visual element that adds personality and storytelling to interfaces, conveying mood or identity while making designs feel more human and approachable.

Input

Input is an element that lets users enter text, numbers, or selections, enabling search, communication, and data collection by turning intent into system responses.

Input

Input is an element that lets users enter text, numbers, or selections, enabling search, communication, and data collection by turning intent into system responses.

Intro

Intro is a pattern that welcomes users with storytelling, visuals, and guidance, setting expectations while building excitement for the experience ahead.

Intro

Intro is a pattern that welcomes users with storytelling, visuals, and guidance, setting expectations while building excitement for the experience ahead.

Invite

Invite is a pattern that lets users bring others into an app through links or codes, driving growth by making sharing easy and rewarding for both sides.

Invite

Invite is a pattern that lets users bring others into an app through links or codes, driving growth by making sharing easy and rewarding for both sides.

L

Loading

Loading is a pattern that manages wait times by showing progress or activity, keeping users engaged and making delays feel smoother and less frustrating.

Loading

Loading is a pattern that manages wait times by showing progress or activity, keeping users engaged and making delays feel smoother and less frustrating.

Logo

Logo is a pattern that represents brand identity, appearing in key places like splash screens or navigation bars to build recognition, trust, and consistency.

Logo

Logo is a pattern that represents brand identity, appearing in key places like splash screens or navigation bars to build recognition, trust, and consistency.

Long Press

Long press is a sustained touch that triggers secondary or hidden actions, ideal for revealing advanced options or preventing accidental triggers.

Long Press

Long press is a sustained touch that triggers secondary or hidden actions, ideal for revealing advanced options or preventing accidental triggers.

M

Map

Map is an element that displays spatial information, letting users explore, navigate, and discover by turning geography into an interactive, navigable canvas.

Map

Map is an element that displays spatial information, letting users explore, navigate, and discover by turning geography into an interactive, navigable canvas.

Mascot

Mascot is a pattern that uses a character to represent the brand, adding warmth and personality while creating emotional connections that make the app more memorable.

Mascot

Mascot is a pattern that uses a character to represent the brand, adding warmth and personality while creating emotional connections that make the app more memorable.

Menu

Menu is an element that groups actions or options into a structured list, simplifying navigation and keeping functionality clear without crowding the main screen.

Menu

Menu is an element that groups actions or options into a structured list, simplifying navigation and keeping functionality clear without crowding the main screen.

Morph

Morph is an effect where one element smoothly transforms into another, connecting states and turning abrupt changes into fluid, intentional transitions.

Morph

Morph is an effect where one element smoothly transforms into another, connecting states and turning abrupt changes into fluid, intentional transitions.

N

New

New is a pattern that highlights recently added features or content, guiding discovery and ensuring users notice updates without cluttering the interface.

New

New is a pattern that highlights recently added features or content, guiding discovery and ensuring users notice updates without cluttering the interface.

O

Onboarding

Onboarding is a pattern that guides new users through an app’s core features and value, shaping first impressions and driving early engagement.

Onboarding

Onboarding is a pattern that guides new users through an app’s core features and value, shaping first impressions and driving early engagement.

P

Pan

Pan is a continuous gesture that shifts the view or content, making navigation feel smooth, direct, and effortlessly connected to touch.

Pan

Pan is a continuous gesture that shifts the view or content, making navigation feel smooth, direct, and effortlessly connected to touch.

Permissions

Permissions are elements that request approval for access to sensitive features like location or camera, building trust by keeping access transparent and deliberate.

Permissions

Permissions are elements that request approval for access to sensitive features like location or camera, building trust by keeping access transparent and deliberate.

Picker

Picker is an element that lets users choose from options in a wheel, list, or grid, offering a clear and intuitive way to make selections.

Picker

Picker is an element that lets users choose from options in a wheel, list, or grid, offering a clear and intuitive way to make selections.

Pinch

Pinch is a two-finger gesture for zooming in or out, offering a precise, intuitive way to scale content like physically resizing it.

Pinch

Pinch is a two-finger gesture for zooming in or out, offering a precise, intuitive way to scale content like physically resizing it.

Player

Player is an element that manages audio or video playback, letting users play, pause, scrub, or adjust with clarity and responsiveness for full control.

Player

Player is an element that manages audio or video playback, letting users play, pause, scrub, or adjust with clarity and responsiveness for full control.

Pricing

Pricing is a pattern that presents subscription tiers, features, and benefits with clarity, helping users understand value and make confident purchase decisions.

Pricing

Pricing is a pattern that presents subscription tiers, features, and benefits with clarity, helping users understand value and make confident purchase decisions.

Progress

Progress is an element that visualizes advancement toward completion, giving users reassurance and making time and effort feel clear and tangible.

Progress

Progress is an element that visualizes advancement toward completion, giving users reassurance and making time and effort feel clear and tangible.

Pull

Pull is a drag beyond content’s boundary, often used to refresh or reveal options, adding a tactile sense of resistance and release.

Pull

Pull is a drag beyond content’s boundary, often used to refresh or reveal options, adding a tactile sense of resistance and release.

Pulse

Pulse is an effect where an element rhythmically expands and contracts, adding a lively energy that draws attention to key areas without being disruptive.

Pulse

Pulse is an effect where an element rhythmically expands and contracts, adding a lively energy that draws attention to key areas without being disruptive.

Q

Quick Actions

Quick Actions are shortcuts that surface relevant tasks in context, letting users act quickly and efficiently without navigating deeper into the interface.

Quick Actions

Quick Actions are shortcuts that surface relevant tasks in context, letting users act quickly and efficiently without navigating deeper into the interface.

R

Reaction

Reactions are quick, visual responses that let users express emotion or support in a single tap, making interaction effortless and instantly recognizable.

Reaction

Reactions are quick, visual responses that let users express emotion or support in a single tap, making interaction effortless and instantly recognizable.

Recap

Recap is a pattern that summarizes past activity or progress, turning data into a visual narrative that highlights achievements and celebrates the user’s journey.

Recap

Recap is a pattern that summarizes past activity or progress, turning data into a visual narrative that highlights achievements and celebrates the user’s journey.

Reveal

Reveal is an effect that gradually uncovers content through motion or transparency, building anticipation with timing and easing to guide how information appears.

Reveal

Reveal is an effect that gradually uncovers content through motion or transparency, building anticipation with timing and easing to guide how information appears.

Reward

Reward is a pattern that celebrates user actions with positive reinforcement, turning achievements into satisfying moments that boost motivation and engagement.

Reward

Reward is a pattern that celebrates user actions with positive reinforcement, turning achievements into satisfying moments that boost motivation and engagement.

S

Scroll

Scroll lets users move through content vertically or horizontally with fluid motion, making navigation feel natural and almost invisible.

Scroll

Scroll lets users move through content vertically or horizontally with fluid motion, making navigation feel natural and almost invisible.

Scrub

Scrub is a precise drag along a timeline or track, letting users glide through content to quickly find the exact moment they need.

Scrub

Scrub is a precise drag along a timeline or track, letting users glide through content to quickly find the exact moment they need.

Search

Search is an element that lets users quickly find information by entering keywords, offering an efficient, direct path to the content they need.

Search

Search is an element that lets users quickly find information by entering keywords, offering an efficient, direct path to the content they need.

Sequence

Sequence is an effect where elements appear or transform step by step, creating rhythm, guiding attention, and making interactions feel engaging and structured.

Sequence

Sequence is an effect where elements appear or transform step by step, creating rhythm, guiding attention, and making interactions feel engaging and structured.

Setup

Setup is a pattern that walks users through initial configuration, laying the foundation for the experience while reducing confusion and building early trust.

Setup

Setup is a pattern that walks users through initial configuration, laying the foundation for the experience while reducing confusion and building early trust.

Show/Hide

Show/Hide is an effect that smoothly reveals or removes elements, adding presence and continuity so changes feel natural rather than abrupt.

Show/Hide

Show/Hide is an effect that smoothly reveals or removes elements, adding presence and continuity so changes feel natural rather than abrupt.

Showcase

Showcase is a pattern that highlights content or features in immersive views like full screens or carousels, creating focus and elevating items beyond a standard feed.

Showcase

Showcase is a pattern that highlights content or features in immersive views like full screens or carousels, creating focus and elevating items beyond a standard feed.

Shrink

Shrink is an effect where an element reduces in size, mimicking physical compression to give feedback, add depth, and make interactions feel more tangible.

Shrink

Shrink is an effect where an element reduces in size, mimicking physical compression to give feedback, add depth, and make interactions feel more tangible.

Slide

Slide is a smooth gesture where elements move with the user’s finger or between states, creating fluid, natural continuity in motion.

Slide

Slide is a smooth gesture where elements move with the user’s finger or between states, creating fluid, natural continuity in motion.

Slider

Slider is an element that lets users adjust values or ranges by moving a handle along a track, offering precise, continuous, and visual control.

Slider

Slider is an element that lets users adjust values or ranges by moving a handle along a track, offering precise, continuous, and visual control.

Sound

Sound pairs visuals with audio cues to add depth and atmosphere, making interactions feel more responsive, polished, and immersive.

Sound

Sound pairs visuals with audio cues to add depth and atmosphere, making interactions feel more responsive, polished, and immersive.

Spin

Spin is an effect where an element rotates around a point, adding lively, rhythmic motion that grabs attention without disrupting the main interaction.

Spin

Spin is an effect where an element rotates around a point, adding lively, rhythmic motion that grabs attention without disrupting the main interaction.

Splash

Splash is a pattern that introduces an app at launch with visuals or animation, setting the tone and showcasing brand identity before the main experience begins.

Splash

Splash is a pattern that introduces an app at launch with visuals or animation, setting the tone and showcasing brand identity before the main experience begins.

Stats

Stats are a pattern that simplifies data into clear visuals or numbers, giving users quick insight into progress or performance in an approachable way.

Stats

Stats are a pattern that simplifies data into clear visuals or numbers, giving users quick insight into progress or performance in an approachable way.

Story

Story is an element that displays content in full-screen, swipeable panels, creating a quick, immersive, and engaging way to consume updates or highlights.

Story

Story is an element that displays content in full-screen, swipeable panels, creating a quick, immersive, and engaging way to consume updates or highlights.

Streak

Streak is a pattern that tracks consecutive activity days, motivating users with visual momentum and rewarding consistency to keep engagement strong.

Streak

Streak is a pattern that tracks consecutive activity days, motivating users with visual momentum and rewarding consistency to keep engagement strong.

Swipe

Swipe is a quick directional gesture that lets users dismiss content, switch views, or trigger shortcuts with a single smooth motion.

Swipe

Swipe is a quick directional gesture that lets users dismiss content, switch views, or trigger shortcuts with a single smooth motion.

T

Tab

Tab is an element that organizes content into sections, allowing easy switching between views and keeping navigation clear and clutter-free.

Tab

Tab is an element that organizes content into sections, allowing easy switching between views and keeping navigation clear and clutter-free.

Tap

Swipe is a quick directional gesture that dismisses content, switches views, or triggers shortcuts with a single, confident motion.

Tap

Swipe is a quick directional gesture that dismisses content, switches views, or triggers shortcuts with a single, confident motion.

Text

Text is an element that communicates through written words, providing clarity and guidance while ensuring information is easy to read and absorb.

Text

Text is an element that communicates through written words, providing clarity and guidance while ensuring information is easy to read and absorb.

Theme

Theme is a pattern that defines an app’s look and feel through consistent visuals, shaping mood and personality while unifying the experience across screens.

Theme

Theme is a pattern that defines an app’s look and feel through consistent visuals, shaping mood and personality while unifying the experience across screens.

Timer

Timer is a pattern that tracks time within an interface, creating urgency or awareness by showing progression and guiding user behavior through countdowns or tracking.

Timer

Timer is a pattern that tracks time within an interface, creating urgency or awareness by showing progression and guiding user behavior through countdowns or tracking.

Tooltip

Tooltip is an element that appears on hover, focus, or tap to provide extra guidance, offering context without cluttering the main interface.

Tooltip

Tooltip is an element that appears on hover, focus, or tap to provide extra guidance, offering context without cluttering the main interface.

Typing

Typing is the act of entering text on a digital keyboard, turning touch into characters with a responsive, accurate, and fluid experience.

Typing

Typing is the act of entering text on a digital keyboard, turning touch into characters with a responsive, accurate, and fluid experience.

V

Video

Video is an element that delivers motion content with visuals, sound, and timing, offering a rich, dynamic way to inform, entertain, or guide users.

Video

Video is an element that delivers motion content with visuals, sound, and timing, offering a rich, dynamic way to inform, entertain, or guide users.

Voice

Voice is a pattern that enables natural speech for input and feedback, reducing friction and making the interface feel more human and conversational.

Voice

Voice is a pattern that enables natural speech for input and feedback, reducing friction and making the interface feel more human and conversational.

W

Weather

Weather is a pattern that presents real-time conditions and forecasts in clear, visual, and often animated forms, making climate data easy to grasp and engaging to check.

Weather

Weather is a pattern that presents real-time conditions and forecasts in clear, visual, and often animated forms, making climate data easy to grasp and engaging to check.

Widget

Widget is an element that offers quick access to information or actions outside the main app, giving users convenient, lightweight interaction from the home screen or dashboard.

Widget

Widget is an element that offers quick access to information or actions outside the main app, giving users convenient, lightweight interaction from the home screen or dashboard.

Wiggle

Wiggle is a playful effect where an element shakes in quick motions, adding energy and drawing attention by making static elements feel lively and dynamic.

Wiggle

Wiggle is a playful effect where an element shakes in quick motions, adding energy and drawing attention by making static elements feel lively and dynamic.

Workout

Workout is a pattern that structures exercise through guided sessions or plans, making fitness approachable with clear progression, motivation, and easy tracking of results.

Workout

Workout is a pattern that structures exercise through guided sessions or plans, making fitness approachable with clear progression, motivation, and easy tracking of results.

Z

Zoom

Zoom is an effect that magnifies or shrinks content, often through pinch or tap gestures, creating smooth, responsive transitions that enhance focus and scale.

Zoom

Zoom is an effect that magnifies or shrinks content, often through pinch or tap gestures, creating smooth, responsive transitions that enhance focus and scale.