TransactionCard

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