Components
Lamp Container
Animated lamp effect container with customizable gradient colors and lighting effects.
Lamp Container
The LampContainer component creates an animated lamp effect with gradient lighting, glow effects, and customizable colors. It's perfect for creating eye-catching hero sections and visual dividers.
Usage
<template>
<MLampContainer>
<motion.h1
:initial="{ opacity: 0.5, y: 100 }"
:while-in-view="{ opacity: 1, y: 0 }"
:transition="{
delay: 0.3,
duration: 0.8,
ease: 'easeInOut',
}"
class="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
>
Build lamps <br> the right way
</motion.h1>
</MLampContainer>
</template>
Props
class
string
CSS classes to apply to the container.
fromColor
string
Starting color for the left gradient.
toColor
string
Ending color for the right gradient.
centerColor
string
Color for the center glow effect.
glowColor
string
Color for the glow effect.
lineColor
string
Color for the line effect.
Examples
Basic Lamp Container
Lamp Effect
Create dramatic lighting effects with our lamp container that adds depth and atmosphere to your content
<template>
<MLampContainer>
<div class="text-center">
<h2 class="text-3xl font-bold text-white mb-4">Lamp Container</h2>
<p class="text-gray-300">Basic lamp effect with default colors</p>
</div>
</MLampContainer>
</template>
Custom Colors
Custom Lamp
Lamp effect with custom purple/pink colors
<template>
<MLampContainer
from-color="var(--color-purple-500)"
to-color="var(--color-pink-500)"
center-color="var(--color-purple-400)"
glow-color="var(--color-pink-400)"
line-color="var(--color-purple-300)"
>
<div class="text-center">
<h2 class="text-3xl font-bold text-white mb-4">Custom Lamp</h2>
<p class="text-gray-300">Lamp effect with custom purple/pink colors</p>
</div>
</MLampContainer>
</template>