> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gitascii.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Neural Network Map Widget

> Animated topological tech stack visualization with moving signal packets

# Neural Network Map Widget (`godprofile-neural`)

The Neural Network widget organizes skills into connected category layers (e.g. Frontend, Backend, DevOps). It renders curved Bezier connection arcs and animated moving pulse particles (`<animateMotion>`) traveling between tech nodes.

## Configuration Schema

```typescript theme={null}
export interface GodprofileNeuralConfig {
  neuralTechs?: Record<string, string[]> // Mapping of category name to tech keys
  accentColor?: string                   // Default: globalStyles.accentColor || '#b6a891'
  textColor?: string                     // Default: globalStyles.textColor || '#eceff4'
}
```

<ParamField body="neuralTechs" type="Record<string, string[]>" default="{'Frontend': ['react', 'nextjs', 'tailwind'], 'Backend': ['nodejs', 'postgres', 'docker'], 'DevOps': ['git', 'github', 'linux']}">
  Categorized node layers. Each column renders vertical nodes and interconnects to subsequent columns.
</ParamField>

***

## Real Code Example

```typescript theme={null}
import { renderWidgetSvg, WidgetInstance } from '@/engine'

const neuralWidget: WidgetInstance = {
  instanceId: 'neural_01',
  widgetId: 'godprofile-neural',
  name: 'Neural Network Map',
  position: { x: 0, y: 0 },
  size: { width: 800, height: 320 },
  config: {
    neuralTechs: {
      Frontend: ['react', 'nextjs', 'tailwind'],
      Backend: ['nodejs', 'postgres', 'docker'],
      DevOps: ['git', 'github', 'linux'],
    },
    accentColor: '#c5ff4a',
  },
  locked: false,
  visible: true,
  zIndex: 1,
}

const svgOutput = renderWidgetSvg(neuralWidget, profileData, globalStyles)
```