Skip to content

component

Feature Card Animate

By shirajus salekin shafi

Details

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.

12001400140768/148/228/309/79/15
  • All · #4072