sections

Hero Aurora

A server-rendered hero section with an animated aurora gradient backdrop. The section is an RSC; the aurora background is a small client child that animates soft blobs with motion/react and respects prefers-reduced-motion. Accepts title (plain text) or headline (a rich ReactNode rendered inside the styled <h1>, e.g. a GradientText) — provide at least one — plus subtitle and a CTA children slot.

Build faster with Bottega

A workshop of crafted components.

Install

1. Register the namespace (once per project):

json

// components.json — register the @bottega namespace once
{
  "registries": {
    "@bottega": { "url": "https://bottega.ariacode.ca/r/{name}.json" }
  }
}

2. Add the component:

bash

npx shadcn add @bottega/hero-aurora

Usage

Usagetsx

<HeroAurora />

Props

Prop	Type	Default	Description
title	string	—	Plain-text heading. Provide this or `headline` (at least one is expected).
headline	React.ReactNode	—	Rich heading node (e.g. a `GradientText`) rendered inside the styled `<h1>` so it inherits the hero type scale. Takes precedence over `title`.
subtitle	string	—
className	string

Source

hero-aurora.tsxtsx

import type React from "react";
import { AuroraBg } from "./aurora-bg";

export interface HeroAuroraProps {
  /** Plain-text heading. Provide this or `headline` (at least one is expected). */
  title?: string;
  /**
   * Rich heading node (e.g. a `GradientText`) rendered inside the styled `<h1>`
   * so it inherits the hero type scale. Takes precedence over `title`.
   */
  headline?: React.ReactNode;
  subtitle?: string;
  className?: string;
  children?: React.ReactNode;
}

export function HeroAurora({ title, headline, subtitle, className = "", children }: HeroAuroraProps) {
  const heading = headline ?? title;
  return (
    <section
      className={[
        "relative isolate overflow-hidden",
        "bg-background text-foreground",
        "min-h-[60vh] flex flex-col items-center justify-center",
        "px-6 py-24 text-center",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    >
      {/* Aurora animated backdrop — client child, renders behind content */}
      <AuroraBg />

      {/* Content stacks above the aurora */}
      <div className="relative z-10 flex flex-col items-center gap-6 max-w-3xl mx-auto">
        {heading != null && (
          <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-6xl">
            {heading}
          </h1>
        )}

        {subtitle && (
          <p className="text-lg leading-relaxed text-foreground opacity-70 max-w-xl">
            {subtitle}
          </p>
        )}

        {children && (
          <div className="mt-4 flex flex-wrap items-center justify-center gap-4">
            {children}
          </div>
        )}
      </div>
    </section>
  );
}

Dependencies

motion
@bottega/tokens