A directional gradient-based background component that creates a spotlight or lamp effect from specified edges. Perfect for adding focused lighting effects to your layouts with directional conic gradients and customizable beam angles.
1"use client";
2
3import LampBackground from '@/components/component-x/lamp-background';
4
5export function LampBackgroundPreview() {
6return (
7 <div className="relative w-full h-full overflow-hidden border flex items-center justify-center">
8 <LampBackground
9 position="top"
10 angleSpan="medium"
11 colorOne="hsl(var(--primary)/0.6)"
12 colorTwo="transparent"
13 />
14 <h3 className="text-2xl text-foreground">Lamp Background</h3>
15 </div>
16);
17}
18Run the following command to add the component:
npx cx add lamp-background1"use client";
2
3import LampBackground, {
4type LampBackgroundPosition,
5} from "@/components/component-x/lamp-background";
6
7export function LampBackgroundPositions() {
8const positions: LampBackgroundPosition[] = [
9 "top",
10 "right",
11 "bottom",
12 "left",
13];
14
15return (
16 <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
17 {positions.map((pos) => (
18 <div
19 key={pos}
20 className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center"
21 >
22 <LampBackground
23 position={pos}
24 angleSpan="medium"
25 colorOne="hsl(var(--primary)/0.6)"
26 colorTwo="transparent"
27 />
28 <div className="relative z-10 flex items-center justify-center h-full">
29 <h3 className="text-2xl text-foreground capitalize">{pos}</h3>
30 </div>
31 </div>
32 ))}
33 </div>
34);
35}
36Control the spread and focus of the lamp beam with different angle span settings.
60° beam angle
80° beam angle
100° beam angle
1"use client";
2
3import LampBackground, {
4type LampAngleSpan,
5} from "@/components/component-x/lamp-background";
6
7export function LampBackgroundAngleSpan() {
8const angleSpans: LampAngleSpan[] = ["small", "medium", "large"];
9
10return (
11 <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
12 {angleSpans.map((span) => (
13 <div
14 key={span}
15 className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center"
16 >
17 <LampBackground
18 position="top"
19 angleSpan={span}
20 colorOne="hsl(var(--primary)/0.6)"
21 colorTwo="transparent"
22 />
23 <div className="relative z-10 flex flex-col items-center justify-center h-full">
24 <h3 className="text-2xl text-foreground capitalize">{span}</h3>
25 <p className="text-sm text-muted-foreground mt-[1px]">
26 {span === "small" && "60° beam angle"}
27 {span === "medium" && "80° beam angle"}
28 {span === "large" && "100° beam angle"}
29 </p>
30 </div>
31 </div>
32 ))}
33 </div>
34);
35}
36