Seasonal Banner

Thematic banners enhanced with particle effects

npm run add SeasonalBanner

Use the SeasonalBanner component to display a promotional or thematic banner enhanced with particle effects (e.g. for Christmas, Halloween, New Year). They can:

• Boost engagement: Seasonal visuals and animated confetti draw attention more effectively than static banners.
• Increase conversions: Highlight promotions, sales, or announcements in a festive, eye-catching way.

<SeasonalBanner
    text="Get 20% off for the holidays!"
    href="/landing-page"
/>

The SeasonalBanner component expects a text and a href prop. By default, this will render a banner with an animated gradient background. The component is based off of the Banner component, meaning you can also pass BannerProps to the component.

Types

The component comes with a type prop that expect a preset type from the Confetti component. The banner comes with 33 predefined presets. This way, you can quickly set up banners for various events, such as for New Year, Halloween, or Easter.

<SeasonalBanner
    text="Get 20% off for the holidays!"
    href="/landing-page"
    type="newYear"
/>

<SeasonalBanner
    text="Take 20% off this Halloween season!"
    href="/landing-page"
    type="halloween"
/>

Colors

In case you don’t want to use a preset just a simply gradient, you can also set the following three props to match your brand:

• textColor: Sets the text colors.
• rgbBgColorFrom: Pass an RGB string to set the starting color of the background gradient.
• rgbBgColorTo: Pass an RGB string to set the ending color of the background gradient.

<SeasonalBanner
    text="Get 20% off for the holidays!"
    textColor="#FFF"
    rgbBgColorFrom="255 70 140"
    rgbBgColorTo="255 120 200"
/>

Configuring Colors with CSS

If you want to keep style-specific configuration in one place, you can also configure the above props through the following CSS variables:

html body {
    --w-seasonal-banner-text-color: var(--w-color-primary-20);
    --w-seasonal-banner-bg-from: 17 17 17;
    --w-seasonal-banner-bg-to: 0 0 0;
}

Customizing Confetti

To customize the behavior of particles, you can pass a confetti prop to the component. Here you can fully customize colors, shapes, and physics properties using a ConfettiProps object. For example:

<SeasonalBanner
    text="Get 20% off for the holidays!"
    confetti={{
        amount: 150
        gravity: 0.008
        terminalVelocity: 1.5
        turbulence: 0
        colors: ['#FFF', '#F0F8FF', '#E6F3FF']
        size: 0.1
        speed: 0.8
    }}
/>

API

type SeasonalBannerProps = {
    text: string
    href: string
    target?: '_self'
        | '_blank'
        | '_parent'
        | '_top'
        | '_unfencedTop'
    type?: keyof typeof confettiPresets
    confetti?: Omit<ConfettiProps, 'canvas'>
    textColor?: string
    rgbBgColorFrom?: string
    rgbBgColorTo?: string
} & BannerProps