Skip to content
PasteMotion

325 production-ready animations

The fastest way to get a polished animation into any codebase. Live previews, a customiser, and copy-paste code in every format, with full credit to every creator.

Browse animations ↓See the originals
Orbit Loader
Cube 3D Loader
Spinning Gradient Border Card
Stagger Grid Ripple
Bounce Animation Gradient Button
Morphing Gradient Blob
Stacking Toasts
3D Purple Card
Glitch Heading

Find it by what it does

Loaders

90

Spinners, bars and pulses for loading states.

Buttons

74

Buttons with hover, press and attention animations.

Hover effects

2

Underlines, tilts, glows and reveals on hover.

Text effects

4

Typewriters, shimmers, glitches and gradient type.

Scroll reveals

2

Elements that animate in as they scroll into view.

Page transitions

2

Wipes, fades and morphs between views.

Backgrounds

7

Animated gradients, patterns and ambient motion.

Cards

46

Cards that flip, lift, tilt and glow.

Toggles

47

Switches, checkboxes and radios with satisfying motion.

Inputs

30

Text fields and forms with animated focus states.

Tooltips

19

Tooltips and notifications that pop, slide and fade.

Cursors

2

Custom cursors, trails and magnetic effects.

Original collection

Written from scratch in CSS, Anime.js and Motion

All originals →

How it works

  1. 1

    Preview & customise

    Every animation runs live in a sandbox. Tweak its colours and speed and watch it change.

  2. 2

    Copy any format

    HTML, CSS and JS, one all-in-one file, a React component, or Tailwind, all with your tweaks applied.

  3. 3

    Paste & ship

    Scoped classes, reduced-motion fallbacks and GPU-friendly badges mean it behaves in production.

Popular right now

Browse all 325 with filters →
See all 325 animations