Patterns

A collection of downloadable prototypes that demonstrate repeatable solutions to recurring design problems

Featured
  • Featured
  • Interaction
  • Logic
  • Animation
  • Logic
  • Scroll
  • Layers
  • Loops
  • Utilities

Condition

Set events based on time positions

Delay

Motion using a linear timebase

Options

Tween between position types

Repeating

Loop a linear timebase

Scrubbing

Restart & offset time using sample and hold

Time

Loop and control a linear timebase

Trail

Use the delay patch to follow a position

Drag

Move a layer around the bounds of a frame

Keyboard

Use the keyboard for testing or as an input

Mouse

Mouse position, hover states and cursor control

Pinch & Rotate

Multi finger pinch scale and rotate states

Swipe

Swipe between two states

Bottom Sheet

Present and drag dismiss a bottom sheet

Disappear

Animate in content and dismiss on timeout

Flip

Use a single axis to rotate

Full

Scrollable list of cards that expand to fullscreen ontouch

Layout

Horizonal, Vertical & Grid layer layouts

List

Collapse a cell on selection

Padding

Use layout padding to resize layers

Pivot

Transition based on pivots and rotations

Rotation

Use a parent bounds to rotate

Swipe Menu

Horizonal swipe to reveal actions

Count

Count in increments, decrements or set a value

Equals

Combine Equals Exactly and Not for conditions

Feedback

Create a feedback to increment values

Logic

Use And/Or to trigger events

Math

Use math patch to calculate values

Options

Pick an option to output based on selections

Sample

Use the random and sample patches to capture an option

Switch

Change a state from off to on or toggle

Choose

Select one instance in a loop

Delay

Add a delay to a loop animation

Rating

Create a rating using loops

Replace

Change a loop instance for another

Selected

Present a screen to display the choosen loop

Sum

Calculate the total of looped number

Switch

Use exceptions and switches with loops

Transform

Duplicate layers and offset properties using an index

Away

Display a navigation based on scroll away values

Collapsible

Header that collapses into a nav bar on scroll

Jump

Reposition to a desinated position on a scroll view

Refresh

Activate a refresh indicator on scroll top cap

Scroll

Use nested paging and free flow scrolling

Sticky

A sticky header that stays fixed to the top of the feed whilst scrolling

Tab

Select a tab option or swipe between options

Blur

Background blur based on light or dark mode

Dial

Using the Arctangent patch to calculate circular movements

Drawing

Use the JSON to shape patch

Grid

Grid selection with Keyboard, touch, gamepad

Keyboard

Use native text input from device or keyboard

Map

Set a location on Apple maps

Microphone

Record and input from the devices microphone

Particles

Sample and generate particles of images

Screens

Modal and push screen transition

Shape

Union of stock shape patches

Text Formatting

Formatting Build text formatting with the Style patches

Video

Scrub through video playback