Hero Color Panels

Split-layout hero section with responsive ColorPanels shader visuals, CTA content, and tech stack badges.

Default

AI SDK Agents
Copy and Paste

Full-stack vercel ai sdk patterns for workflows, tool calling, and agent orchestration. Built with ai sdk v6 and shadcn/ui. Headless, themable, practical.

Check it out today

Next.jsv16

AI SDKv6

Configured Via Props

Cursor for
Marketing

Human-in-the-loop marketing copy software that helps teams draft, review, and ship high-converting campaigns with confidence.

Try NewCopy for marketing

Next.jsv16

AI SDKv6

Installation


pnpm dlx shadcn@latest add https://cult-ui.com/r/hero-color-panel.json

Usage


import {
  HeroColorPanelsRoot,
  HeroColorPanelsContainer,
  HeroColorPanelsContent,
  HeroColorPanelsHeading,
  HeroColorPanelsDescription,
  HeroColorPanelsActions,
  HeroColorPanelsBadges,
  HeroColorPanelsVisual,
  HeroColorPanelsMobileVisual,
} from "@/components/ui/hero-color-panel"


export default function Page() {
  return (
    <main className="min-h-screen">
      <HeroColorPanelsRoot>
        <HeroColorPanelsContainer>
          <HeroColorPanelsContent>
            <HeroColorPanelsHeading />
            <HeroColorPanelsDescription />
            <HeroColorPanelsActions />
            <div
              className="flex justify-center lg:justify-start"
              data-slot="hero-colorpanels-badges-wrap"
            >
              <HeroColorPanelsBadges />
            </div>
          </HeroColorPanelsContent>
          <HeroColorPanelsVisual />
        </HeroColorPanelsContainer>
        <HeroColorPanelsMobileVisual />
      </HeroColorPanelsRoot>
    </main>
  )
}

What You Get

Split hero layout with copy and CTA on the left and ColorPanels shader visual on the right.
Memoized ColorPanels render path for stable re-renders.
Desktop and mobile shader variants with configurable colors, density, angles, blur, and animation.
Built-in badge row for highlighting stack metadata.
Works as a full-width section and can be dropped into landing pages directly.

API Reference

Exports

Export	Type	Description
`HeroColorPanelsRoot`	`HeroColorPanelsRootProps`	Context provider and root section primitive
`HeroColorPanelsContainer`	`div` primitive	Main hero grid wrapper
`HeroColorPanelsContent`	`div` primitive	Left-side content column primitive
`HeroColorPanelsHeading`	`HeroColorPanelsHeadingProps`	Heading block primitive (title + subtitle)
`HeroColorPanelsDescription`	`HeroColorPanelsDescriptionProps`	Description block primitive
`HeroColorPanelsActions`	`HeroColorPanelsActionsProps`	CTA wrapper primitive
`HeroColorPanelsCTA`	`HeroColorPanelsCTAProps`	Reusable CTA slot component
`HeroColorPanelsBadges`	`HeroColorPanelsBadgesProps`	Reusable badge row primitive
`HeroColorPanelsVisual`	`HeroColorPanelsVisualProps`	Desktop visual shader wrapper primitive
`HeroColorPanelsMobileVisual`	`HeroColorPanelsMobileVisualProps`	Mobile visual shader wrapper primitive
`HeroColorPanels` / `default`	`HeroColorPanelsProps`	Convenience assembled version built from primitives
`useHeroColorPanels`	`() => HeroColorPanelsContextValue`	Hook for context-driven custom composition

Props

HeroColorPanelsRoot owns shared defaults, normalized shader props, and composition state.

Prop	Type	Default	Description
`srTitle`	`string`	`"AI SDK Agents"`	Screen-reader-only heading text
`title`	`ReactNode`	`"AI SDK Agents"`	First line of visible heading
`subtitle`	`ReactNode`	`"Copy and Paste"`	Second line of visible heading
`description`	`ReactNode`	built-in marketing copy	Supporting paragraph content
`showCta`	`boolean`	`true`	Toggle CTA rendering
`ctaProps`	`Partial<HeroColorPanelsCTAProps>`	built-in CTA	Override CTA label/link/target/rel/click handler
`renderCta`	`(defaultCta) => ReactNode`	`undefined`	Wrap or replace default CTA node
`showBadges`	`boolean`	`true`	Toggle tech badges
`techStack`	`HeroColorPanelsTechItem[]`	Next.js + AI SDK	Badge data source
`renderBadge`	`(tech, index, defaultBadge) => ReactNode`	`undefined`	Custom badge rendering hook
`desktopShaderProps`	`Partial<ColorPanelsProps>`	built-in desktop shader settings	Override desktop shader values
`mobileShaderProps`	`Partial<ColorPanelsProps>`	built-in mobile shader settings	Override mobile shader values
`className`	`string`	`undefined`	Root section class override

Shader props (ColorPanels)

Passed via desktopShaderProps and mobileShaderProps. Common options:

Prop	Type	Description
`width`	`number`	Canvas width (e.g. 1280)
`height`	`number`	Canvas height (e.g. 720)
`colors`	`string[]`	Array of hex colors (e.g. `["#ed40b3", "#6ef7cc", "#adfa1e", "#b054de"]`)
`colorBack`	`string`	Background color (e.g. `"#ffffff00"` for transparent)
`density`	`number`	Panel density (e.g. 5.03)
`angle1`	`number`	First angle (e.g. 0.68)
`angle2`	`number`	Second angle (e.g. 0.28)
`length`	`number`	Length (e.g. 1.13)
`edges`	`boolean`	Enable edges
`blur`	`number`	Blur amount (e.g. 0.25)
`fadeIn`	`number`	Fade-in (e.g. 0.85)
`fadeOut`	`number`	Fade-out (e.g. 0.3)
`gradient`	`number`	Gradient mix (e.g. 0.56)
`speed`	`number`	Animation speed (e.g. 4)
`scale`	`number`	Scale (e.g. 0.96)
`rotation`	`number`	Rotation in degrees (e.g. 180)

Customization Patterns

Tune ColorPanels colors and motion

Use shader override props without forking the component:


<HeroColorPanelsRoot
  desktopShaderProps={{
    width: 1280,
    height: 720,
    colors: ["#ed40b3", "#6ef7cc", "#adfa1e", "#b054de"],
    colorBack: "#ffffff00",
    density: 5.03,
    angle1: 0.68,
    angle2: 0.28,
    length: 1.13,
    edges: true,
    blur: 0.25,
    fadeIn: 0.85,
    fadeOut: 0.3,
    gradient: 0.56,
    speed: 4,
    scale: 0.96,
    rotation: 180,
  }}
  mobileShaderProps={{
    colors: ["#ed40b3", "#6ef7cc", "#adfa1e", "#b054de"],
    speed: 4,
    scale: 0.96,
  }}
>
  {/* compose primitives */}
</HeroColorPanelsRoot>

Swap hero copy and CTA

Replace copy and CTA target via props:


<HeroColorPanelsRoot
  title="Your Product"
  subtitle="Ship faster"
  description="Reusable hero primitive with configurable ColorPanels visuals."
  ctaProps={{
    label: "Get started",
    href: "/signup",
    target: "_self",
  }}
>
  {/* compose primitives */}
</HeroColorPanelsRoot>

Compose with slot primitives

Use primitive exports for custom layout composition:


<HeroColorPanelsRoot>
  <HeroColorPanelsContainer>
    <HeroColorPanelsContent>
      <HeroColorPanelsHeading />
      <HeroColorPanelsDescription />
      <HeroColorPanelsActions />
      <HeroColorPanelsBadges />
    </HeroColorPanelsContent>
    <HeroColorPanelsVisual desktopShaderProps={{ colors: ["#006CFF", "#00d2ff"] }} />
  </HeroColorPanelsContainer>
  <HeroColorPanelsMobileVisual />
</HeroColorPanelsRoot>

Performance Notes

ColorPanels is wrapped with memo to avoid unnecessary rerenders.
Mobile and desktop effects are rendered as separate sections so each layout can be tuned independently.
Keep the hero in client-rendered regions only ("use client" is required).

Accessibility Notes

Includes a screen-reader-only heading (sr-only) so page structure remains meaningful.
CTA link includes rel="noopener noreferrer" when opened in a new tab.
Ensure visible contrast remains sufficient if you change shader colors or text opacity.

Troubleshooting

Shader does not render

Confirm @paper-design/shaders-react is installed.
Verify this component runs in a client context.
Confirm parent containers are not clipping to zero height.

Layout looks crowded on small screens

Increase the mobile shader container height.
Reduce heading size classes or copy length.
Move badges under the fold for dense hero content.

GradientHeading Hero Dithering

100+ AI Patterns

Real world AI SDK v6 patterns. Copy and paste.

Complex AI Agents

Workflow Patterns

Tools + Artifacts

Browse Patterns