Lamp Section Header
- Source
- Aceternity UI ↗
- Author
- Aceternity UI
- Licence
- Aceternity UI licence (free component)
Loading…
Twin conic beams widen into a cyan lamp glow above the heading as it rises into view.
Code
"use client";
import React from "react";
import { motion } from "motion/react";
import { LampContainer } from "@/lab/aceternity/ui/lamp";
import { ZoomFit } from "./_g1-zoom-fit";
export default function LampDemo() {
return (
<ZoomFit width={1100} height={760} className="bg-slate-950">
<LampContainer>
<motion.h1
initial={{ opacity: 0.5, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
delay: 0.3,
duration: 0.8,
ease: "easeInOut",
}}
className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-7xl font-medium tracking-tight text-transparent"
>
Build lamps <br /> the right way
</motion.h1>
</LampContainer>
</ZoomFit>
);
}
Prompt
Build "Lamp Section Header", a background animation. What it does: Twin conic beams widen into a cyan lamp glow above the heading as it rises into view. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS, using motion. Technique: the Motion library. It sits on a dark background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://ui.aceternity.com/components/lamp-effect (Aceternity UI, Aceternity UI licence (free component)).