51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T492a,"use client" import * as React from "react" import type { SVGProps } from "react" import { Dithering } from "@paper-design/shaders-react" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" const MemoizedDithering = React.memo(Dithering) type DitheringProps = React.ComponentProps type DitheringIcon = React.ComponentType> export interface HeroDitheringTechItem { name: string version?: string icon?: DitheringIcon } export interface HeroDitheringCTAProps { label: React.ReactNode href: string target?: React.HTMLAttributeAnchorTarget rel?: string onClick?: React.MouseEventHandler className?: string buttonClassName?: string } export interface HeroDitheringRootProps extends Omit, "title"> { srTitle?: string title?: React.ReactNode subtitle?: React.ReactNode description?: React.ReactNode showCta?: boolean ctaProps?: Partial renderCta?: (defaultCta: React.ReactNode) => React.ReactNode showBadges?: boolean techStack?: HeroDitheringTechItem[] renderBadge?: ( tech: HeroDitheringTechItem, index: number, defaultBadge: React.ReactNode ) => React.ReactNode desktopShaderProps?: Partial mobileShaderProps?: Partial } export interface HeroDitheringHeadingProps extends Omit, "title"> { title?: React.ReactNode subtitle?: React.ReactNode headingClassName?: string } export interface HeroDitheringDescriptionProps extends React.ComponentPropsWithoutRef<"div"> { description?: React.ReactNode descriptionClassName?: string } export interface HeroDitheringActionsProps extends React.ComponentPropsWithoutRef<"div"> { showCta?: boolean ctaProps?: Partial renderCta?: (defaultCta: React.ReactNode) => React.ReactNode } export interface HeroDitheringBadgesProps extends React.ComponentPropsWithoutRef<"div"> { showBadges?: boolean techStack?: HeroDitheringTechItem[] renderBadge?: ( tech: HeroDitheringTechItem, index: number, defaultBadge: React.ReactNode ) => React.ReactNode } export interface HeroDitheringVisualProps extends React.ComponentPropsWithoutRef<"div"> { desktopShaderProps?: Partial desktopClassName?: string } export interface HeroDitheringMobileVisualProps extends React.ComponentPropsWithoutRef<"div"> { mobileShaderProps?: Partial } export interface HeroDitheringProps extends HeroDitheringRootProps { containerClassName?: string contentClassName?: string headingWrapClassName?: string headingClassName?: string descriptionWrapClassName?: string descriptionClassName?: string ctaWrapClassName?: string badgesWrapClassName?: string visualClassName?: string mobileVisualClassName?: string } interface HeroDitheringContextValue { srTitle: string title: React.ReactNode subtitle: React.ReactNode description: React.ReactNode showCta: boolean mergedCtaProps: HeroDitheringCTAProps renderCta?: (defaultCta: React.ReactNode) => React.ReactNode showBadges: boolean techStack: HeroDitheringTechItem[] renderBadge?: HeroDitheringBadgesProps["renderBadge"] mergedDesktopShaderProps: Partial mergedMobileShaderProps: Partial } const defaultDesktopShaderProps: Partial = { width: 1280, height: 720, colorBack: "#000000", colorFront: "#00b3ff", shape: "swirl", type: "4x4", size: 2, speed: 1, scale: 0.6, } const defaultMobileShaderProps: Partial = { colorBack: "#00000000", colorFront: "#00b3ff", shape: "swirl", size: 2, speed: 0.85, scale: 0.52, type: "4x4", style: { height: "100%", width: "100%" }, } const defaultCtaProps: HeroDitheringCTAProps = { label: "Check it out today ", href: "https://aisdkagents.com", target: "_blank", rel: "noopener noreferrer", } const defaultDescription = ( <> Full-stack vercel ai sdk patterns for workflows, tool calling, and agent orchestration. Built with{" "} ai sdk v6 and{" "} shadcn/ui. Headless, themable, practical. ) const defaultTechStack: HeroDitheringTechItem[] = [ { name: "Next.js", version: "v16", icon: NextjsIcon, }, { name: "AI SDK", version: "v6", icon: AISDKIcon, }, ] const HeroDitheringContext = React.createContext< HeroDitheringContextValue | undefined >(undefined) function useHeroDitheringContext() { const context = React.useContext(HeroDitheringContext) if (!context) { throw new Error( "HeroDithering components must be used within HeroDitheringRoot" ) } return context } export function useHeroDithering() { return useHeroDitheringContext() } export const HeroDitheringRoot = React.forwardRef< HTMLElement, HeroDitheringRootProps >( ( { className, children, srTitle = "AI SDK Agents", title = AI SDK Agents, subtitle = "Copy and Paste", description = defaultDescription, showCta = true, ctaProps, renderCta, showBadges = true, techStack = defaultTechStack, renderBadge, desktopShaderProps, mobileShaderProps, ...props }, ref ) => { const mergedCtaProps = React.useMemo( () => ({ ...defaultCtaProps, ...ctaProps, }), [ctaProps] ) const mergedDesktopShaderProps = React.useMemo( () => ({ ...defaultDesktopShaderProps, ...desktopShaderProps, }), [desktopShaderProps] ) const mergedMobileShaderProps = React.useMemo( () => ({ ...defaultMobileShaderProps, ...mobileShaderProps, style: { ...(defaultMobileShaderProps.style as React.CSSProperties), ...(mobileShaderProps?.style as React.CSSProperties | undefined), }, }), [mobileShaderProps] ) const contextValue = React.useMemo( () => ({ srTitle, title, subtitle, description, showCta, mergedCtaProps, renderCta, showBadges, techStack, renderBadge, mergedDesktopShaderProps, mergedMobileShaderProps, }), [ srTitle, title, subtitle, description, showCta, mergedCtaProps, renderCta, showBadges, techStack, renderBadge, mergedDesktopShaderProps, mergedMobileShaderProps, ] ) return (

{srTitle}

{children}

) } ) HeroDitheringRoot.displayName = "HeroDitheringRoot" export function HeroDitheringContainer({ className, ...props }: React.ComponentPropsWithoutRef<"div">) { return (

) } export function HeroDitheringContent({ className, ...props }: React.ComponentPropsWithoutRef<"div">) { return (

) } export function HeroDitheringHeading({ className, title, subtitle, headingClassName, children, ...props }: HeroDitheringHeadingProps) { const context = useHeroDitheringContext() const resolvedTitle = title ?? context.title const resolvedSubtitle = subtitle ?? context.subtitle return (

{children ?? (

{resolvedTitle}
{resolvedSubtitle}

)}

) } export function HeroDitheringDescription({ className, description, descriptionClassName, children, ...props }: HeroDitheringDescriptionProps) { const context = useHeroDitheringContext() const resolvedDescription = description ?? context.description return (

{children ?? (

{resolvedDescription}

)}

) } export function HeroDitheringActions({ className, showCta, ctaProps, renderCta, children, ...props }: HeroDitheringActionsProps) { const context = useHeroDitheringContext() const shouldShowCta = showCta ?? context.showCta const resolvedCtaProps = { ...context.mergedCtaProps, ...ctaProps } const resolvedRenderCta = renderCta ?? context.renderCta if (!shouldShowCta) { return null } const defaultCta = return (

{children ?? (resolvedRenderCta ? resolvedRenderCta(defaultCta) : defaultCta)}

) } export function HeroDitheringCTA({ label, href, target, rel, onClick, className, buttonClassName, }: HeroDitheringCTAProps) { return (

) } export function HeroDitheringBadges({ className, showBadges, techStack, renderBadge, ...props }: HeroDitheringBadgesProps) { const context = useHeroDitheringContext() const shouldShowBadges = showBadges ?? context.showBadges const resolvedTechStack = techStack ?? context.techStack const resolvedRenderBadge = renderBadge ?? context.renderBadge if (!shouldShowBadges) { return null } return (

{resolvedTechStack.map((tech, index) => { const Icon = tech.icon const defaultBadge = ( {Icon ? : null} {tech.name} {tech.version ? ( {tech.version} ) : null} ) if (resolvedRenderBadge) { return ( {resolvedRenderBadge(tech, index, defaultBadge)} ) } return defaultBadge })}

) } export function HeroDitheringVisual({ className, desktopClassName, desktopShaderProps, ...props }: HeroDitheringVisualProps) { const context = useHeroDitheringContext() const resolvedDesktopShaderProps = { ...context.mergedDesktopShaderProps, ...desktopShaderProps, } return ( ) } export function HeroDitheringMobileVisual({ className, mobileShaderProps, ...props }: HeroDitheringMobileVisualProps) { const context = useHeroDitheringContext() const resolvedMobileShaderProps = { ...context.mergedMobileShaderProps, ...mobileShaderProps, style: { ...(context.mergedMobileShaderProps.style as React.CSSProperties), ...(mobileShaderProps?.style as React.CSSProperties | undefined), }, } return (

) } export function HeroDithering({ containerClassName, contentClassName, headingWrapClassName, headingClassName, descriptionWrapClassName, descriptionClassName, ctaWrapClassName, badgesWrapClassName, visualClassName, mobileVisualClassName, ...props }: HeroDitheringProps) { return (

) } export function AISDKIcon(props: SVGProps) { return ( ) } export function NextjsIcon(props: SVGProps) { const id = React.useId() const maskId = `${id}-mask` const paint0Id = `${id}-paint0` const paint1Id = `${id}-paint1` return ( ) } export default HeroDithering 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@paper-design/shaders-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40paper-design%2Fshaders-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@paper-design/shaders-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@cult-ui","registryDependencies":["badge","button"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/hero-dithering.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]

{srTitle}

{resolvedTitle} {resolvedSubtitle}

{resolvedTitle}
{resolvedSubtitle}