Hero Color Panels

shader x split

Split-layout hero with WebGL shader visuals. From Cult UI.

heroshadersplitcultui

Code

hero-color-panels.tsx

export function ColorPanels() {
  return (
    <div className="flex w-full max-w-lg gap-3">
      <div className="h-24 flex-1 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 opacity-80" />
      <div className="flex h-24 flex-1 flex-col gap-3">
        <div className="h-full rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 opacity-70" />
        <div className="h-full rounded-xl bg-gradient-to-br from-orange-500 to-rose-500 opacity-60" />
      </div>
      <div className="h-24 flex-1 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-500 opacity-75" />
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Hero Color Panels component and wire it to my accent.”