### Install Facehash

Source: https://www.facehash.dev

Command to install the package via npm.

```bash
$ npm i facehash
```

--------------------------------

### Avatar Wrapper Component

Source: https://www.facehash.dev

Example of using an Avatar wrapper component for handling image loading states and fallbacks.

```APIDOC
## Avatar Wrapper Component

### Description
This example demonstrates how to create a reusable `Avatar` component that utilizes `Facehash` and handles image loading states with fallbacks.

### Usage
```tsx
import { Avatar, AvatarImage, AvatarFallback } from "facehash";

<Avatar>
  <AvatarImage src="/photo.jpg" />
  <AvatarFallback name="anthony" />
</Avatar>
```

### Explanation
- The `Avatar` component acts as a container.
- `AvatarImage` is used to specify the `src` of an image.
- `AvatarFallback` uses the `name` prop to render a `Facehash` avatar if the image fails to load or is not available.
```

--------------------------------

### Next.js API Route Handler

Source: https://www.facehash.dev

Setup for generating avatar images via a Next.js API route.

```typescript
// app/api/avatar/route.ts
import { toFacehashHandler } from "facehash/next";

export const { GET } = toFacehashHandler();
```

```html
// use it anywhere you need a URL
<img src="/api/avatar?name=john" />

// raw svg for icons, favicons, or browser UI
https://yoursite.com/api/avatar?name=john&format=svg&pose=front
```

--------------------------------

### ShowInitial Prop Usage

Source: https://www.facehash.dev

Toggling the display of the initial letter.

```tsx
<Facehash name="facehash" showInitial={true} />
<Facehash name="facehash" showInitial={false} />
```

--------------------------------

### Name Prop Usage

Source: https://www.facehash.dev

Demonstrates how the name prop generates unique faces.

```tsx
import { Facehash } from "facehash";

<Facehash name="alice" />
<Facehash name="bob" />
<Facehash name="charlie" />
```

--------------------------------

### Next.js Image Route Handler

Source: https://www.facehash.dev

Set up a Next.js API route to generate avatar images (PNG or SVG) on demand.

```APIDOC
## GET /api/avatar

### Description
This Next.js API route handler generates avatar images based on query parameters.

### Method
GET

### Endpoint
/api/avatar

### Parameters
#### Query Parameters
- **name** (string) - Required - The name to generate an avatar for.
- **format** (string) - Optional - The image format. Options: "png" (default), "svg".
- **size** (number) - Optional - The size of the avatar in pixels. Defaults to 40.
- **colors** (array) - Optional - An array of color strings to use for the avatar.
- **intensity3d** (string) - Optional - The intensity of the 3D effect. Options: "none", "subtle", "medium", "dramatic". Defaults to "dramatic".
- **showInitial** (boolean) - Optional - Whether to show the initial of the name. Defaults to true.
- **variant** (string) - Optional - The variant of the avatar. Options: "gradient", "solid". Defaults to "gradient".
- **enableBlink** (boolean) - Optional - Whether to enable blinking animation. Defaults to false.
- **pose** (string) - Optional - The pose of the avatar, used for SVG output. Example: "front".

### Request Example
```
// use it anywhere you need a URL
<img src="/api/avatar?name=john" />

// raw svg for icons, favicons, or browser UI
https://yoursite.com/api/avatar?name=john&format=svg&pose=front
```

### Response
#### Success Response (200)
- **image** (Buffer or string) - The generated avatar image in PNG or SVG format.
```

--------------------------------

### Facehash Component Props

Source: https://www.facehash.dev

Detailed explanation of the available props for the Facehash component.

```APIDOC
## Facehash Component Props

### name
- **Type**: `string`
- **Description**: The input string used to generate the unique face. The same name will always produce the same face.
- **Example**: `<Facehash name="alice" />`

### size
- **Type**: `number`
- **Description**: The size of the avatar in pixels. Common values are 32, 48, 64.
- **Default**: `40`
- **Example**: `<Facehash name="facehash" size={64} />`

### colors
- **Type**: `string[]`
- **Description**: An array of color strings (e.g., hex codes) to be used for the avatar's features. If not provided, a default color palette is used.
- **Example**: `<Facehash name="facehash" colors={["#264653", "#2a9d8f", "#e9c46a"]} />`

### intensity3d
- **Type**: `"none" | "subtle" | "medium" | "dramatic"`
- **Description**: Controls the intensity of the 3D effect on the avatar.
- **Default**: `"dramatic"`
- **Example**: `<Facehash name="facehash" intensity3d="subtle" />`

### showInitial
- **Type**: `boolean`
- **Description**: Determines whether to display the initial letter of the `name` prop on the avatar.
- **Default**: `true`
- **Example**: `<Facehash name="facehash" showInitial={false} />`

### variant
- **Type**: `"gradient" | "solid"`
- **Description**: Specifies the background variant of the avatar.
- **Default**: `"gradient"`
- **Example**: `<Facehash name="facehash" variant="solid" />`

### enableBlink
- **Type**: `boolean`
- **Description**: Enables or disables a subtle blinking animation for the avatar's eyes.
- **Default**: `false`
- **Example**: `<Facehash name="facehash" enableBlink />`

### onRenderMouth
- **Type**: `() => React.ReactNode`
- **Description**: A callback function that allows you to provide a custom React node to render the avatar's mouth. Useful for custom animations or elements like spinners.
- **Example**: `<Facehash name="loading" onRenderMouth={() => <Spinner />} />`

### className
- **Type**: `string`
- **Description**: Allows applying custom CSS classes for styling the avatar component. Can be used with utility-first CSS frameworks like Tailwind CSS.
- **Example**: `<Facehash name="ghost" className="text-white" />`
```

--------------------------------

### EnableBlink Prop Usage

Source: https://www.facehash.dev

Enabling the blink animation.

```tsx
<Facehash name="facehash" enableBlink />
<Facehash name="alice" enableBlink />
<Facehash name="bob" enableBlink />
```

--------------------------------

### Variant Prop Usage

Source: https://www.facehash.dev

Switching between gradient and solid styles.

```tsx
<Facehash name="facehash" variant="gradient" />
<Facehash name="facehash" variant="solid" />
```

--------------------------------

### Avatar with Fallback

Source: https://www.facehash.dev

Using Facehash as a fallback for image components.

```tsx
import { Avatar, AvatarImage, AvatarFallback } from "facehash";

<Avatar>
  <AvatarImage src="/photo.jpg" />
  <AvatarFallback name="anthony" />
</Avatar>
```

--------------------------------

### Facehash Component Usage

Source: https://www.facehash.dev

Basic usage of the Facehash component in a React application.

```APIDOC
## POST /api/users

### Description
This endpoint is used to create a new user.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Query Parameters
- **name** (string) - Required - The name to generate an avatar for.
- **size** (number) - Optional - The size of the avatar in pixels. Defaults to 40.
- **colors** (array) - Optional - An array of color strings to use for the avatar.
- **intensity3d** (string) - Optional - The intensity of the 3D effect. Options: "none", "subtle", "medium", "dramatic". Defaults to "dramatic".
- **showInitial** (boolean) - Optional - Whether to show the initial of the name. Defaults to true.
- **variant** (string) - Optional - The variant of the avatar. Options: "gradient", "solid". Defaults to "gradient".
- **enableBlink** (boolean) - Optional - Whether to enable blinking animation. Defaults to false.
- **onRenderMouth** (function) - Optional - A callback function to render a custom mouth.
- **className** (string) - Optional - CSS classes to apply to the avatar for styling.

### Request Example
```json
{
  "example": "<Facehash name=\"agent-47\" size={48} />"
}
```

### Response
#### Success Response (200)
- **avatar** (string) - The generated avatar component or image URL.

#### Response Example
```json
{
  "example": "<Facehash name=\"agent-47\" size={48} />"
}
```
```

--------------------------------

### Styling with Tailwind

Source: https://www.facehash.dev

Applying Tailwind classes and creating a reusable wrapper component.

```tsx
// Style face color and font with Tailwind classes
<Facehash name="ghost" className="text-white" />

// For app-wide defaults, create a wrapper with tailwind-merge:
import { Facehash, type FacehashProps } from "facehash";
import { cn } from "@/lib/utils";

export function Avatar({ className, ...props }: FacehashProps) {
  return (
    <Facehash
      className={cn("text-black font-pixel font-bold", className)}
      {...props}
    />
  );
}

// Now overrides work naturally:
<Avatar name="user" />                        // defaults
<Avatar name="user" className="text-red-500" /> // red color
```

--------------------------------

### Render Facehash Component

Source: https://www.facehash.dev

Basic usage of the Facehash component in a React application.

```tsx
import { Facehash } from "facehash";

<Facehash name="agent-47" size={48} />
```

--------------------------------

### Size Prop Usage

Source: https://www.facehash.dev

Adjusting the avatar dimensions using the size prop.

```tsx
<Facehash name="facehash" size={32} />
<Facehash name="facehash" size={48} />
<Facehash name="facehash" size={64} />
```

--------------------------------

### OnRenderMouth Prop Usage

Source: https://www.facehash.dev

Customizing the mouth rendering, useful for loading or status states.

```tsx
<Facehash name="loading" onRenderMouth={() => <Spinner />} />
<Facehash name="thinking" enableBlink onRenderMouth={() => <Spinner />} />
```

--------------------------------

### Colors Prop Usage

Source: https://www.facehash.dev

Customizing the color palette for the avatar.

```tsx
<Facehash name="facehash" colors={["#264653", "#2a9d8f", "#e9c46a"]} />
```

--------------------------------

### Intensity3D Prop Usage

Source: https://www.facehash.dev

Controlling the 3D effect intensity.

```tsx
<Facehash name="facehash" intensity3d="none" />
<Facehash name="facehash" intensity3d="subtle" />
<Facehash name="facehash" intensity3d="dramatic" />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.