https://framer.com/m/TiltCard-1-pYTmAW.js
Io / Enhancements / TiltCard
TiltCard
TiltCard leans whatever layer you put inside it towards the pointer, with an optional glare travelling across the surface as it turns.
Examples
Live specimens for every control the component exposes.
Setup
The card’s content is a layer slot, filled by dragging your own frame into it on the canvas. That cannot be done from outside the editor, so the specimen here is deliberately empty rather than showing a stand-in card. Once filled, the controls below govern how it moves.
Tilt
tiltFactor is how far the card leans, perspective how deep the scene is behind it, hoverScale whether it also grows as it turns.
tilt 5
tilt 25
scale 1.1
Glare
The glare is a band of light crossing the surface as the card turns. Intensity, position and size are separate, and it can be switched off entirely.
glare off
soft glare
wide glare
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for TiltCard
A card should answer the pointer with a physical lean.
The content is a designed layer, not just an image.
A glare would sell the surface as glass or foil.
The card is large enough that a lean reads as depth rather than jitter.
Reach for something else
There is no pointer, as on touch — the tilt never fires.
The whole section should move, not just the layer under the pointer.
The card needs to react to scroll instead.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.