# Recipes

Load this after [SKILL.md](SKILL.md) when you are about to write the JSX. Swap `Shdr11` / `shdr-11` for the orb you picked; every orb has the same props.

## Voice agent avatar

Map the SDK's status onto the three states. The orb glides between them.

```tsx
"use client";

import { Shdr11 } from "@/components/ui/shdr-11";

export function AgentAvatar({ status, agentSpeaking }: { status: "connecting" | "connected"; agentSpeaking: boolean }) {
  const state =
    status === "connecting" ? "thinking"
    : agentSpeaking ? "speaking"
    : "idle";

  return <Shdr11 size={320} state={state} ariaLabel="Assistant" />;
}
```

## Live audio

Feed real levels (0..1). `input` is the user's mic, `output` is the agent's voice. Omit a channel to keep its synthesized motion.

```tsx
<Shdr11 size={320} state={state} volumes={{ input: micLevel, output: ttsLevel }} />
```

## Landing hero

Idle, large, under a glass bezel. The wrapper never changes the footprint, so nothing reflows.

```tsx
<Shdr11 size={420} state="idle" wrapper="glass" />
```

## Retune one state

Merged key by key over the orb's own presets: this touches one param of one state and nothing else. Fetch https://orbkit.zzzzshawn.cloud/api/v1/components/shdr-11 for the keys.

```tsx
<Shdr11
  state={state}
  statePresets={{ thinking: { speed: 1.2 } }}
/>
```

## Fixed override

`params` wins over every state. Use it for a look that must not change with state.

```tsx
<Shdr11 state={state} params={{ speed: 0.6 }} />
```

## A gallery of orbs

Keep it under about a dozen mounted. `pauseOffscreen` is already on, so scrolling is free; the count is what matters.

```tsx
{orbs.slice(0, 12).map((Orb) => (
  <Orb key={Orb.name} size={160} state="idle" />
))}
```

## Next.js

The runtime is a client component. An orb can be rendered from a server component directly — no dynamic import, no ssr: false. It paints nothing on the server and mounts on the client.

```tsx
// app/page.tsx (server component)
import { Shdr11 } from "@/components/ui/shdr-11";

export default function Page() {
  return <Shdr11 size={280} state="idle" />;
}
```