Components
LampContainer
A stylized lamp spotlight effect built with Tailwind CSS and Framer Motion. It renders animated conic‐gradient light beams, layered diffusion and blur, a pulsating core glow, and a central orb—perfect for immersive hero sections, intros, or ambient UI backdrops.
"use client";
import React from "react";
import { motion } from "framer-motion";
import LampContainer, { LampVariant } from "@/components/ui/lamp-container";
const settings = {
tone: "dark" as "dark" | "light",
variant: "split" as LampVariant,
motionEnabled: true,
beamColor1: "hsl(210, 100%, 70%)",
beamColor2: "hsl(190, 100%, 60%)",
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<LampContainer
tone={s.tone}
variant={s.variant}
motionEnabled={s.motionEnabled}
beamColors={[s.beamColor1, s.beamColor2]}
>
<motion.h1
initial={{ opacity: 0.5, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3, duration: 0.8, ease: "easeInOut" }}
className="bg-gradient-to-br from-foreground to-muted-foreground bg-clip-text py-4 text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
>
Build lamps <br /> the right way
</motion.h1>
</LampContainer>
</div>
);
}