Split Gradient Hero

Community Tier (Free & Open Source)hero
>npx @shavin/cli add hero-split-gradient
Developer Preview

Accelerate your engineering workflow with automated tokens.

Eliminate design inconsistencies. Every primitive strictly abides by WCAG AAA standards.

Zero Config

100% TypeScript

WCAG AAA

Installation via CLI

Add this block directly into your project codebase with all dependencies and tokens resolved:

npx @shavin/cli add hero-split-gradient

Token & Spatial Architecture

  • 100% Token Compliant: Zero raw hex colors or arbitrary values; remaps seamlessly in dark and light modes.
  • Concentric Radius Law: Nested containers maintain R_inner = max(0, R_outer - P) for geometric harmony.
  • Multi-Device Responsive: Designed for Desktop (1280px+), Tablet (768px), and Mobile (375px) breakpoints.
Tags:#hero#split#product-preview
Configure Theme
Theme
Accent Color
Custom
Gray Family
Appearance
Radius
Scaling
Panel Style
Heading Font
Body Font