• Typeset
  • Create
AppearanceLight & dark mode DOpen MenuM

Menu

  • Components
  • Typeset
  • Create
  • Changelog

Colors

  • Color Palettes
  • Palette Generator
  • Color Converter

Shaders

  • Shader Gallery
  • Shader Editor
  • Shader Docs

Mock

  • Mock Gallery
  • Mock Docs

Guides

  • Overview
  • Craft
  • Framing
  • Motion
  • Choreography
  • Kit
  • Looks
  • Backgrounds
  • Bento
  • Annotations
  • Brand marks
  • Product studies
  • Rehearse
  • Review
  • Teaching pairs
  • Verify

Scenes

  • Static card
  • Dark card
  • Hero demo
  • Payout flow
  • Changing markets
  • AI answer
  • AI with cards
  • Form validation
  • Drag to reorder
  • Chart scrub
  • Edit in a table
  • Loading to content
  • Dark hero
  • Live collaborators
  • Subscription handoff
  • Close-up
  • Many of one
  • Fade crop
  • Panel over product
  • Overlapping windows
  • Stacked cards
  • Opposite corners
  • Tilted stack
  • Corner chip
  • Monochrome
  • Row of windows
  • Window and phone
  • Invoice story
  • Calendar drag
  • Drag and drop
  • Card expansion
  • Dynamic Island
  • Messages
  • Cursor kinds
  • Cursor morph
  • Resize cursors
  • Annotations and lines
  • Feature grid
  • Technical grid
  • Consumer grid
  • Hero grid
  • Upload
  • Share
  • Swipe

Real products

  • Figma
  • Linear
  • Slack
  • Raycast
  • Finder
  • Finder · glass
  • Spotify
  • Notion
  • Google Docs
  • Gmail
  • Google Calendar
  • PowerPoint
  • Excel
  • Wikipedia
  • Telegram
  • iMessage

Comparisons

  • Comparisons

Kit

  • Backgrounds
  • Visual styles
  • Brand marks
  • Window chrome
  • Phones
  • Controls
  • Parts
  • Buttons
  • Cards
  • Kit extras
  • Glass
  1. Mock
  2. Kit

Parts

States, Check, Meter, Stream, Connector arrows, Popover and Menu, the satellite lock screen.

0.00s

Pause playback to step through single frames.

ControlsButtons