FreeText Effects

Lamp Section Header

Use this component for feature section intros, product reveals, launch pages, and dark editorial layouts.

ReactTailwind CSSMotionHeader

Build lamps the
right way

Overview

A cinematic section heading with a soft lamp glow above the headline.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<LampSectionHeader />

Lamp Section Header.tsx

tsx

"use client";

import { motion } from "framer-motion";

export function LampSectionHeader() {
  return (
    <section className="relative flex min-h-[320px] items-center justify-center overflow-hidden rounded-xl border border-white/10 bg-[#050b1f] p-6">
      <div className="absolute top-10 h-px w-64 bg-cyan-300" />
      <div className="absolute top-10 h-32 w-80 bg-cyan-300/30 blur-3xl" />
      <div className="absolute top-10 h-24 w-64 bg-cyan-200/20 blur-xl" />
      <motion.h3
        initial={{ opacity: 0.7, y: 8 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        className="relative mt-12 text-center text-4xl font-black leading-tight text-slate-200"
      >
        Build lamps the<br />
        right way
      </motion.h3>
    </section>
  );
}

Lamp Section Header

Build lamps theright way

Overview

Build lamps the
right way