Overview
A studio for perspective tilt cards. Six visual themes from glass to brutalist combine with a live tilt engine: in interactive mode the card rotates up to 22 degrees toward your cursor with a glare highlight that follows it, in manual mode you set the rotation, scale and perspective yourself. Exports cover pure CSS, vanilla JS, a React hook, Tailwind and Framer Motion.
How It Works
Pick a theme such as glass, cyberpunk, neumorphic or rainbow-glow, and edit the card title, category, description and badge text. Choose interactive or manual mode; interactive tracks your cursor over the preview, while manual exposes sliders for rotateX, rotateY, rotateZ, scale, perspective and border radius, plus backdrop blur and glare opacity for the glass theme. Select an export format and copy the code. The preview card tilts and shines in real time throughout.
Step-by-Step Usage Guide
- Choose a theme and edit the card text and badge.
- Switch between interactive cursor tilt and manual sliders.
- Tune perspective, scale, radius, blur and glare.
- Copy the export in CSS, vanilla JS, React, Tailwind or Framer form.
Technical Specifications & Standards
The 3D setup has three cooperating parts. A wrapper carries the perspective property, and its value controls how aggressive the foreshortening looks: smaller values exaggerate depth. The card itself gets rotateX and rotateY around a transform-style: preserve-3d context, which is required for the parallax children, three layers translated to 40, 55 and 30 pixels on the Z axis so they float at different depths. In interactive mode the rotation is proportional to cursor distance from center, capped at 22 degrees per axis, with a 0.15 second ease-out transition smoothing the tracking. The glare is a radial-gradient positioned at the cursor coordinates. For the glass theme the output emits both backdrop-filter and -webkit-backdrop-filter, which older Safari still requires; caniuse notes the prefixed form was the only option there for years.
Targeted Use Cases
- Pricing and product cards that respond to the pointer.
- Team or portfolio cards with layered parallax content.
- Glassmorphism panels on gradient or mesh backgrounds.
- Generating a React tilt hook without hand-writing the math.
Notes & Gotchas
- Keep interactive tilt under about 25 degrees; steeper angles make text unreadable at the edges.
- Always pair rotateX and rotateY with perspective on a parent, or the rotation looks flat.
- Guard the effect with a prefers-reduced-motion or pointer: fine check for touch devices and motion-sensitive users.
- Use preserve-3d only when you need the Z-layered children; flattening is cheaper.
Frequently Asked Questions
Why does the tilt look flat even though the card rotates?
Rotation without perspective is an orthographic squash. The exported CSS puts perspective on a wrapper element and rotates the card inside it; keep that structure when you paste the code.
How do the floating text layers work?
The card sets transform-style: preserve-3d and its children use translateZ at 30, 40 and 55 pixels. With preserve-3d those translations place the children physically closer to the viewer, producing parallax as the card tilts.
Does the glass theme need the -webkit- prefix?
Yes for older Safari. The glass export emits both backdrop-filter and -webkit-backdrop-filter; Safari supported the unprefixed property only in later versions, so keeping both is the safe path.
What is the maximum tilt in interactive mode?
22 degrees per axis. The rotation is proportional to the cursor offset from the card center and clamped at that cap, with a 0.15 second ease-out transition smoothing the motion.