motion-tilt

3D perspective tilt that follows the cursor. Springs back on leave with a glossy specular highlight and dynamic shadow.

Preview

Tilt me

Move cursor within

Import

import 'motion-components/motion-tilt'   // just this one
import 'motion-components'               // or the whole library

Usage

<motion-tilt max="15" gloss>
  <div class="card">
    <p class="card-label">Tilt me</p>
    <p class="card-sub">Move cursor within</p>
  </div>
</motion-tilt>

<style>
  .card {
    background: linear-gradient(135deg, #f0f0f8 0%, #ffffff 100%);
    border: 1px solid #dddde8;
    border-radius: 16px;
    padding: 2.5rem 3.5rem;
    text-align: center;
    cursor: default;
  }
  .card-label { font-weight: 700; font-size: 1rem; }
  .card-sub { font-size: 0.82rem; color: #60608a; }
</style>

Properties

Attribute	Property	Type	Default	Description
max	max	number	15	Maximum tilt angle in degrees
scale	scale	number	1.04	Scale factor applied on hover
duration	duration	number	0.5	Spring duration of the tilt and settle, in seconds
bounce	bounce	number	0.2	Spring bounciness of the tilt and settle (0 = no overshoot)
gloss	gloss	boolean	false	Show specular gloss highlight tracking the cursor
disabled	disabled	boolean	false	Ignore pointer input and settle to the rest state

Accessibility

Respects prefers-reduced-motion: when enabled, the tilt effect and gloss overlay are disabled and the element renders flat.