> ## 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.

# Widgets Overview

> Architecture, Registry Map, Categories, and Custom Configurations

# Widgets Overview

GitAscii comes with over **40 built-in widget renderers** categorized into functional suites. Every widget adheres to a unified rendering signature and receives the widget configuration, normalized GitHub data, and global theme styles.

## The Widget Architecture

```
WidgetInstance (JSON)
      ↓
Registry Map (`REGISTRY_MAP.get(widgetId)`)
      ↓
WidgetRendererFn (Pure TypeScript function)
      ↓
renderWidgetSvg (Frame, Theme Decorators, Animation & CSS Keyframes)
      ↓
SVG Node Snippet
```

### Renderer Function Signature

Every widget renderer in GitAscii is a pure function matching this type signature:

```typescript theme={null}
export type WidgetRendererFn = (
  widget: WidgetInstance,
  data: NormalizedGitHubData,
  globalStyles: GlobalStyles,
  forceStatic?: boolean
) => string
```

***

## Widget Categories

<CardGroup cols={3}>
  <Card title="Essential Widgets" icon="star" href="/widgets/header">
    Header, Avatar, Bio, Neofetch Terminal Info, Divider, Footer.
  </Card>

  <Card title="Interactive & ASCII" icon="terminal" href="/widgets/ascii-art">
    Image-to-ASCII Converter, ASCII Text Banner, Tech Stack Icons, Pokémon Card.
  </Card>

  <Card title="Stats & Metrics" icon="chart-simple" href="/widgets/stats">
    Live GitHub Stats, Top Languages Bar/Donut, Featured Repositories, Social Badges.
  </Card>

  <Card title="GodProfile Suite" icon="sparkles" href="/widgets/godprofile-terminal">
    Tree Terminal, Marquee Pill Strip, Neural Network, Trophies, WakaTime, 3D Globe.
  </Card>

  <Card title="ASCII Profile Suite" icon="microchip" href="/widgets/asciiprofile-portrait">
    Monochrome Typing Portrait, Neofetch Info Card, Calendar ASCII Heatmap.
  </Card>

  <Card title="Control Plane Suite" icon="network-wired" href="/widgets/controlplane-system-loop">
    System Loop, Command Deck, Signal Grid, Metro Map, Bento, Blueprint, Constellation.
  </Card>

  <Card title="Codeweb Aura Suite" icon="galaxy" href="/widgets/codeweb-hero-orbit">
    Cosmic Orbit Hero, Aura Showcase Cards, Aura Bento Grid, Rotating Social Badges.
  </Card>

  <Card title="External Integrations" icon="puzzle-piece" href="/widgets/external-widgets">
    GitHub Readme Stats, Streak, Trophy, Snake, Metrics, Quotes, GitFest, Views, GHStats.
  </Card>
</CardGroup>

***

## Universal Configuration Options

In addition to custom widget options, every widget supports these universal parameters in `widget.config`:

<ResponseField name="backgroundColor" type="string" default="globalStyles.backgroundColor">
  Card fill color.
</ResponseField>

<ResponseField name="borderColor" type="string" default="globalStyles.borderColor">
  Card perimeter stroke color.
</ResponseField>

<ResponseField name="textColor" type="string" default="globalStyles.textColor">
  Primary text color within the widget.
</ResponseField>

<ResponseField name="accentColor" type="string" default="globalStyles.accentColor">
  Signature highlight color for icons, borders, and emphasis strings.
</ResponseField>

<ResponseField name="borderRadius" type="number" default="globalStyles.borderRadius">
  Card border radius in pixels.
</ResponseField>

<ResponseField name="hideBorder" type="boolean" default="false">
  When `true`, sets `strokeWidth = 0` to remove the boundary border line.
</ResponseField>

<ResponseField name="hideDecorations" type="boolean" default="false">
  When `true`, removes theme-specific corner elements (e.g. Dracula dots, Cyberpunk corner brackets).
</ResponseField>

<ResponseField name="animationType" type="AnimationType" default="none">
  Entrance animation: `none`, `fade-in`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `zoom-in`, `zoom-out`, `flip-x`, `flip-y`, `typewriter`, `glitch`, `scan-lines`.
</ResponseField>

<ResponseField name="animationDuration" type="number" default="1500">
  Animation duration in milliseconds.
</ResponseField>

<ResponseField name="animationDelay" type="number" default="0">
  Delay in milliseconds before the animation triggers.
</ResponseField>

<ResponseField name="animationEasing" type="AnimationEasing" default="ease-out">
  Easing timing function: `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear`, `spring`.
</ResponseField>