sprõut
ComponentsData display

Glass Banner

A soft blue glass panel for a page's opening moment. A title and caption sit on bubble art, and a few glass chips show what happens next. Drag a chip and let go: it stretches with its speed and springs home.

Connect once. Your agents work there.

Example activity

  • Drafted 3 follow-ups
  • Answered in #support
  • Triaged 5 new issues

App activity · wide · caption · icons

Usage

Glass banner usageTSX
import { BrandIcon } from "@tulipfarm/sprout/brand-icon";
import { GlassBanner, GlassChip } from "@tulipfarm/sprout/glass-banner";

<GlassBanner title="Connect once. Your agents work there." caption="Example activity">
  <GlassChip icon={<BrandIcon brand="gmail" size="glyph" />}>Drafted 3 follow-ups</GlassChip>
  <GlassChip icon={<BrandIcon brand="slack" size="glyph" />}>Answered in #support</GlassChip>
  <GlassChip icon={<BrandIcon brand="jira" size="glyph" />}>Triaged 5 new issues</GlassChip>
</GlassBanner>

GlassBanner takes a title, an optional caption, and GlassChip children. Each chip takes text and an optionalicon, drawn in a 28px white bubble. Brand glyphs and 16px icons both fit. The banner has one size: at least 240px tall with 24px padding. Light and dark modes each have their own glass colors.

Icons and text chips

Chips with an icon pad tightly around the bubble; text-only chips get even padding on both ends. This set mixes both.

Interactive glass chips

Grow your next idea

Fictional project starters

  • Garden notes
  • Plan a project
  • Try a new workflow

Layout

The banner reads its own width, not the window. From 704px wide, up to three chips float over the art at fixed spots, each tilted a little. Narrower banners, or banners with four or more chips, wrap the chips in rows under the title. Long chip text wraps instead of overflowing.

Wide · chips float over the art

Connect once. Your agents work there.

Example activity

  • Drafted 3 follow-ups
  • Answered in #support
  • Triaged 5 new issues
Narrow · chips wrap below the title

Connect once. Your agents work there.

Example activity

  • Drafted 3 follow-ups
  • Answered in #support
  • Triaged 5 new issues
No caption · list named by the title

Grow your next idea

  • Try a new workflow
  • Summarize the quarterly garden-planning notes for the whole team

Integrations page

The integrations page opens with the banner when the All filter is on and the search is empty. Searching or picking another filter hides it so results come first. Try it below.

Integrations page

Integrations

Connect the apps your agents work in.

Connect once. Your agents work there.

Example activity

  • Drafted 3 follow-ups
  • Answered in #support
  • Triaged 5 new issues
  • GmailConnected
  • SlackConnected
  • JiraProject management
  • GitHubEngineering

Apps, filters, and activity here are sample data. The package only draws the banner and its chips.

Accessibility

The bubble art is aria-hidden. Chips are a list named by the caption, or by the title when there is no caption. Dragging is pointer play only: chips are not controls, so they take no focus and keyboard users read them as plain list items. Chips float gently and spring back after a drag; with reduced motion they hold still and snap home as soon as you let go.