Tilt

A card component that tilts in 3D space when hovered over, creating a dynamic visual effect. Use it to add interactivity to cards, buttons, or other UI elements.

byJulien Thibeaut from Motion Primitives

Installation

terminal

pnpm dlx layro-cli add @ibelick/tilt

npx layro-cli add @ibelick/tilt

npx layro-cli add @ibelick/tilt

bunx layro-cli add @ibelick/tilt

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import React, { useRef } from 'react';
import {
  motion,
  useMotionTemplate,
  useMotionValue,
  useSpring,
  useTransform,
  MotionStyle,
  SpringOptions,
} from 'motion/react';

export type TiltProps = {