Gradient Banner

Usage

import {
  GradientBanner,
  GradientBannerBadge,
  GradientBannerPanel,
} from "@tulipfarm/sprout/gradient-banner";

<GradientBanner variant="iris" size="md">
  <GradientBannerPanel tone="dark">
    <GradientBannerBadge>Example</GradientBannerBadge>
    <span>How agents work in TulipFarm</span>
  </GradientBannerPanel>
</GradientBanner>

variant picks the colors and defaults to "aurora". size sets the minimum height, padding, and corner radius: sm 96px, md 160px, lg 240px (default), and xl 360px. Children sit centered on the art; a banner without children draws only the art.

Variants

Six color stories. Text placed straight on cobalt turns pearl so it stays readable on deep blue; the other variants use dark ink.

Sizes and texture

A film grain sits over the art by default. Set texture={false} for flat color, for example when many banners share a screen.

Each size with the content it is made for:

Panels and badges

<GradientBanner variant="lagoon" size="md">
  <GradientBannerPanel>
    <BrandIcon brand="slack" size="glyph" />
    <span>Post the weekly update in #team</span>
  </GradientBannerPanel>
</GradientBanner>

GradientBannerPanel is a solid "light" (default) or"dark" surface. Badges and progress inside a dark panel switch to dark fills on their own. Long words wrap instead of overflowing.

Progress

<GradientBannerProgress value={percent} aria-label="Spring launch email progress" />

A 4px progressbar in the current text color. value is a percent; values outside 0–100 are clamped. Give it a name with aria-label.

Prompt carousel

An integration sheet suggests things to ask. Each card rotates through the variants from a stable start per app, so the same app always gets the same colors. The row scrolls sideways and snaps; focus it and use the arrow keys.

Showcase

The sign-in page fills half the screen with an xl banner that plays scripted agent runs: a dark example label, a panel with avatar, badge, progress, and steps, then a result badge. It starts paused when reduced motion is on; Pause stops it at any time.

Agent runs, app prompts, and timing in these examples are sample code. The package only draws the banner, panels, badges, and progress.

Accessibility

The art and its texture are aria-hidden; only children are announced. Banners are not interactive, so focus goes to the controls you put inside. Progress has role="progressbar" with rounded aria-valuenow. Its fill eases over 180ms; reduced motion turns that off.