Lamp

1"use client";
2 
3import { motion, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type LampProps = React.HTMLAttributes<HTMLDivElement> & {
7  /** Accent color of the light. Accepts any CSS color. */
8  color?: string;
9};
10 
11const VIEWPORT = { once: true, margin: "-20%" } as const;
12 
13const Lamp = React.forwardRef<HTMLDivElement, LampProps>(
14  ({ color = "var(--primary)", className, children, style, ...props }, ref) => {
15    const reduceMotion = useReducedMotion();
16    const lit = { scaleX: 1, opacity: 1 };
17    const unlit = { scaleX: 0.5, opacity: 0 };
18 
19    return (
20      <div
21        ref={ref}
22        data-slot="lamp"
23        className={`relative isolate flex min-h-[24rem] w-full flex-col items-center justify-start overflow-hidden rounded-2xl bg-card ${className ?? ""}`}
24        style={{ ["--lamp" as string]: color, ...style }}
25        {...props}
26      >
27        <div className="relative flex h-56 w-full scale-y-125 items-center justify-center">
28          {/* Right cone of the lamp, mirrored from the left. */}
29          <motion.div
30            initial={reduceMotion ? lit : unlit}
31            whileInView={lit}
32            viewport={VIEWPORT}
33            transition={{ duration: 0.8, ease: "easeInOut" }}
34            className="absolute right-1/2 h-56 w-3/5 origin-right [background-image:conic-gradient(from_70deg_at_center_top,color-mix(in_oklch,var(--lamp)_60%,transparent),transparent,transparent)] [mask-image:linear-gradient(to_top,transparent,white)]"
35          />
36          <motion.div
37            initial={reduceMotion ? lit : unlit}
38            whileInView={lit}
39            viewport={VIEWPORT}
40            transition={{ duration: 0.8, ease: "easeInOut" }}
41            className="absolute left-1/2 h-56 w-3/5 origin-left [background-image:conic-gradient(from_290deg_at_center_top,transparent,transparent,color-mix(in_oklch,var(--lamp)_60%,transparent))] [mask-image:linear-gradient(to_top,transparent,white)]"
42          />
43          {/* Glowing bar where the two cones meet. */}
44          <motion.div
45            initial={
46              reduceMotion
47                ? { scaleX: 1, opacity: 1 }
48                : { scaleX: 0.5, opacity: 0 }
49            }
50            whileInView={{ scaleX: 1, opacity: 1 }}
51            viewport={VIEWPORT}
52            transition={{ duration: 0.8, ease: "easeInOut" }}
53            className="absolute top-1/2 z-raised h-0.5 w-1/2 -translate-y-[3.5rem] rounded-full blur-sm [background:var(--lamp)]"
54          />
55// … truncated