SVG Animations | Jack UI

Premium animated components utilizing SVG path animation, masks, and canvas physics.

This component is used to visualize marketing workflows, audience source aggregation, or system integrations. It renders a dynamic HTML5 <canvas> watercolor wash background with fine grain and organic paper pulp textures.

Installation

bunx shadcn@latest add https://jackui.com/r/audience-hub-animation.json

npx shadcn@latest add https://jackui.com/r/audience-hub-animation.json

pnpm dlx shadcn@latest add https://jackui.com/r/audience-hub-animation.json

Usage

import AudienceHubAnimation from "@/components/jackui/svganimations/AudienceHubAnimation";

export default function Demo() {
  return (
    <AudienceHubAnimation
      animated={true}
      labels={[
        "LinkedIn Followers",
        "Post Engagers",
        "Company Page Visitors",
        "Post Commenters"
      ]}
    />
  );
}

Props

Prop	Type	Description
`labels`	`string[]`	Optional. Array of labels shown on the outer nodes. Default: `["LinkedIn Followers", "Post Engagers", "Company Page Visitors", "Post Commenters"]`
`animated`	`boolean`	Optional. Whether drawing animations should play. Default: `true`
`className`	`string`	Optional. Tailwind CSS classes to apply to wrapper. Default: `""`
`logoTextTop`	`string`	Optional. Central hub logo top text. Deprecated: replaced by isometric 3D component stack. Default: `"CORE"`
`logoTextBottom`	`string`	Optional. Central hub logo bottom text. Deprecated: replaced by isometric 3D component stack. Default: `"UI"`
`backgroundImageUrl`	`string`	Optional. Custom background image URL. Deprecated: replaced by dynamic canvas wash background.
`animationDuration`	`number`	Optional. Duration of animation loop in milliseconds. Default: `3000`
`onNodeClick`	`(id: string, label: string) => void`	Optional. Click callback handler for outer node buttons.

Neural Circuit Orchestrator

Open in

React

The library for web and native user interfaces. Next.js is built on the latest React features, including Server Components and Actions.

Next.js

The React Framework for the Web. Used by some of the world's largest companies, Next.js enables you to create high-quality web applications.

TanStack

High-quality open-source software for web developers. Headless UI, Data Fetching, Routing, and more for modern frontend apps.

Overview & Selection Guide

Displays a premium, animated Neural Circuit Grid that visually aggregates gateway sources.

Installation

bunx shadcn@latest add https://jackui.com/r/neural-circuit-orchestrator.json

npx shadcn@latest add https://jackui.com/r/neural-circuit-orchestrator.json

pnpm dlx shadcn@latest add https://jackui.com/r/neural-circuit-orchestrator.json

Usage

import NeuralCircuitOrchestrator from "@/components/jackui/svganimations/NeuralCircuitOrchestrator";
import { SiVercel } from 'react-icons/si';

export default function Demo() {
  return (
    <NeuralCircuitOrchestrator
      gatewayLabel="INITIALIZE AGENT"
      onGatewayClick={() => console.log("Gateway Activated!")}
      cards={[
        {
          id: "vercel",
          title: "Vercel",
          description: "Deploy your Next.js applications seamlessly with zero configuration.",
          icon: <SiVercel className="w-8 h-8 text-zinc-900 dark:text-white" />,
          theme: "violet"
        }
      ]}
    />
  );
}

Props

Prop	Type	Description
`className`	`string`	Optional. Custom Tailwind classes to apply to the root container.
`gatewayLabel`	`string`	Optional. Central gateway button text. Default: `"AGENT GATEWAY"`
`onGatewayClick`	`() => void`	Optional. Callback event triggered when the central gateway button is clicked.
`cards`	`OrchestratorCard[]`	Optional. Custom list of orchestrator cards to render. Defaults to a standard 3-card layout.
`onCardClick`	`(cardId: string) => void`	Optional. Callback event triggered when an individual card is clicked.
`...rest`	`React.HTMLAttributes<HTMLDivElement>`	Optional. Any standard HTML attributes passed through to the root container `div`.

OrchestratorCard Type

Property	Type	Description
`id`	`string`	Required. Unique identifier for the card and its connection track.
`title`	`string`	Required. Main title of the card.
`description`	`string`	Required. Text description explaining the card's purpose.
`href`	`string`	Optional. Action link target when the card is clicked. Default: `"#"`
`icon`	`React.ReactNode`	Optional. Custom element to render as the card's top icon.
`theme`	`"violet" \| "emerald" \| "rose"`	Optional. Selects the neon theme mapped for stroke glows and hover highlights. Default: `"violet"`