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.
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
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
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
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
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
Hamim Reza
