More Heroes Snippets

See all ->

Startup Hero

Product Hero

Gradient Mesh Hero

App Download Hero

Front-End Coding Playgrounds

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Lamp Header — Free HTML CSS JS Spotlight Hero Snippet

Lamp Header · Heroes · Plain HTML, CSS & JS · Live preview

Share & Support

What's included

Features

Conic-gradient cones
Two skewed beams angle into the center.
Masked beam falloff
A vertical mask fades the light as it falls.
Widening reveal line
A glowing filament switches on from zero width.
Rising glow pool
A blurred ellipse lights the headline area.
Choreographed entrance
Light reveals, then content arrives into it.
Lit gradient title
Top-down text gradient matches the lamp.
Radial stage vignette
Dark surround focuses the eye center.
One-accent theming
A single color recolors the entire lamp.

About this UI Snippet

Lamp Header — Converging Light Cones and a Glowing Reveal Line

Screenshot of the Lamp Header snippet rendered live

The lamp header is the cinematic hero where two beams of light angle down from the top of the screen and meet at a bright horizontal line — like a stage spotlight — with the headline rising into the pool of light beneath it. This snippet recreates that dramatic effect entirely with CSS for the lighting, plus a tiny vanilla JavaScript helper to show how themeable it is.

Light cones from conic gradients

Each beam is a .lh-cone element filled with a conic-gradient that fades from a bright color to transparent, then skewed inward so the two cones angle toward each other at the top center. A vertical mask-image gradient fades each cone to transparent at the bottom, so the light appears to dissipate as it falls rather than ending in a hard edge. A slight blur(2px) softens the cone edges into a glow. The left cone is mirrored with scaleX(-1) so the pair is symmetric around the center line.

The reveal line and glow

Where the cones meet sits a thin horizontal .lh-line — a gradient that's transparent at both ends and bright cyan in the middle, with a box-shadow halo so it reads as a glowing filament. On load it animates from zero width outward via the lhWiden keyframe, so the lamp appears to "switch on" and spread. Behind it, a heavily blurred .lh-glow ellipse rises and fades in with lhRise, creating the soft pool of light that the headline sits in.

Choreographed entrance

The effect is sequenced for drama. The line widens and the glow rises over the first 2.4 seconds, while the content block fades up with lhUp on a 0.3s delay — so the light reveals first and the headline arrives into it, rather than everything appearing at once. The title itself uses a top-to-bottom background-clip: text gradient from white to slate, giving it a lit-from-above sheen consistent with the lamp metaphor.

The radial stage background

The hero's background is a radial gradient anchored above the top edge (at 50% -10%), darkening from a faint slate glow down to near-black. That subtle vignette makes the lamp light feel like it's emerging from offscreen darkness and keeps the focus dead center.

Live theming via JavaScript

The lighting is pure CSS, but to demonstrate how easily it re-themes, double-clicking the hero cycles the beam through five colors. applyTheme rewrites the conic gradients, the line gradient and shadow, the glow color, and the button in one pass — showing that the whole lamp is driven by a single accent color you could wire to a CSS custom property or a theme switch. Swap this for your brand color and the entire effect recolors.

Customizing it

Adjust the cone skewX angles to widen or narrow the beams, change the line and glow sizes, retime the lhWiden and lhRise durations for a slower switch-on, or anchor the radial background differently. Replace the double-click theming with a real theme toggle. Pair it with a shimmer button call to action or a scroll velocity marquee band below for a bold landing sequence.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSTwo light cones converge on a glowing line at the top center.
  2. 2
    Watch it switch onThe line widens and a soft glow rises as the headline fades up into it.
  3. 3
    Read the lit headlineThe title carries a top-down gradient sheen matching the lamp.
  4. 4
    Double-click the heroThe whole lamp cycles to a new accent color.
  5. 5
    Set your brand colorApply one accent to recolor cones, line, glow, and button.
  6. 6
    Retime the entranceAdjust the widen and rise durations for more drama.

Real-world uses

Common Use Cases

Product launch heroes
Spotlight a headline above a shimmer button.
SaaS landing pages
Open a page that flows into a feature tabs showcase.
Event microsites
Pair with a scroll velocity marquee.
Portfolio intros
A dramatic alternative to a minimal hero.
Announcement pages
Light up a reveal over an animated grid background.
CSS lighting demos
A reference for conic-gradient spotlight beams.

Got questions?

Frequently Asked Questions

Each beam is an element filled with a conic-gradient fading from a bright color to transparent, skewed inward with skewX so the two cones angle toward the top center. A vertical mask-image fades each cone out at the bottom so the light dissipates, and a small blur softens the edges into a glow. The left cone is mirrored with scaleX(-1) for symmetry.

The horizontal line where the cones meet animates from zero width outward via the lhWiden keyframe, so the lamp appears to ignite and spread. Behind it a heavily blurred ellipse rises and fades in with lhRise, forming the soft pool of light the headline sits in. The content fades up on a short delay so the light reveals before the text arrives.

Yes — the cones, the reveal line, its glow halo, the soft pool, and the button all share one accent color. The demo's applyTheme function rewrites all of them at once, which shows the lamp is driven by a single value you could store in a CSS custom property and change with a theme switch.

The title uses a background-clip: text gradient running top-to-bottom from white to slate gray. That makes the top of each letter brighter than the bottom, consistent with light coming from the lamp overhead, which ties the typography into the spotlight metaphor.

The markup and CSS port directly. Drive the accent color from a prop or CSS variable and set it on the cones, line, glow, and button so theming is one value. The entrance keyframes run on mount automatically; if you re-trigger them, toggle a key or class. Replace the double-click handler with your real theme control. In Tailwind, build the cones with bg-[conic-gradient(...)] and mask utilities.

Lamp Header — Export as HTML, React, Vue, Angular & Tailwind

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Lamp Header</title>
  <style>
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:system-ui,-apple-system,sans-serif;background:#020617;color:#fff}
    
    .lh-hero{position:relative;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(30,41,59,.6),#020617)}
    
    .lh-lamp{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(700px,92vw);height:340px;display:flex;justify-content:center}
    .lh-cone{position:absolute;top:0;width:50%;height:300px;background-image:conic-gradient(from 70deg at center top,#22d3ee,transparent);filter:blur(2px)}
    .lh-left{left:0;transform-origin:top right;mask-image:linear-gradient(to top,transparent,#000);-webkit-mask-image:linear-gradient(to top,transparent,#000);transform:skewX(-12deg) scaleX(-1)}
    .lh-right{right:0;transform-origin:top left;mask-image:linear-gradient(to top,transparent,#000);-webkit-mask-image:linear-gradient(to top,transparent,#000);transform:skewX(12deg)}
    .lh-line{position:absolute;top:300px;width:min(420px,70vw);height:2px;background:linear-gradient(90deg,transparent,#22d3ee,transparent);box-shadow:0 0 14px 2px rgba(34,211,238,.7);animation:lhWiden 2.4s ease forwards}
    .lh-glow{position:absolute;top:280px;width:280px;height:120px;border-radius:50%;background:#22d3ee;filter:blur(70px);opacity:.5;animation:lhRise 2.4s ease forwards}
    @keyframes lhWiden{from{width:0;opacity:0}to{opacity:1}}
    @keyframes lhRise{from{opacity:0;transform:translateY(20px)}to{opacity:.5}}
    
    .lh-content{position:relative;z-index:1;margin-top:120px;padding:0 20px;max-width:600px;animation:lhUp 1s .3s ease both}
    @keyframes lhUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
    .lh-title{font-size:clamp(34px,7vw,64px);font-weight:900;letter-spacing:-.03em;line-height:1.05;background:linear-gradient(180deg,#fff,#94a3b8);-webkit-background-clip:text;background-clip:text;color:transparent}
    .lh-sub{margin-top:16px;font-size:16px;color:#94a3b8;line-height:1.55}
    .lh-btn{margin-top:26px;background:#22d3ee;color:#042f2e;border:none;border-radius:12px;padding:13px 26px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 10px 36px -8px rgba(34,211,238,.6);transition:transform .15s}
    .lh-btn:hover{transform:translateY(-2px)}
  </style>
</head>
<body>
  <section class="lh-hero">
    <div class="lh-lamp" aria-hidden="true">
      <span class="lh-cone lh-left"></span>
      <span class="lh-cone lh-right"></span>
      <span class="lh-line"></span>
      <span class="lh-glow"></span>
    </div>
    <div class="lh-content">
      <h1 class="lh-title">Build something<br>that glows</h1>
      <p class="lh-sub">A spotlight-lamp hero that draws the eye straight to your headline.</p>
      <button type="button" class="lh-btn">Start free</button>
    </div>
  </section>
  <script>
    // The lamp is entirely CSS-animated. This tiny script lets visitors recolor
    // the beam live to show how themeable the effect is via a CSS variable.
    var hero = document.querySelector('.lh-hero');
    var btn = document.querySelector('.lh-btn');
    var THEMES = ['#22d3ee', '#a78bfa', '#f472b6', '#34d399', '#fbbf24'];
    var i = 0;
    
    function applyTheme(color) {
      document.querySelectorAll('.lh-cone').forEach(function (c) {
        c.style.backgroundImage = 'conic-gradient(from 70deg at center top,' + color + ',transparent)';
      });
      var line = document.querySelector('.lh-line');
      line.style.background = 'linear-gradient(90deg,transparent,' + color + ',transparent)';
      line.style.boxShadow = '0 0 14px 2px ' + color;
      document.querySelector('.lh-glow').style.background = color;
      btn.style.background = color;
    }
    
    // Double-click the hero to cycle the lamp color.
    hero.addEventListener('dblclick', function () {
      i = (i + 1) % THEMES.length;
      applyTheme(THEMES[i]);
    });
  </script>
</body>
</html>
Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Lamp Header</title>
  <!-- Tailwind CSS v3+ — arbitrary value classes (e.g. bg-[#0f172a]) are valid -->
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @keyframes lhWiden{from{width:0;opacity:0}to{opacity:1}}

    @keyframes lhRise{from{opacity:0;transform:translateY(20px)}to{opacity:.5}}

    @keyframes lhUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

    * {
      box-sizing:border-box;margin:0;padding:0
    }

    body {
      font-family:system-ui,-apple-system,sans-serif;background:#020617;color:#fff
    }
  </style>
</head>
<body>
  <section class="lh-hero relative min-h-screen overflow-hidden flex flex-col items-center justify-center text-center [background:radial-gradient(ellipse_80%_60%_at_50%_-10%,rgba(30,41,59,.6),#020617)]">
    <div class="absolute top-0 left-1/2 [transform:translateX(-50%)] w-[min(700px,92vw)] h-[340px] flex justify-center" aria-hidden="true">
      <span class="lh-cone absolute top-0 w-1/2 h-[300px] [background-image:conic-gradient(from_70deg_at_center_top,#22d3ee,transparent)] [filter:blur(2px)] left-0 [transform-origin:top_right] [mask-image:linear-gradient(to_top,transparent,#000)] [-webkit-mask-image:linear-gradient(to_top,transparent,#000)] [transform:skewX(-12deg)_scaleX(-1)]"></span>
      <span class="lh-cone absolute top-0 w-1/2 h-[300px] [background-image:conic-gradient(from_70deg_at_center_top,#22d3ee,transparent)] [filter:blur(2px)] right-0 [transform-origin:top_left] [mask-image:linear-gradient(to_top,transparent,#000)] [-webkit-mask-image:linear-gradient(to_top,transparent,#000)] [transform:skewX(12deg)]"></span>
      <span class="lh-line absolute top-[300px] w-[min(420px,70vw)] h-0.5 [background:linear-gradient(90deg,transparent,#22d3ee,transparent)] shadow-[0_0_14px_2px_rgba(34,211,238,.7)] [animation:lhWiden_2.4s_ease_forwards]"></span>
      <span class="lh-glow absolute top-[280px] w-[280px] h-[120px] rounded-full bg-[#22d3ee] [filter:blur(70px)] opacity-50 [animation:lhRise_2.4s_ease_forwards]"></span>
    </div>
    <div class="relative z-[1] mt-[120px] py-0 px-5 max-w-[600px] [animation:lhUp_1s_.3s_ease_both]">
      <h1 class="text-[clamp(34px,7vw,64px)] font-black tracking-[-.03em] leading-[1.05] [background:linear-gradient(180deg,#fff,#94a3b8)] [-webkit-background-clip:text] bg-clip-text text-transparent">Build something<br>that glows</h1>
      <p class="mt-4 text-base text-[#94a3b8] leading-[1.55]">A spotlight-lamp hero that draws the eye straight to your headline.</p>
      <button type="button" class="lh-btn mt-[26px] bg-[#22d3ee] text-[#042f2e] border-0 rounded-xl py-[13px] px-[26px] font-[inherit] text-[15px] font-extrabold cursor-pointer shadow-[0_10px_36px_-8px_rgba(34,211,238,.6)] [transition:transform_.15s] hover:[transform:translateY(-2px)]">Start free</button>
    </div>
  </section>
  <script>
    // The lamp is entirely CSS-animated. This tiny script lets visitors recolor
    // the beam live to show how themeable the effect is via a CSS variable.
    var hero = document.querySelector('.lh-hero');
    var btn = document.querySelector('.lh-btn');
    var THEMES = ['#22d3ee', '#a78bfa', '#f472b6', '#34d399', '#fbbf24'];
    var i = 0;
    
    function applyTheme(color) {
      document.querySelectorAll('.lh-cone').forEach(function (c) {
        c.style.backgroundImage = 'conic-gradient(from 70deg at center top,' + color + ',transparent)';
      });
      var line = document.querySelector('.lh-line');
      line.style.background = 'linear-gradient(90deg,transparent,' + color + ',transparent)';
      line.style.boxShadow = '0 0 14px 2px ' + color;
      document.querySelector('.lh-glow').style.background = color;
      btn.style.background = color;
    }
    
    // Double-click the hero to cycle the lamp color.
    hero.addEventListener('dblclick', function () {
      i = (i + 1) % THEMES.length;
      applyTheme(THEMES[i]);
    });
  </script>
</body>
</html>
React
import React, { useEffect } from 'react';

// CSS — optionally move to LampHeader.module.css
const css = `
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#020617;color:#fff}

.lh-hero{position:relative;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(30,41,59,.6),#020617)}

.lh-lamp{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(700px,92vw);height:340px;display:flex;justify-content:center}
.lh-cone{position:absolute;top:0;width:50%;height:300px;background-image:conic-gradient(from 70deg at center top,#22d3ee,transparent);filter:blur(2px)}
.lh-left{left:0;transform-origin:top right;mask-image:linear-gradient(to top,transparent,#000);-webkit-mask-image:linear-gradient(to top,transparent,#000);transform:skewX(-12deg) scaleX(-1)}
.lh-right{right:0;transform-origin:top left;mask-image:linear-gradient(to top,transparent,#000);-webkit-mask-image:linear-gradient(to top,transparent,#000);transform:skewX(12deg)}
.lh-line{position:absolute;top:300px;width:min(420px,70vw);height:2px;background:linear-gradient(90deg,transparent,#22d3ee,transparent);box-shadow:0 0 14px 2px rgba(34,211,238,.7);animation:lhWiden 2.4s ease forwards}
.lh-glow{position:absolute;top:280px;width:280px;height:120px;border-radius:50%;background:#22d3ee;filter:blur(70px);opacity:.5;animation:lhRise 2.4s ease forwards}
@keyframes lhWiden{from{width:0;opacity:0}to{opacity:1}}
@keyframes lhRise{from{opacity:0;transform:translateY(20px)}to{opacity:.5}}

.lh-content{position:relative;z-index:1;margin-top:120px;padding:0 20px;max-width:600px;animation:lhUp 1s .3s ease both}
@keyframes lhUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.lh-title{font-size:clamp(34px,7vw,64px);font-weight:900;letter-spacing:-.03em;line-height:1.05;background:linear-gradient(180deg,#fff,#94a3b8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lh-sub{margin-top:16px;font-size:16px;color:#94a3b8;line-height:1.55}
.lh-btn{margin-top:26px;background:#22d3ee;color:#042f2e;border:none;border-radius:12px;padding:13px 26px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 10px 36px -8px rgba(34,211,238,.6);transition:transform .15s}
.lh-btn:hover{transform:translateY(-2px)}
`;

export default function LampHeader() {
  // Auto-generated escape hatch: the original snippet's vanilla JS runs once
  // after mount and queries the rendered DOM. For idiomatic React, lift this
  // into state + handlers.
  useEffect(() => {
    const _listeners = [];
    const _originalAddEventListener = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function(type, listener, options) {
      _listeners.push({ target: this, type, listener, options });
      return _originalAddEventListener.call(this, type, listener, options);
    };
    // The lamp is entirely CSS-animated. This tiny script lets visitors recolor
    // the beam live to show how themeable the effect is via a CSS variable.
    var hero = document.querySelector('.lh-hero');
    var btn = document.querySelector('.lh-btn');
    var THEMES = ['#22d3ee', '#a78bfa', '#f472b6', '#34d399', '#fbbf24'];
    var i = 0;
    
    function applyTheme(color) {
      document.querySelectorAll('.lh-cone').forEach(function (c) {
        c.style.backgroundImage = 'conic-gradient(from 70deg at center top,' + color + ',transparent)';
      });
      var line = document.querySelector('.lh-line');
      line.style.background = 'linear-gradient(90deg,transparent,' + color + ',transparent)';
      line.style.boxShadow = '0 0 14px 2px ' + color;
      document.querySelector('.lh-glow').style.background = color;
      btn.style.background = color;
    }
    
    // Double-click the hero to cycle the lamp color.
    hero.addEventListener('dblclick', function () {
      i = (i + 1) % THEMES.length;
      applyTheme(THEMES[i]);
    });
    // Cleanup: restore addEventListener and remove all listeners
    return () => {
      EventTarget.prototype.addEventListener = _originalAddEventListener;
      for (const { target, type, listener, options } of _listeners) {
        target.removeEventListener(type, listener, options);
      }
    };
  }, []);

  return (
    <>
      <style>{css}</style>
      <section className="lh-hero">
        <div className="lh-lamp" aria-hidden="true">
          <span className="lh-cone lh-left"></span>
          <span className="lh-cone lh-right"></span>
          <span className="lh-line"></span>
          <span className="lh-glow"></span>
        </div>
        <div className="lh-content">
          <h1 className="lh-title">Build something<br />that glows</h1>
          <p className="lh-sub">A spotlight-lamp hero that draws the eye straight to your headline.</p>
          <button type="button" className="lh-btn">Start free</button>
        </div>
      </section>
    </>
  );
}
React + Tailwind
import React, { useEffect } from 'react';
// Requires Tailwind CSS v3+ — https://tailwindcss.com/docs/installation
// Arbitrary value classes (e.g. bg-[#0f172a]) are valid Tailwind v3+

export default function LampHeader() {
  // Auto-generated escape hatch: the original snippet's vanilla JS runs once
  // after mount and queries the rendered DOM. For idiomatic React, lift this
  // into state + handlers.
  useEffect(() => {
    const _listeners = [];
    const _originalAddEventListener = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function(type, listener, options) {
      _listeners.push({ target: this, type, listener, options });
      return _originalAddEventListener.call(this, type, listener, options);
    };
    // The lamp is entirely CSS-animated. This tiny script lets visitors recolor
    // the beam live to show how themeable the effect is via a CSS variable.
    var hero = document.querySelector('.lh-hero');
    var btn = document.querySelector('.lh-btn');
    var THEMES = ['#22d3ee', '#a78bfa', '#f472b6', '#34d399', '#fbbf24'];
    var i = 0;
    
    function applyTheme(color) {
      document.querySelectorAll('.lh-cone').forEach(function (c) {
        c.style.backgroundImage = 'conic-gradient(from 70deg at center top,' + color + ',transparent)';
      });
      var line = document.querySelector('.lh-line');
      line.style.background = 'linear-gradient(90deg,transparent,' + color + ',transparent)';
      line.style.boxShadow = '0 0 14px 2px ' + color;
      document.querySelector('.lh-glow').style.background = color;
      btn.style.background = color;
    }
    
    // Double-click the hero to cycle the lamp color.
    hero.addEventListener('dblclick', function () {
      i = (i + 1) % THEMES.length;
      applyTheme(THEMES[i]);
    });
    // Cleanup: restore addEventListener and remove all listeners
    return () => {
      EventTarget.prototype.addEventListener = _originalAddEventListener;
      for (const { target, type, listener, options } of _listeners) {
        target.removeEventListener(type, listener, options);
      }
    };
  }, []);

  return (
    <>
      <style>{`
@keyframes lhWiden{from{width:0;opacity:0}to{opacity:1}}

@keyframes lhRise{from{opacity:0;transform:translateY(20px)}to{opacity:.5}}

@keyframes lhUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

* {
  box-sizing:border-box;margin:0;padding:0
}

body {
  font-family:system-ui,-apple-system,sans-serif;background:#020617;color:#fff
}
      `}</style>
      <section className="lh-hero relative min-h-screen overflow-hidden flex flex-col items-center justify-center text-center [background:radial-gradient(ellipse_80%_60%_at_50%_-10%,rgba(30,41,59,.6),#020617)]">
        <div className="absolute top-0 left-1/2 [transform:translateX(-50%)] w-[min(700px,92vw)] h-[340px] flex justify-center" aria-hidden="true">
          <span className="lh-cone absolute top-0 w-1/2 h-[300px] [background-image:conic-gradient(from_70deg_at_center_top,#22d3ee,transparent)] [filter:blur(2px)] left-0 [transform-origin:top_right] [mask-image:linear-gradient(to_top,transparent,#000)] [-webkit-mask-image:linear-gradient(to_top,transparent,#000)] [transform:skewX(-12deg)_scaleX(-1)]"></span>
          <span className="lh-cone absolute top-0 w-1/2 h-[300px] [background-image:conic-gradient(from_70deg_at_center_top,#22d3ee,transparent)] [filter:blur(2px)] right-0 [transform-origin:top_left] [mask-image:linear-gradient(to_top,transparent,#000)] [-webkit-mask-image:linear-gradient(to_top,transparent,#000)] [transform:skewX(12deg)]"></span>
          <span className="lh-line absolute top-[300px] w-[min(420px,70vw)] h-0.5 [background:linear-gradient(90deg,transparent,#22d3ee,transparent)] shadow-[0_0_14px_2px_rgba(34,211,238,.7)] [animation:lhWiden_2.4s_ease_forwards]"></span>
          <span className="lh-glow absolute top-[280px] w-[280px] h-[120px] rounded-full bg-[#22d3ee] [filter:blur(70px)] opacity-50 [animation:lhRise_2.4s_ease_forwards]"></span>
        </div>
        <div className="relative z-[1] mt-[120px] py-0 px-5 max-w-[600px] [animation:lhUp_1s_.3s_ease_both]">
          <h1 className="text-[clamp(34px,7vw,64px)] font-black tracking-[-.03em] leading-[1.05] [background:linear-gradient(180deg,#fff,#94a3b8)] [-webkit-background-clip:text] bg-clip-text text-transparent">Build something<br />that glows</h1>
          <p className="mt-4 text-base text-[#94a3b8] leading-[1.55]">A spotlight-lamp hero that draws the eye straight to your headline.</p>
          <button type="button" className="lh-btn mt-[26px] bg-[#22d3ee] text-[#042f2e] border-0 rounded-xl py-[13px] px-[26px] font-[inherit] text-[15px] font-extrabold cursor-pointer shadow-[0_10px_36px_-8px_rgba(34,211,238,.6)] [transition:transform_.15s] hover:[transform:translateY(-2px)]">Start free</button>
        </div>
      </section>
    </>
  );
}
Vue
<template>
  <section class="lh-hero">
    <div class="lh-lamp" aria-hidden="true">
      <span class="lh-cone lh-left"></span>
      <span class="lh-cone lh-right"></span>
      <span class="lh-line"></span>
      <span class="lh-glow"></span>
    </div>
    <div class="lh-content">
      <h1 class="lh-title">Build something<br>that glows</h1>
      <p class="lh-sub">A spotlight-lamp hero that draws the eye straight to your headline.</p>
      <button type="button" class="lh-btn">Start free</button>
    </div>
  </section>
</template>

<script setup>
import { onMounted } from 'vue';

let hero;
let btn;
var THEMES = ['#22d3ee', '#a78bfa', '#f472b6', '#34d399', '#fbbf24'];
var i = 0;
function applyTheme(color) {
  document.querySelectorAll('.lh-cone').forEach(function (c) {
    c.style.backgroundImage = 'conic-gradient(from 70deg at center top,' + color + ',transparent)';
  });
  var line = document.querySelector('.lh-line');
  line.style.background = 'linear-gradient(90deg,transparent,' + color + ',transparent)';
  line.style.boxShadow = '0 0 14px 2px ' + color;
  document.querySelector('.lh-glow').style.background = color;
  btn.style.background = color;
}

onMounted(() => {
  hero = document.querySelector('.lh-hero');
  btn = document.querySelector('.lh-btn');
  // Double-click the hero to cycle the lamp color.
  hero.addEventListener('dblclick', function () {
    i = (i + 1) % THEMES.length;
    applyTheme(THEMES[i]);
  });
});
</script>

<style scoped>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#020617;color:#fff}

.lh-hero{position:relative;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(30,41,59,.6),#020617)}

.lh-lamp{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(700px,92vw);height:340px;display:flex;justify-content:center}
.lh-cone{position:absolute;top:0;width:50%;height:300px;background-image:conic-gradient(from 70deg at center top,#22d3ee,transparent);filter:blur(2px)}
.lh-left{left:0;transform-origin:top right;mask-image:linear-gradient(to top,transparent,#000);-webkit-mask-image:linear-gradient(to top,transparent,#000);transform:skewX(-12deg) scaleX(-1)}
.lh-right{right:0;transform-origin:top left;mask-image:linear-gradient(to top,transparent,#000);-webkit-mask-image:linear-gradient(to top,transparent,#000);transform:skewX(12deg)}
.lh-line{position:absolute;top:300px;width:min(420px,70vw);height:2px;background:linear-gradient(90deg,transparent,#22d3ee,transparent);box-shadow:0 0 14px 2px rgba(34,211,238,.7);animation:lhWiden 2.4s ease forwards}
.lh-glow{position:absolute;top:280px;width:280px;height:120px;border-radius:50%;background:#22d3ee;filter:blur(70px);opacity:.5;animation:lhRise 2.4s ease forwards}
@keyframes lhWiden{from{width:0;opacity:0}to{opacity:1}}
@keyframes lhRise{from{opacity:0;transform:translateY(20px)}to{opacity:.5}}

.lh-content{position:relative;z-index:1;margin-top:120px;padding:0 20px;max-width:600px;animation:lhUp 1s .3s ease both}
@keyframes lhUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.lh-title{font-size:clamp(34px,7vw,64px);font-weight:900;letter-spacing:-.03em;line-height:1.05;background:linear-gradient(180deg,#fff,#94a3b8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lh-sub{margin-top:16px;font-size:16px;color:#94a3b8;line-height:1.55}
.lh-btn{margin-top:26px;background:#22d3ee;color:#042f2e;border:none;border-radius:12px;padding:13px 26px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 10px 36px -8px rgba(34,211,238,.6);transition:transform .15s}
.lh-btn:hover{transform:translateY(-2px)}
</style>
Angular
// @ts-nocheck
// Note: vanilla JS DOM manipulation is preserved as-is inside ngAfterViewInit().
// For idiomatic Angular, replace document.getElementById() with @ViewChild() refs
// and move state into component properties with two-way binding.
import { Component, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-lamp-header',
  standalone: true,
  imports: [CommonModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <section class="lh-hero">
      <div class="lh-lamp" aria-hidden="true">
        <span class="lh-cone lh-left"></span>
        <span class="lh-cone lh-right"></span>
        <span class="lh-line"></span>
        <span class="lh-glow"></span>
      </div>
      <div class="lh-content">
        <h1 class="lh-title">Build something<br>that glows</h1>
        <p class="lh-sub">A spotlight-lamp hero that draws the eye straight to your headline.</p>
        <button type="button" class="lh-btn">Start free</button>
      </div>
    </section>
  `,
  styles: [`
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:system-ui,-apple-system,sans-serif;background:#020617;color:#fff}
    
    .lh-hero{position:relative;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(30,41,59,.6),#020617)}
    
    .lh-lamp{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(700px,92vw);height:340px;display:flex;justify-content:center}
    .lh-cone{position:absolute;top:0;width:50%;height:300px;background-image:conic-gradient(from 70deg at center top,#22d3ee,transparent);filter:blur(2px)}
    .lh-left{left:0;transform-origin:top right;mask-image:linear-gradient(to top,transparent,#000);-webkit-mask-image:linear-gradient(to top,transparent,#000);transform:skewX(-12deg) scaleX(-1)}
    .lh-right{right:0;transform-origin:top left;mask-image:linear-gradient(to top,transparent,#000);-webkit-mask-image:linear-gradient(to top,transparent,#000);transform:skewX(12deg)}
    .lh-line{position:absolute;top:300px;width:min(420px,70vw);height:2px;background:linear-gradient(90deg,transparent,#22d3ee,transparent);box-shadow:0 0 14px 2px rgba(34,211,238,.7);animation:lhWiden 2.4s ease forwards}
    .lh-glow{position:absolute;top:280px;width:280px;height:120px;border-radius:50%;background:#22d3ee;filter:blur(70px);opacity:.5;animation:lhRise 2.4s ease forwards}
    @keyframes lhWiden{from{width:0;opacity:0}to{opacity:1}}
    @keyframes lhRise{from{opacity:0;transform:translateY(20px)}to{opacity:.5}}
    
    .lh-content{position:relative;z-index:1;margin-top:120px;padding:0 20px;max-width:600px;animation:lhUp 1s .3s ease both}
    @keyframes lhUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
    .lh-title{font-size:clamp(34px,7vw,64px);font-weight:900;letter-spacing:-.03em;line-height:1.05;background:linear-gradient(180deg,#fff,#94a3b8);-webkit-background-clip:text;background-clip:text;color:transparent}
    .lh-sub{margin-top:16px;font-size:16px;color:#94a3b8;line-height:1.55}
    .lh-btn{margin-top:26px;background:#22d3ee;color:#042f2e;border:none;border-radius:12px;padding:13px 26px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 10px 36px -8px rgba(34,211,238,.6);transition:transform .15s}
    .lh-btn:hover{transform:translateY(-2px)}
  `]
})
export class LampHeaderComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // The lamp is entirely CSS-animated. This tiny script lets visitors recolor
    // the beam live to show how themeable the effect is via a CSS variable.
    var hero = document.querySelector('.lh-hero');
    var btn = document.querySelector('.lh-btn');
    var THEMES = ['#22d3ee', '#a78bfa', '#f472b6', '#34d399', '#fbbf24'];
    var i = 0;
    
    function applyTheme(color) {
      document.querySelectorAll('.lh-cone').forEach(function (c) {
        c.style.backgroundImage = 'conic-gradient(from 70deg at center top,' + color + ',transparent)';
      });
      var line = document.querySelector('.lh-line');
      line.style.background = 'linear-gradient(90deg,transparent,' + color + ',transparent)';
      line.style.boxShadow = '0 0 14px 2px ' + color;
      document.querySelector('.lh-glow').style.background = color;
      btn.style.background = color;
    }
    
    // Double-click the hero to cycle the lamp color.
    hero.addEventListener('dblclick', function () {
      i = (i + 1) % THEMES.length;
      applyTheme(THEMES[i]);
    });

    // Bind inline-handler functions to the component so the template can call them
    Object.assign(this, { applyTheme });
  }
}