Design inspiration curated from X
CSS card parallax with pointermove + custom props <div class=ring s... - jhey ʕ•ᴥ•ʔ
Published by jhey ʕ•ᴥ•ʔ on November 9, 2025.
Design notes
CSS card parallax with pointermove + custom props <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion check it
This entry is part of MotionVault's curated archive of interface, product, brand, website, and motion design references from public creators on X.
Image rights and licensing remain with jhey ʕ•ᴥ•ʔ; use the original X post for source and licensing inquiries.
Deep Clone · React 19 + Framer Motion
Interactive Sandbox & Production Code
Reverse-engineered 1:1 component with spring physics, accessible keyboard controls, and modular Tailwind CSS.
Reference details
- Creator
- jhey ʕ•ᴥ•ʔ
- X handle
- @jh3yy
- Published
- November 9, 2025
- Media
- 1 visual reference
- Views
- 46,522
- Likes
- 1,060
- Bookmarks
- 639