Framer Motion Components

Production-ready Framer Motion components for React — springy toggles, hover reveals, layout transitions and micro-interactions with tuned easing. Copy the source, keep the physics.

ASCII Animations

All 18 motion animations components

  • Card Animation — Framer Motion card animation.
  • Logo Animation — Logo animation with Framer Motion and custom background.
  • Image Hover Animation — An image hover animation with scaling and opacity effects.
  • Tab Background Animation — A tab background animation using Framer Motion.
  • Success Ripple Animation — A looping success ripple animation with expanding rings and a checkmark draw.
  • Orbit Dot Motion — A 3D orbiting dot animation with perspective and rotateY motion.
  • Coin Spin Animation — A 3D spinning coin animation with layered faces and side depth.
  • Car Lock Drive Motion — Side-view car with a clean lock/drive pill switch that springs the car forward on drive.
  • Dial Knob Motion — Tactile rotary knob with layered bevel discs, two tick rings, and an amber dot-arc indicator. Drag or scroll to change value.
  • Free Premium Toggle — Free Premium Toggle component.
  • Milestone Odometer — Milestone Odometer component.
  • Text Editor Italic — Soft cream "Text Editor" mock with a neumorphic toolbar. The cursor drifts
  • Yoga Invite Card — Soft cream invite card with clean subtle micro-animations on mount —
  • Color Flair Button — A pill button with a directional color flair: stacked concentric circles bloom from
  • Inertia Arrow Card — A notched card with a magnetic pill button: the pill flings with GSAP inertia in the
  • Hover Expand Player — A compact player pill that springs open on hover — the corners morph, the album art grows into place, and the full controls resolve out of blur.
  • Fisheye Faq — A vertical FAQ list with macOS-Dock fisheye magnification — rows scale by their distance from the cursor and the nearest one springs open, its answer resolving out of blur.
  • Cd Envelope Player — A CD slides out of a paper sleeve and spins up into a now-playing card — grooved disc, moving sheen and a play/pause that eases the spin in and out.