Put a live banner behind a section

This is a template, designed for you to alter and make your own.

This page shows you how to drop a fixed-height animated strip behind any section of a page. Copy it to start a page of your own, change anything, or delete the whole app/(marketing)/recipes folder — nothing else in the template depends on it. Example pages are not indexed by search engines.

Your content rides above the scene

The whole recipe

import { VisualBanner, PARTY_LIGHTS } from '@/components/visual';

<VisualBanner spec={PARTY_LIGHTS} className="h-40 sm:h-56 bg-[linear-gradient(150deg,#161b26,#0a0c11)]">
  <div className="h-full flex items-center justify-center">
    {/* your CTA, badge row, or headline */}
  </div>
</VisualBanner>

Any spec works — PARTY_LIGHTS here; swap in anything from the gallery or one you authored.
The height is yours via className; the canvas fills whatever box you give it, and pauses when scrolled off-screen or on reduced-motion.

Put a live banner behind a section

This is a template, designed for you to alter and make your own.

Your content rides above the scene

The whole recipe

import { VisualBanner, PARTY_LIGHTS } from '@/components/visual';

<VisualBanner spec={PARTY_LIGHTS} className="h-40 sm:h-56 bg-[linear-gradient(150deg,#161b26,#0a0c11)]">
  <div className="h-full flex items-center justify-center">
    {/* your CTA, badge row, or headline */}
  </div>
</VisualBanner>

Any spec works — PARTY_LIGHTS here; swap in anything from the gallery or one you authored.
The height is yours via className; the canvas fills whatever box you give it, and pauses when scrolled off-screen or on reduced-motion.