---
name: "60fps"
slug: sixty-fps
url: "https://dontmakeitugly.com/resources/sixty-fps"
website: "https://60fps.design"
type: gallery
categories:
  - motion
  - inspiration
tags:
  - animation
  - microinteractions
  - transitions
  - mobile
  - gallery
  - gestures
  - spring
  - storyboards
pricing: free
agentFriendly: limited
agentAccessMethods:
  - public_web
difficulty: any
dateAdded: "2026-09-03"
lastVerified: "2026-09-03"
---

# 60fps

Two thousand animation details from best-in-class apps, filtered by interaction.

- Type: Gallery
- Categories: Motion, Inspiration
- Pricing: Free

## What it is

60fps is a collection of short clips showing how well-made mobile and web apps handle motion: taps, swipes, scroll effects, transitions, spring physics, morphing and about a hundred other filters. At the time of listing it holds around 2,050 shots from 477 apps, with side sections for motion guides, code snippets, a glossary and storyboards. Updated weekly with a newsletter.

## Why it's here

Most motion references show you a finished effect. This one lets you filter by the interaction you're actually building, which is what you need when the question is "how should this sheet open?" rather than "what's a nice animation?". Pair a clip with a library from the Motion category and your agent has both the target and the tool.

## Best for

- microinteraction references
- transition patterns
- mobile app motion

## Links

- Website: https://60fps.design

## Can my agent use this?

Mostly as a reference. Describe the clip to your agent in terms of timing, easing and what moves ("the sheet springs up with slight overshoot, the backdrop fades over 200ms") and name the library to use. The code snippets section occasionally gives it something concrete to start from.

Agent friendliness: Limited. Mainly a visual reference. Great for humans and for describing a direction, but there's little an agent can read or install.
Access methods: Public website.

## Prompt to hand your agent

```text
Use 60fps as a visual and design reference for this project.

What it is: Two thousand animation details from best-in-class apps, filtered by interaction.

Website: https://60fps.design

Use it specifically for:
- microinteraction references
- transition patterns
- mobile app motion

How you can access it: Public website.

Study the visual direction: typography, spacing, colour, hierarchy and motion. Describe what makes the references work, then apply those principles to this project's existing visual language. Do not copy layouts or assets directly; build something consistent with our own brand and accessibility requirements.
```

## Related

- [Mobbin](https://dontmakeitugly.com/resources/mobbin.md): The biggest library of real app screens and user flows.
- [GSAP](https://dontmakeitugly.com/resources/gsap.md): The professional-grade animation toolkit, now free including all plugins.
- [Best Designs on X](https://dontmakeitugly.com/resources/best-designs-on-x.md): The design work worth seeing on X, collected hourly so you don't have to scroll for it.
- [Collect UI](https://dontmakeitugly.com/resources/collect-ui.md): Daily UI inspiration sorted by the exact screen you're designing.

60fps is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.