NewAI SDK Agents

Hero Static Radial Gradient

PreviousNext

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

Default

AI SDK Agents

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.

Check it out today
Next.jsNext.jsv16
AI SDKAI SDKv6

Configured Via Props

Composable hero

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.jsNext.jsv16
AI SDKAI SDKv6

Installation

pnpm dlx shadcn@latest add https://cult-ui.com/r/hero-static-radial-gradient.json

Usage

import {
  HeroStaticRadialGradientRoot,
  HeroStaticRadialGradientContainer,
  HeroStaticRadialGradientContent,
  HeroStaticRadialGradientHeading,
  HeroStaticRadialGradientDescription,
  HeroStaticRadialGradientActions,
  HeroStaticRadialGradientBadges,
  HeroStaticRadialGradientVisual,
  HeroStaticRadialGradientMobileVisual,
} from "@/components/ui/hero-static-radial-gradient"
export default function Page() {
  return (
    <main className="min-h-screen">
      <HeroStaticRadialGradientRoot>
        <HeroStaticRadialGradientContainer>
          <HeroStaticRadialGradientContent>
            <HeroStaticRadialGradientHeading />
            <HeroStaticRadialGradientDescription />
            <HeroStaticRadialGradientActions />
            <div
              className="flex justify-center lg:justify-start"
              data-slot="hero-static-radial-gradient-badges-wrap"
            >
              <HeroStaticRadialGradientBadges />
            </div>
          </HeroStaticRadialGradientContent>
          <HeroStaticRadialGradientVisual />
        </HeroStaticRadialGradientContainer>
        <HeroStaticRadialGradientMobileVisual />
      </HeroStaticRadialGradientRoot>
    </main>
  )
}

What You Get

  • Split hero layout with copy and CTA on the left and StaticRadialGradient shader visual on the right.
  • Memoized StaticRadialGradient render path for stable re-renders.
  • Desktop and mobile shader variants with configurable colors, radius, focal point, falloff, distortion, and grain.
  • 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

ExportTypeDescription
HeroStaticRadialGradientRootHeroStaticRadialGradientRootPropsContext provider and root section primitive
HeroStaticRadialGradientContainerdiv primitiveMain hero grid wrapper
HeroStaticRadialGradientContentdiv primitiveLeft-side content column primitive
HeroStaticRadialGradientHeadingHeroStaticRadialGradientHeadingPropsHeading block primitive (title + subtitle)
HeroStaticRadialGradientDescriptionHeroStaticRadialGradientDescriptionPropsDescription block primitive
HeroStaticRadialGradientActionsHeroStaticRadialGradientActionsPropsCTA wrapper primitive
HeroStaticRadialGradientCTAHeroStaticRadialGradientCTAPropsReusable CTA slot component
HeroStaticRadialGradientBadgesHeroStaticRadialGradientBadgesPropsReusable badge row primitive
HeroStaticRadialGradientVisualHeroStaticRadialGradientVisualPropsDesktop visual shader wrapper primitive
HeroStaticRadialGradientMobileVisualHeroStaticRadialGradientMobileVisualPropsMobile visual shader wrapper primitive
HeroStaticRadialGradient / defaultHeroStaticRadialGradientPropsConvenience assembled version built from primitives
useHeroStaticRadialGradient() => HeroStaticRadialGradientContextValueHook for context-driven custom composition

Props

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

PropTypeDefaultDescription
srTitlestring"AI SDK Agents"Screen-reader-only heading text
titleReactNode"AI SDK Agents"First line of visible heading
subtitleReactNode"Copy and Paste"Second line of visible heading
descriptionReactNodebuilt-in marketing copySupporting paragraph content
showCtabooleantrueToggle CTA rendering
ctaPropsPartial<HeroStaticRadialGradientCTAProps>built-in CTAOverride CTA label/link/target/rel/click handler
renderCta(defaultCta) => ReactNodeundefinedWrap or replace default CTA node
showBadgesbooleantrueToggle tech badges
techStackHeroStaticRadialGradientTechItem[]Next.js + AI SDKBadge data source
renderBadge(tech, index, defaultBadge) => ReactNodeundefinedCustom badge rendering hook
desktopShaderPropsPartial<StaticRadialGradientProps>built-in desktop shader settingsOverride desktop shader values
mobileShaderPropsPartial<StaticRadialGradientProps>built-in mobile shader settingsOverride mobile shader values
classNamestringundefinedRoot section class override

Shader props (StaticRadialGradient)

Passed via desktopShaderProps and mobileShaderProps. Common options:

PropTypeDescription
widthnumberCanvas width (e.g. 1280)
heightnumberCanvas height (e.g. 720)
colorsstring[]Array of hex colors (e.g. ["#ed40b3", "#adfa1e", "#6ef7cc"])
colorBackstringBackground color (e.g. "#ffffff00" for transparent)
radiusnumberGradient radius (e.g. 0.98)
focalDistancenumberFocal distance (e.g. 0)
focalAnglenumberFocal angle (e.g. 0)
falloffnumberFalloff (e.g. 0.9)
mixingnumberColor mixing (e.g. 0.7)
distortionnumberDistortion amount (e.g. 0)
distortionShiftnumberDistortion shift (e.g. 0)
distortionFreqnumberDistortion frequency (e.g. 12)
grainMixernumberGrain mix (e.g. 1)
grainOverlaynumberGrain overlay (e.g. 0.5)

Customization Patterns

Tune radial gradient colors and shape

Use shader override props without forking the component:

<HeroStaticRadialGradientRoot
  desktopShaderProps={{
    width: 1280,
    height: 720,
    colors: ["#ed40b3", "#adfa1e", "#6ef7cc"],
    colorBack: "#ffffff00",
    radius: 0.98,
    focalDistance: 0,
    focalAngle: 0,
    falloff: 0.9,
    mixing: 0.7,
    distortion: 0,
    distortionShift: 0,
    distortionFreq: 12,
    grainMixer: 1,
    grainOverlay: 0.5,
  }}
  mobileShaderProps={{
    colors: ["#ed40b3", "#adfa1e", "#6ef7cc"],
    radius: 0.98,
    falloff: 0.9,
    mixing: 0.7,
  }}
>
  {/* compose primitives */}
</HeroStaticRadialGradientRoot>

Swap hero copy and CTA

Replace copy and CTA target via props:

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

Compose with slot primitives

Use primitive exports for custom layout composition:

<HeroStaticRadialGradientRoot>
  <HeroStaticRadialGradientContainer>
    <HeroStaticRadialGradientContent>
      <HeroStaticRadialGradientHeading />
      <HeroStaticRadialGradientDescription />
      <HeroStaticRadialGradientActions />
      <HeroStaticRadialGradientBadges />
    </HeroStaticRadialGradientContent>
    <HeroStaticRadialGradientVisual desktopShaderProps={{ colors: ["#006CFF", "#00d2ff", "#7c3aed"] }} />
  </HeroStaticRadialGradientContainer>
  <HeroStaticRadialGradientMobileVisual />
</HeroStaticRadialGradientRoot>

Performance Notes

  • StaticRadialGradient 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.