Card Drift

Overview

Card Drift gives a set of cards a slow, low-amplitude drift so a proof grid or feature row feels alive without asking for attention.

Use Card Drift on testimonial walls, logo or feature grids, and portfolio tiles where a hint of independent motion adds life to otherwise static cards. The drift should earn its place through state clarity, semantics, and task usefulness, not decoration.

In production, the risk is distraction. The drift has to stay subtle, pause when the section is offscreen or motion is reduced, and never pull focus from the card content or its links, and every state change should remain clear under keyboard, mobile, and reduced-motion conditions.

Install

Usage

Component Code

Example Production Use Case

A SaaS landing page can use Card Drift on a row of customer-proof cards so the section feels considered rather than static, while every logo, quote, and link stays readable and clickable.

Best Used For

• Proof and testimonial grids where gentle motion makes a static section feel intentional.
• Feature or logo rows that would otherwise sit flat, where drift adds life without hiding content.
• Portfolio and case-study tiles where subtle independent movement signals craft on the first screen.

Not For

Not for pricing, comparison, or dense reading sections where cards need to stay perfectly still for scanning.

Performance Budget

Keep drift slow and low-amplitude, pause offscreen, animate transform only, and avoid per-card effects that repaint the full grid.

Accessibility and Mobile

Do not move focused cards unpredictably. On mobile and reduced motion, freeze the cards or use a static grid.

Common Mistakes

• Letting decorative drift pull attention away from the proof copy.
• Animating cards while a keyboard user is focused inside them.
• Using drift to compensate for weak card content.