Three.js 3D Metal Credit Card with Brushed Titanium
Overview
A 3D brushed titanium member card for React and Next.js, built with Three.js. It tilts toward the cursor with inertia, idles slowly by itself, and turns over on click, Enter or Space to show a chip and signature panel.
The card is a rounded slab with a flat chamfer, extruded in Three.js. Its faces use MeshPhysicalMaterial with anisotropy, so a generated brushed texture stretches the reflections into the long vertical streaks that real brushed metal shows. Nothing is loaded: the scratches, the normal map for the embossed type, the chip and even the small photo studio it reflects are all generated when the page opens. The type uses your page's own font.
Details
- Category
- Cards
- Interaction
- Mouse Move + On Click
- Trigger
- Mouse Move
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 090 / Scroll
Three.js Exploded Watch Scroll Animation with Real Time Hands
On Scroll · Mouse Move
No. 052 / Gallery
Three.js 3D Gallery Corridor with Scroll Walkthrough
On Scroll · Mouse Move
No. 041 / Cards
GSAP 3D Tilt Card Hover Effect
Mouse Move · On Hover
(02)FAQ
Three.js 3D Metal Credit Card with Brushed Titanium — FAQ
01How do I change what the card says?
Pass house, tier, name, number, since and note as props. The type on the card is drawn with the font computed on the section, so setting a font-family on it or on a parent changes the card too.
02How do I size it?
Pass a width in cardClassName. The default is w-[min(84vw,38rem)]. The 3D camera fits itself to that box, so it also follows any layout you put it in, and the section's own height comes from className.
03What does it need from my page?
npm install three, and Tailwind CSS v4. It doesn't need GSAP. It imports toCreasedNormals from three/examples/jsm, which comes with the three package.
04What happens with no WebGL or with reduced motion?
With no WebGL, or when the browser would draw WebGL on the CPU, you get a flat CSS version of the card that still turns over. With reduced motion, the 3D card is drawn once at rest with no loop, and pressing it swaps faces straight away.
05Does it use any real card brand?
No. The house name, number, chip layout and signature in the demo are invented, and there is no card network mark.