Header 5

A hero section with a dark background and gradient text. It displays a heading, a paragraph, and two buttons. It animates on scroll with motion effects. Use it for landing pages or product showcases.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/header-5

npx layro-cli add @educlopez/header-5

npx layro-cli add @educlopez/header-5

bunx layro-cli add @educlopez/header-5

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { motion, useReducedMotion } from "motion/react";

const SPRING = {
  bounce: 0.1,
  duration: 0.25,
  type: "spring" as const,
};

export function HeroSpotlight() {
  const shouldReduceMotion = useReducedMotion();