TiltCard

Options

maxTilt 9

0 to 30 deg, good: 5 to 14

How far it leans at the corners. Past about 16 the text on the card starts to distort and people read it as a bug rather than a bevel.

perspective 900

200 to 3000 px, good: 600 to 1400

Perspective distance. Lower is a wider, more theatrical lens; higher flattens the lean into something closer to a skew.

scale 1.02

0.9 to 1.2, good: 1 to 1.05

Scale while the pointer is over it. 1 is no lift. Above 1.06 the card starts covering its neighbours.

sheen 0.5

0 to 1, good: 0.3 to 0.7

Strength of the light pool following the cursor. Zero switches the overlay off entirely.

sheenColor #ffffff

css colour

Colour of the sheen. On paper a warm white reads as light falling on the card. A cool white reads as glass, which is a different product.

sheenSize 0.75

0.1 to 2, good: 0.5 to 1.1

How wide the light pool is, as a fraction of the panel. Small and bright reads as a torch; wide and faint reads as a window.

ease 320

0 to 1200 ms, good: 200 to 450

How long the panel takes to follow the cursor and to settle back. Zero locks it to the pointer, which feels precise and slightly cheap.

invert false

true · false

Tip away from the cursor rather than towards it. Reads as pushing the card rather than lifting it.

reducedMotionTime 0

0 to 60 s

The single frame shown when the user prefers reduced motion. At rest there is no pointer, so this draws the panel flat and unmodified, which is the right answer.

What it needs

Dependencies

None at all

Browser

No WebGL

Frame budget

~0.2 ms · 0 context

Pinned to

v0.6.2

• No canvas and no WebGL. One CSS transform and one radial gradient
• The easing is a CSS transition rather than a per-frame spring, so nothing integrates and renderAtTime stays pure
• The sheen uses mix-blend-mode: soft-light, which is unsupported below Safari 15.4 and simply does not paint there
• Composited transform and opacity only
• The gradient string is rebuilt each frame; the paint is cheap, the string is cheaper