Components
Glare Card
Interactive card with dynamic glare effects that respond to mouse movement.
Glare Card
The Glare Card component creates an interactive card with dynamic glare effects that respond to mouse movement. As you move your cursor over the card, a realistic light reflection effect follows your movement, creating an engaging 3D-like experience.
Usage
Glare Effect
Move your cursor over the card to see the dynamic glare effect in action.
<template>
<MGlareCard>
<div class="flex flex-col items-center justify-center h-full space-y-4">
<div class="bg-gradient-to-r from-blue-500 to-purple-500 p-3 rounded-full">
<UIcon name="i-heroicons-sparkles" class="w-8 h-8 text-white" />
</div>
<h3 class="text-2xl font-bold text-white">Glare Effect</h3>
<p class="text-slate-400 text-center">
Move your cursor over the card to see the dynamic glare effect in action.
</p>
<UButton color="primary" @click="handleClick">
Try It
</UButton>
</div>
</MGlareCard>
</template>
<script setup>
const handleClick = () => {
alert('Glare effect is working!')
}
</script>
Props
class
string
CSS classes to apply to the card.
ui
object
UI configuration for the underlying UCard component.
glareColor
string
Primary glare color at the center of the effect.
glareColorInner
string
Inner glare color between the center and outer edge.
glareColorOuter
string
Outer glare color at the edge of the effect.
rainbowColors
string[]
Colors for the rainbow pattern effect.
Examples
Custom Styling
Creative Idea
This card uses custom styling with a purple gradient border and rounded corners.
<template>
<MGlareCard
class="w-80 h-96 rounded-2xl border-2 border-purple-500/30"
glare-color="rgba(192,132,252,0.8)"
glare-color-inner="rgba(192,132,252,0.65)"
glare-color-outer="rgba(192,132,252,0)"
>
<div class="flex flex-col items-center justify-center h-full space-y-6 p-6">
<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-3 rounded-full">
<UIcon name="i-heroicons-light-bulb" class="w-8 h-8 text-white" />
</div>
<div>
<h3 class="text-2xl font-bold text-white text-center">Creative Idea</h3>
<p class="text-purple-300 text-center mt-2">
This card uses custom styling with a purple gradient border and rounded corners.
</p>
</div>
<UButton
color="purple"
variant="outline"
class="mt-4"
@click="handleClick"
>
Try It Out
</UButton>
</div>
</MGlareCard>
</template>
<script setup>
const handleClick = () => {
alert('Glare effect is working!')
}
</script>
Social Media Post Card
Sarah Williams
Posted 2 hours ago
Exploring New Design Trends
Just discovered some amazing design trends for 2023. The use of glass morphism and 3D elements is really pushing the boundaries of what's possible in modern UI design.
Design Insight
"The key to great design is understanding how light and shadow interact with surfaces."
✨ 24 reactions💬 8 comments
<template>
<MGlareCard
class="w-96 h-80"
glare-color="rgba(59,130,246,0.8)"
glare-color-inner="rgba(59,130,246,0.65)"
glare-color-outer="rgba(59,130,246,0)"
>
<template #header>
<div class="flex items-center justify-between p-4">
<div class="flex items-center space-x-3">
<UAvatar
src="https://picsum.photos/200/200?random=1"
size="md"
alt="Author"
/>
<div>
<p class="font-semibold text-white">Sarah Williams</p>
<p class="text-xs text-slate-400">Posted 2 hours ago</p>
</div>
</div>
<UButton
icon="i-heroicons-ellipsis-horizontal"
color="neutral"
variant="ghost"
size="xs"
/>
</div>
</template>
<div class="p-4">
<h3 class="text-xl font-bold text-white mb-2">Exploring New Design Trends</h3>
<p class="text-slate-400 mb-4">
Just discovered some amazing design trends for 2023. The use of glass morphism and 3D elements
is really pushing the boundaries of what's possible in modern UI design.
</p>
<div class="bg-gray-800 rounded-xl p-4 mb-4">
<div class="flex items-center space-x-2 mb-2">
<UIcon name="i-heroicons-light-bulb" class="w-5 h-5 text-yellow-400" />
<span class="text-sm font-medium text-white">Design Insight</span>
</div>
<p class="text-sm text-slate-300">
"The key to great design is understanding how light and shadow interact with surfaces."
</p>
</div>
<div class="flex justify-between text-sm text-slate-400">
<span>✨ 24 reactions</span>
<span>💬 8 comments</span>
</div>
</div>
<template #footer>
<div class="flex justify-between p-4 border-t border-slate-700/50">
<UButton
icon="i-heroicons-heart"
color="neutral"
variant="ghost"
size="sm"
class="flex-1 mr-1"
>
Like
</UButton>
<UButton
icon="i-heroicons-chat-bubble-left-right"
color="neutral"
variant="ghost"
size="sm"
class="flex-1 mx-1"
>
Comment
</UButton>
<UButton
icon="i-heroicons-arrow-up-tray"
color="neutral"
variant="ghost"
size="sm"
class="flex-1 ml-1"
>
Share
</UButton>
</div>
</template>
</MGlareCard>
</template>
Custom Background Effects
Custom Rainbow Effect
Custom rainbow colors with red glare
Default Rainbow
Default rainbow effect with blue glare
<template>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Glare Card with custom rainbow colors -->
<MGlareCard
class="h-64"
glare-color="rgba(239,68,68,0.8)"
glare-color-inner="rgba(239,68,68,0.65)"
glare-color-outer="rgba(239,68,68,0)"
:rainbow-colors="['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899']"
>
<div class="flex flex-col items-center justify-center h-full space-y-4">
<h3 class="text-xl font-bold text-white">Custom Rainbow Effect</h3>
<p class="text-slate-400 text-center">
Custom rainbow colors with red glare
</p>
</div>
</MGlareCard>
<!-- Glare Card with default rainbow -->
<MGlareCard
class="h-64"
glare-color="rgba(59,130,246,0.8)"
glare-color-inner="rgba(59,130,246,0.65)"
glare-color-outer="rgba(59,130,246,0)"
>
<div class="flex flex-col items-center justify-center h-full space-y-4">
<h3 class="text-xl font-bold text-white">Default Rainbow</h3>
<p class="text-slate-400 text-center">
Default rainbow effect with blue glare
</p>
</div>
</MGlareCard>
</div>
</template>