"use client" import * as React from "react" import type { SVGProps } from "react" import { LiquidMetal } from "@paper-design/shaders-react" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" const MemoizedLiquidMetal = React.memo(LiquidMetal) type LiquidMetalProps = React.ComponentProps type LiquidMetalIcon = React.ComponentType> export interface HeroLiquidMetalTechItem { name: string version?: string icon?: LiquidMetalIcon } export interface HeroLiquidMetalCTAProps { label: React.ReactNode href: string target?: React.HTMLAttributeAnchorTarget rel?: string onClick?: React.MouseEventHandler className?: string buttonClassName?: string } /** LiquidMetal shader props that can be passed at the root for convenience */ export type HeroLiquidMetalShaderOverrides = Partial< Pick< LiquidMetalProps, | "width" | "height" | "image" | "colorBack" | "colorTint" | "shape" | "repetition" | "softness" | "shiftRed" | "shiftBlue" | "distortion" | "contour" | "angle" | "speed" | "frame" | "scale" | "rotation" | "offsetX" | "offsetY" | "fit" | "originX" | "originY" | "minPixelRatio" | "maxPixelCount" > > export interface HeroLiquidMetalRootProps extends Omit, "title">, HeroLiquidMetalShaderOverrides { srTitle?: string title?: React.ReactNode subtitle?: React.ReactNode description?: React.ReactNode showCta?: boolean ctaProps?: Partial renderCta?: (defaultCta: React.ReactNode) => React.ReactNode showBadges?: boolean techStack?: HeroLiquidMetalTechItem[] renderBadge?: ( tech: HeroLiquidMetalTechItem, index: number, defaultBadge: React.ReactNode ) => React.ReactNode desktopShaderProps?: Partial mobileShaderProps?: Partial } export interface HeroLiquidMetalHeadingProps extends Omit, "title"> { title?: React.ReactNode subtitle?: React.ReactNode headingClassName?: string } export interface HeroLiquidMetalDescriptionProps extends React.ComponentPropsWithoutRef<"div"> { description?: React.ReactNode descriptionClassName?: string } export interface HeroLiquidMetalActionsProps extends React.ComponentPropsWithoutRef<"div"> { showCta?: boolean ctaProps?: Partial renderCta?: (defaultCta: React.ReactNode) => React.ReactNode } export interface HeroLiquidMetalBadgesProps extends React.ComponentPropsWithoutRef<"div"> { showBadges?: boolean techStack?: HeroLiquidMetalTechItem[] renderBadge?: ( tech: HeroLiquidMetalTechItem, index: number, defaultBadge: React.ReactNode ) => React.ReactNode } export interface HeroLiquidMetalVisualProps extends React.ComponentPropsWithoutRef<"div"> { desktopShaderProps?: Partial desktopClassName?: string } export interface HeroLiquidMetalMobileVisualProps extends React.ComponentPropsWithoutRef<"div"> { mobileShaderProps?: Partial } export interface HeroLiquidMetalProps extends HeroLiquidMetalRootProps { containerClassName?: string contentClassName?: string headingWrapClassName?: string headingClassName?: string descriptionWrapClassName?: string descriptionClassName?: string ctaWrapClassName?: string badgesWrapClassName?: string visualClassName?: string mobileVisualClassName?: string } interface HeroLiquidMetalContextValue { srTitle: string title: React.ReactNode subtitle: React.ReactNode description: React.ReactNode showCta: boolean mergedCtaProps: HeroLiquidMetalCTAProps renderCta?: (defaultCta: React.ReactNode) => React.ReactNode showBadges: boolean techStack: HeroLiquidMetalTechItem[] renderBadge?: HeroLiquidMetalBadgesProps["renderBadge"] mergedDesktopShaderProps: Partial mergedMobileShaderProps: Partial } const defaultDesktopShaderProps: Partial = { width: 1280, height: 720, image: "/cult-icon.svg", colorBack: "#ffffff00", colorTint: "#2c5d72", shape: undefined, repetition: 6, softness: 0.8, shiftRed: 1, shiftBlue: -1, distortion: 0.4, contour: 0.4, angle: 0, speed: 1, scale: 0.6, fit: "contain", } const defaultMobileShaderProps: Partial = { image: "/cult-icon.svg", colorBack: "#ffffff00", colorTint: "#2c5d72", shape: undefined, repetition: 6, softness: 0.8, shiftRed: 1, shiftBlue: -1, distortion: 0.4, contour: 0.4, angle: 0, speed: 1, scale: 0.68, fit: "contain", style: { height: "100%", width: "100%" }, } const defaultCtaProps: HeroLiquidMetalCTAProps = { 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: HeroLiquidMetalTechItem[] = [ { name: "Next.js", version: "v16", icon: NextjsIcon, }, { name: "AI SDK", version: "v6", icon: AISDKIcon, }, ] const HeroLiquidMetalContext = React.createContext< HeroLiquidMetalContextValue | undefined >(undefined) function useHeroLiquidMetalContext() { const context = React.useContext(HeroLiquidMetalContext) if (!context) { throw new Error( "HeroLiquidMetal components must be used within HeroLiquidMetalRoot" ) } return context } export function useHeroLiquidMetal() { return useHeroLiquidMetalContext() } export const HeroLiquidMetalRoot = React.forwardRef< HTMLElement, HeroLiquidMetalRootProps >(({ 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, width, height, image, colorBack, colorTint, shape, repetition, softness, shiftRed, shiftBlue, distortion, contour, angle, speed, frame, scale, rotation, offsetX, offsetY, fit, originX, originY, minPixelRatio, maxPixelCount, ...props }, ref) => { const mergedCtaProps = React.useMemo( () => ({ ...defaultCtaProps, ...ctaProps, }), [ctaProps] ) const shaderOverrides = React.useMemo((): Partial => { const overrides: Partial = {} if (width !== undefined) overrides.width = width if (height !== undefined) overrides.height = height if (image !== undefined) overrides.image = image if (colorBack !== undefined) overrides.colorBack = colorBack if (colorTint !== undefined) overrides.colorTint = colorTint if (shape !== undefined) overrides.shape = shape if (repetition !== undefined) overrides.repetition = repetition if (softness !== undefined) overrides.softness = softness if (shiftRed !== undefined) overrides.shiftRed = shiftRed if (shiftBlue !== undefined) overrides.shiftBlue = shiftBlue if (distortion !== undefined) overrides.distortion = distortion if (contour !== undefined) overrides.contour = contour if (angle !== undefined) overrides.angle = angle if (speed !== undefined) overrides.speed = speed if (frame !== undefined) overrides.frame = frame if (scale !== undefined) overrides.scale = scale if (rotation !== undefined) overrides.rotation = rotation if (offsetX !== undefined) overrides.offsetX = offsetX if (offsetY !== undefined) overrides.offsetY = offsetY if (fit !== undefined) overrides.fit = fit if (originX !== undefined) overrides.originX = originX if (originY !== undefined) overrides.originY = originY if (minPixelRatio !== undefined) overrides.minPixelRatio = minPixelRatio if (maxPixelCount !== undefined) overrides.maxPixelCount = maxPixelCount return overrides }, [ width, height, image, colorBack, colorTint, shape, repetition, softness, shiftRed, shiftBlue, distortion, contour, angle, speed, frame, scale, rotation, offsetX, offsetY, fit, originX, originY, minPixelRatio, maxPixelCount, ]) const mergedDesktopShaderProps = React.useMemo( () => ({ ...defaultDesktopShaderProps, ...shaderOverrides, ...desktopShaderProps, }), [shaderOverrides, desktopShaderProps] ) const mergedMobileShaderProps = React.useMemo( () => ({ ...defaultMobileShaderProps, ...shaderOverrides, ...mobileShaderProps, style: { ...(defaultMobileShaderProps.style as React.CSSProperties), ...(mobileShaderProps?.style as React.CSSProperties | undefined), }, }), [shaderOverrides, 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}

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

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

) } export function HeroLiquidMetalHeading({ className, title, subtitle, headingClassName, children, ...props }: HeroLiquidMetalHeadingProps) { const context = useHeroLiquidMetalContext() const resolvedTitle = title ?? context.title const resolvedSubtitle = subtitle ?? context.subtitle return (

{children ?? (

{resolvedTitle}
{resolvedSubtitle}

)}

) } export function HeroLiquidMetalDescription({ className, description, descriptionClassName, children, ...props }: HeroLiquidMetalDescriptionProps) { const context = useHeroLiquidMetalContext() const resolvedDescription = description ?? context.description return (

{children ?? (

{resolvedDescription}

)}

) } export function HeroLiquidMetalActions({ className, showCta, ctaProps, renderCta, children, ...props }: HeroLiquidMetalActionsProps) { const context = useHeroLiquidMetalContext() 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 HeroLiquidMetalCTA({ label, href, target, rel, onClick, className, buttonClassName, }: HeroLiquidMetalCTAProps) { return (

) } export function HeroLiquidMetalBadges({ className, showBadges, techStack, renderBadge, ...props }: HeroLiquidMetalBadgesProps) { const context = useHeroLiquidMetalContext() 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 HeroLiquidMetalVisual({ className, desktopClassName, desktopShaderProps, ...props }: HeroLiquidMetalVisualProps) { const context = useHeroLiquidMetalContext() const resolvedDesktopShaderProps = { ...context.mergedDesktopShaderProps, ...desktopShaderProps, } return ( ) } export function HeroLiquidMetalMobileVisual({ className, mobileShaderProps, ...props }: HeroLiquidMetalMobileVisualProps) { const context = useHeroLiquidMetalContext() const resolvedMobileShaderProps = { ...context.mergedMobileShaderProps, ...mobileShaderProps, style: { ...(context.mergedMobileShaderProps.style as React.CSSProperties), ...(mobileShaderProps?.style as React.CSSProperties | undefined), }, } return (

) } export function HeroLiquidMetal({ containerClassName, contentClassName, headingWrapClassName, headingClassName, descriptionWrapClassName, descriptionClassName, ctaWrapClassName, badgesWrapClassName, visualClassName, mobileVisualClassName, ...props }: HeroLiquidMetalProps) { 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 HeroLiquidMetal

{srTitle}

{resolvedTitle} {resolvedSubtitle}

{resolvedTitle}
{resolvedSubtitle}

Hero Liquid Metal

Instalação

Dependências

Registry dependencies