Feature Tools Card — React Component

A dark glass card with five magnetic icon slots, a rotating conic-gradient orbit ring, and 3-D tilt physics. Swap the default integration icons for any SVG or image.

Cards3dhoverspringcardiconsintegrationstilt3dmagneticorbitglassmorphism

Feature Tools Card

Connects with your stack

Drop-in integrations for the tools your team already uses. No custom connectors required.

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

title

Card heading text.

description

Supporting description below the heading.

cardBg

CSS background value for the card surface.

enableTilt

Enable 3-D perspective tilt on mouse move.

tiltStrength

Max tilt rotation in degrees.

enableMagnetic

Enable magnetic icon attraction toward cursor.

magneticStrength

Magnetic pull multiplier (0–1).

magneticRadius

Cursor distance in px at which magnetic pull begins.

Generated JSX

Copy this into your page.

<useEffect
  title="Feature Block Animated Card"
  description="A card that showcases a set of tools your platform connects with."
  cardBg="rgba(40,40,40,0.70)"
  enableTilt={true}
  tiltStrength={8}
  enableMagnetic={true}
  magneticStrength={0.4}
  magneticRadius={120}
/>

Animation effects

3dhoverspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Feature Tools Card

The Feature Tools Card is a dark glass bento card with five integration icon slots arranged in a symmetric sm–md–lg–md–sm pyramid, a conic-gradient orbit ring that rotates continuously, and 3-D tilt and magnetic icon effects driven by cursor position — all with zero animation library dependencies. Move the mouse over the card to feel the tilt physics; hover near any icon to watch it magnetically follow the cursor. Icons default to GitHub, Notion, Gmail, Slack, and Google Drive but accept any React node, so product-specific SVGs or `<img>` tags slot straight in. Use it in integration and features sections to communicate that your platform connects with the tools your visitors already use.

Common use cases

Integration and partner showcase sections
SaaS feature sections highlighting connected tools
Platform capability bento grids
Product landing page feature cards

Installation