REFERENCE
- Gallery page: https://magpui.com/en/i/tilting-security-feature-cards-1665f1
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/tilting-security-feature-cards-1665f1/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/tilting-security-feature-cards-1665f1/clip.mp4
- Original post: https://x.com/thebatukara/status/2115763764050243716 by @thebatukara
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A row of three tall feature cards for a data security product, each one a small live illustration. Left (dark): 'Find every copy.' with a scanning visual made of vertical bars and blocky tiles that glitch and shift as if a sweep is discovering files. Center (light): a hero card 'Secure data from anywhere' with a soft red-to-blue glow rising from the bottom and a dark pill CTA. Right (dark): 'Who sees what.' with a grid access map whose cells swell from thin lines into rounded squares and glow coral where the pointer is. Every card tilts in 3D toward the cursor and settles back flat when it leaves. Calm, premium, a little technical.
DESIGN SYSTEM
- Layout: three cards side by side, each about 265x440px (aspect ~3:5), 24px gap, centered on a #2B2B2E page. On mobile stack them vertically with a horizontal snap scroller.
- Card surface: radius 8px, padding 14px; dark cards #0E0E10, light card #ECEBE6; shadow 0 20px 50px rgba(0,0,0,.35).
- Top row in every card: two 9px uppercase monospace labels with 0.08em tracking at 55% opacity, left and right (e.g. 'DISCOVER' / 'SCANNING · 214 SOURCES', 'PRODUCT' / 'V4.2', 'GOVERN' / 'LIVE ACCESS MAP').
- Headlines: high-contrast serif, 22px on dark cards (white #F4F2EE), 34px two lines on the light card (#111), leading 1.0, tracking -0.02em. Body 10px neutral sans, #9A9A9F on dark, #5E5E62 on light; one key number in white medium weight.
- Light card kicker: 9px monospace uppercase in coral #F2614A above the headline. CTA: dark pill #141414, white 10px label, height 26px, padding 0 14px.
- Glow on the light card: a huge blurred ellipse from coral #FF6A4D through peach to blue #2F7BFF and deep blue #1B5CFF at the bottom edge, with a soft white haze between.
- Scan visual: a grid of 1px-wide white bars and solid tiles in white, lavender #B9A8FF, pink #F49AB0, coral #F2614A and mint #9FE3C8, with a gradient patch in the top right.
- Access map: 8x8 grid of 1px lines rgba(255,255,255,.12) with tiny dots at intersections; active cells become rounded squares (radius 30%) in #1A1A1D with a coral-to-pink radial glow #FF8A7A behind them.
MOTION
- Tilt: on pointermove over a card, rotateX/rotateY up to 8deg toward the pointer with perspective 900px, plus a 6px lift and a stronger shadow; spring stiffness 180, damping 20. On leave, return to flat in 500ms cubic-bezier(.22,1,.36,1).
- Scan card: every 120ms a few random bars toggle between thin line and full tile and shift color; a slow diagonal gradient drift across the tile block (6s loop, linear). The top-right label number ticks up occasionally.
- Light card: the glow breathes, scale 1 to 1.06 and hue shift of ~10deg over 4s, ease-in-out, infinite alternate.
- Access map: each cell's size and glow is a function of distance to the pointer (radius ~120px): line-thin at rest, swelling to a rounded square with glow near the cursor, interpolated with a 200ms lerp. Without a pointer, a soft glow blob wanders slowly across the grid (8s loop). Intersection dots twinkle in random accent colors.
SECTIONS
- Card parts: top label row, visual area (top ~60%), headline, one-line body.
- States: idle (flat, ambient loops running), hover (tilt + lift + local interaction), focus-visible (2px coral outline offset 3px, same lift as hover), pressed on the CTA (scale .97).
IMPLEMENTATION
- React + Motion for the tilt springs; the scan card and access map in a single canvas each (Canvas 2D), or CSS grids of divs if the cell count stays under ~100. The glow is pure CSS: stacked radial-gradients with filter blur(40px).
- Pause the canvas loops with IntersectionObserver when off screen, cap devicePixelRatio at 2.
- prefers-reduced-motion: no tilt, no glitching, static grid with one lit cluster, static glow.
- Cards are focusable articles with real headings and text; the visuals are aria-hidden.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map the colors above to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use placeholder copy and product names.
SUCCESS CHECK
- Moving the cursor over any card tilts it smoothly toward the pointer and it settles flat on leave.
- On the right card, the cells nearest the cursor visibly swell into rounded glowing squares while distant cells stay thin lines.
- With prefers-reduced-motion on, all three cards render as still, readable compositions.
