component
Feature Card Animate
By shirajus salekin shafi
Details
- shirajus salekin shafiAuthor
- componentType
- 2026-05-12Published
- 2026-05-12Updated
- 2026-04-30Added
- CardsCategories
Summary
Interactive feature card 3D mouse tilt
Description
Features 3D mouse-tracking tilt with perspective rotation on hover Magnetic icons follow the cursor with distance-based falloff Continuous conic-gradient orbit ring rotating behind the icons Spring-eased hover scale on each icon (cubic-bezier overshoot) Five swappable icon slots — drop in any logo or image Bundled default brand icons (fallback when slots are empty) Radial mask fade gracefully reveals the icon stage Five-circle composition with sm / md / lg / md / sm size cadence Hover state with enhanced inset glow and lifted drop shadow Tilt, magnetic, and orbit each individually toggleable All animation strengths, radii, and speeds fully tunable Transform-only animations — no layout shifts Responsive — desktop, tablet, mobile down to 320px No dependencies Property Controls Content Title — main heading text below the card Description — supporting subtext Icons Icon 1 (small) · Icon 2 (medium) · Icon 3 (large) · Icon 4 (medium) · Icon 5 (small) Each accepts a responsive image · falls back to the bundled brand SVG when empty Tilt 3D Tilt — toggle perspective rotation Tilt Amount (0–20) — peak rotation in degrees
Introduction
Interactive feature card 3D mouse tilt
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #4072