127 Components
Gradient Mesh Hero
BackgroundsStripe-style angled flowing gradient mesh hero section featuring multi-layered organic color blobs, diagonal polygon clip-path, and live palette switching.
Stripe-Grade Mesh v4.0Next-gen Canvas GPU Drift
Financial infrastructure
for the modern internet
Millions of companies—from fast-growing startups to global enterprises—use Pulse’s software and APIs to accept payments, send payouts, and scale recurring revenue.
$1.4T+
Annual volume
99.999%
Historical uptime
135+
Currencies supported
500M+
Daily API queries
Presets:
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/gradient-mesh-hero.json"
Props
TypeScript props supported by <GradientMeshHero />.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultPreset | string | 'stripe-classic' | Initial color preset id ('stripe-classic', 'neon-cyber', 'sunset-ray', 'deep-aurora'). |
| enableClipPath | boolean | true | Whether to apply the diagonal polygon bottom clip-path. |
| className | string | — | Optional CSS classes to apply to the root container. |
| preset | "aurora" | "sunset" | "neon" | "ocean" | — | Active color gradient palette preset for background blobs |
| headline | string | — | Main headline text rendered in the hero section |
| description | string | — | Subtitle or supporting paragraph under the headline |
| primaryCtaText | string | — | Label for the primary call-to-action button |
| secondaryCtaText | string | — | Label for the secondary action button |
Key Features
- Angled flowing gradient mesh with signature Stripe diagonal bottom clip-path (`polygon(0 0, 100% 0, 100% 88%, 0 100%)`).
- Layered organic animated color blobs (violet, indigo, cyan, vermilion, amber) drifting smoothly.
- Integrated hero typography, feature pill badge, dual action CTAs, and live telemetry metric strip.
- Live interactive stage controls for color presets, drift cycle duration, blur radii, and clip-path toggling.
Keyboard & Accessibility
- Subtle CSS keyframe animations optimized for GPU compositing with low CPU overhead.
- High contrast hero copy (WCAG AAA against the dark backdrop overlay).
- All interactive preset buttons and sliders include descriptive labels and keyboard navigation.