Components
Tilt
Component that creates a 3D tilt effect based on cursor movement.
Tilt
The Tilt component creates a 3D tilt effect based on cursor movement. It's perfect for creating interactive cards and elements that respond to cursor proximity with realistic 3D transformations.
Usage
TEAL GRADIENT
Theme-Aligned Tilt
This card uses theme-consistent teal colors with a subtle tilt effect.
<template>
<MTilt>
<div class="p-6 bg-primary rounded-lg shadow-lg">
<h3 class="text-xl font-bold mb-2">Tilt Card</h3>
<p class="text-gray-600 dark:text-gray-400">Move your cursor over this card to see the tilt effect.</p>
</div>
</MTilt>
</template>
Props
rotationFactor
number
Rotation factor for tilt effect.
isReverse
boolean
Reverse tilt direction.
springOptions
SpringOptions
Spring animation options.
className
string
CSS classes to apply to the container.
style
object
CSS styles to apply to the container.
Slots
default
Tilted content.
Examples
Basic Tilt
Interactive Cards
Experience our 3D tilt effects that respond to your cursor movements
Lightning Fast
Experience blazing performance with our optimized solution
Beautiful Effects
Stunning animations that captivate your audience
Easy Integration
Simple to implement with clean documentation
<template>
<MTilt>
<div class="p-6 bg-secondary rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-2">Basic Tilt</h3>
<p class="text-gray-600 dark:text-gray-400">This card has a basic tilt effect.</p>
</div>
</MTilt>
</template>
With Custom Rotation Factor
High Rotation
This card has a more pronounced tilt effect.
<template>
<MTilt :rotation-factor="25">
<div class="p-6 bg-tertiary rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-2">High Rotation</h3>
<p class="text-gray-600 dark:text-gray-400">This card has a more pronounced tilt effect.</p>
</div>
</MTilt>
</template>
With Reverse Direction
Reverse Tilt
This card tilts in the opposite direction.
<template>
<MTilt :rotation-factor="20" :is-reverse="true">
<div class="p-6 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-2">Reverse Tilt</h3>
<p>This card tilts in the opposite direction.</p>
</div>
</MTilt>
</template>
With Custom Spring Options
Custom Spring
This card has custom spring animation properties.
<template>
<MTilt :rotation-factor="15" :spring-options="{ stiffness: 200, damping: 15 }">
<div class="p-6 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-2">Custom Spring</h3>
<p>This card has custom spring animation properties.</p>
</div>
</MTilt>
</template>
Manual Control
Manual Tilt
Click the button to reset the tilt effect
<template>
<div class="space-y-4">
<div class="flex space-x-2">
<UButton @click="tiltEnabled = !tiltEnabled">
{{ tiltEnabled ? 'Disable' : 'Enable' }} Tilt
</UButton>
</div>
<MTilt v-model:enabled="tiltEnabled">
<div class="p-6 bg-primary rounded-lg shadow-lg">
<h3 class="text-xl font-bold mb-2">Manual Control</h3>
<p class="text-gray-600 dark:text-gray-400">Tilt effect can be toggled on/off.</p>
</div>
</MTilt>
</div>
</template>
<script setup>
import { ref } from 'vue'
const tiltEnabled = ref(true)
</script>