TransactionCard

Animated card insert ATM hover effect

An animated credit card insertion micro-interaction. On hover the container shrinks, the card slides up, rotates 90° into the ATM terminal slot, and a dollar sign fades in on the screen. Built for payment interfaces, checkout flows, banking dashboards, and fintech UI elements that need a delightful interactive touch. Features Choreographed hover animation sequence Container shrinks from 460px to 220px on hover with 1.03x scale Card slides up 70px and rotates 90° simulating card insertion ATM terminal slides up to receive the card Dollar sign fades in after 1 second delay Right side background shifts to light gray on hover Customizable transaction label text 11 independently customizable color controls Full typography controls — size, weight, letter spacing, line height GPU-accelerated CSS transform animations No dependencies Animation Timing Container shrink — 0.3s ease-in-out Card slide and rotate — 1.2s cubic-bezier easing Terminal slide — 1.0s cubic-bezier easing Dollar sign fade — 0.3s with 1s delay Property Controls Content — transaction label text Colors Background · Left side · Text color · Arrow color Card color · Card magnetic stripe · Card chip buttons Terminal body · Screen color · Dollar sign color Typography — font family, size, weight, letter spacing, line height Technical Details React useState for hover state tracking CSS style tag animations for GPU-accelerated performance Transform properties — translate and rotate for card and terminal Minimal re-renders — only on hover state change Fixed 460px default width · 220px hover width · 120px height Use Cases Payment interfaces · Checkout buttons · Banking dashboards · Transaction history items · Wallet app UI · E-commerce checkout flows · Fintech micro-interactions · Financial app prototypes SEO Keywords framer transaction card · framer payment animation · framer card animation · framer fintech component · framer hover animation · framer payment UI · framer card insert · framer micro interaction · framer banking component · framer checkout UI · framer animated button · framer payment component · framer interactive card · framer code component · framer finance UI

Animated card insert ATM hover effect