Element: #386 Card tilt with glare (motion/hero-ambient) What it shows: A payment card that leans up to 10 degrees toward the pointer on a spring while a soft glare slides across its surface. When to use: Product cards, pricing tiers, credit cards and badges that should feel like physical objects on hover. Spec: - `const MAX = 10`: the card leans at most 10 degrees (`ry.target = nx * MAX`, `rx.target = -ny * MAX`) - Two springs: `new Spring(0, { stiffness: 0.12, damping: 0.55 })` for `rx` and for `ry` - `transform: rotateX(var(--rx)) rotateY(var(--ry))` inside a `perspective: 700px` parent; the glare is `radial-gradient(circle at var(--gx) var(--gy), rgb(255 255 255 / 0.38), transparent 55%)` - Disabled on touch: `matchMedia('(hover: hover) and (pointer: fine)')` sets `fine`, and `@media (hover: none), (pointer: coarse)` removes the transform - Autoplay sweeps `sweep` every `loop={1500}`; under reduced motion the card is flat (`--rx:{m.reduced || !fine ? 0 : rx.current}deg`) Motion: - transform: rotateX, rotateY; glare position: spring spring spring { stiffness: 0.12, damping: 0.55 } Names: Card tilt with glare | 3D tilt | Tilt card | Parallax tilt | Card inclinado com brilho | Tilt 3D com reflexo | Tarjeta inclinada con brillo Tags: motion, tilt, glare, card, pointer, spring, 3d Needs: @codeatlasdev/ui@4.6.0 Components: MotionStage Live demo: https://ui.codeatlas.com.br/docs/motion/hero-ambient#card-tilt-with-glare {#snippet children(m)} {/snippet}