Tilt card
A card leans toward the pointer in 3D, with a soft glare.
- enhancer
- card
- hover
- 3d
- pointer
- since 0.1
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Tilt card example
Tilt
The card leans toward the pointer.
Tilt
The card leans toward the pointer.
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<div class="demo-card" data-motion="tilt">
<h4>Tilt</h4>
<p>The card leans toward the pointer.</p>
</div>import { Tilt } from "./motion/react/Tilt";
<Tilt>Your content</Tilt><script setup lang="ts">
import Tilt from "./motion/vue/Tilt.vue";
</script>
<template>
<Tilt>Your content</Tilt>
</template>const el = document.querySelector("#title");
el.dataset.motion = "tilt";The wrappers: Tilt.tsx (React, TypeScript) and Tilt.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-max | 8 | the largest lean, in degrees |
data-motion-scale | 1.02 | how much it grows while leaning |
data-motion-perspective | 900 | perspective distance in pixels |
data-motion-glare | true | a soft glare that follows the lean |
Accessibility
A short eased loop runs only while the card moves toward its target, then stops. Off for touch and under reduced motion. The script owns the element's transform: put it on a wrapper if the card has its own.
Size
tilt.js is 1.0 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.