Components
Wobble Card
Card with a wobble effect that responds to cursor movement.
Wobble Card
The WobbleCard component creates a card with a wobble effect that responds to cursor movement. It's perfect for creating interactive cards with fluid, organic animations.
Usage
<template>
<MWobbleCard>
<template #header>
<h3 class="text-xl font-bold">Wobble Card</h3>
</template>
<p>Move your cursor over this card to see the wobble effect.</p>
</MWobbleCard>
</template>
Props
containerClass
string
CSS classes to apply to the card container.
class
string
CSS classes to apply to the card content.
ui
object
UI configuration for the underlying UCard component.
Examples
Basic Wobble Card
Interactive Features
Experience our unique interactive components with engaging effects
Experience blazing performance with our optimized solution that delivers results instantly.
Stunning animations and visual effects that captivate your audience and enhance engagement.
Simple to implement with clean documentation and well-structured APIs for quick adoption.
<template>
<MWobbleCard>
<template #header>
<h3 class="text-lg font-semibold">Basic Wobble</h3>
</template>
<p>This card has a basic wobble effect.</p>
</MWobbleCard>
</template>
With Custom Container Class
This card has a custom container class.
<template>
<MWobbleCard container-class="bg-primary w-full h-full">
<template #header>
<h3 class="text-lg font-semibold">Custom Container</h3>
</template>
<p>This card has a custom container class.</p>
</MWobbleCard>
</template>
With Gradient Styling
This card has gradient styling.
<template>
<MWobbleCard container-class="bg-gradient-to-r from-purple-500 to-pink-600 w-full h-full">
<template #header>
<h3 class="text-lg font-semibold text-white">Gradient Style</h3>
</template>
<p class="text-white">This card has gradient styling.</p>
</MWobbleCard>
</template>
With Dark Theme
This card uses a dark color scheme.
<template>
<MWobbleCard container-class="bg-indigo-800 w-full h-full">
<template #header>
<h3 class="text-lg font-semibold text-white">Dark Theme</h3>
</template>
<p class="text-indigo-200">This card uses a dark color scheme.</p>
</MWobbleCard>
</template>
With Slate Background
This card uses a slate background.
<template>
<MWobbleCard container-class="bg-slate-800 w-full h-full">
<template #header>
<h3 class="text-lg font-semibold text-white">Slate Background</h3>
</template>
<p class="text-slate-300">This card uses a slate background.</p>
</MWobbleCard>
</template>