# Custom Components

Interactive React components work in slides!

---

## Context Window Visualizer

This is a custom React component rendered inside a slide:

Try typing messages to see the context fill up!

---

## Code Blocks Work Perfectly

Here's a Vue composable example with full syntax highlighting:

```typescript
export function useCounter(initial = 0) {
  const count = ref(initial)

  const double = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  return { count, double, increment }
}
```

---

## Magic Move: Code Evolution

Watch code transform with smooth animations (press **→** to advance):

<MagicMove
  lang="typescript"
  steps={[
    `const x = 1`,
    `const x = 1
const y = 2`,
    `const x = 1
const y = 2

function add(a: number, b: number) {
  return a + b
}`,
    `const x = 1
const y = 2

function add(a: number, b: number) {
  return a + b
}

const sum = add(x, y)
console.log(sum) // 3`
  ]}
/>

Each arrow press animates the code to its next state!

---

## Mermaid Diagrams

Flowcharts render beautifully in slides:

```mermaid
graph LR
    A[Blog Post] --> B{presentation: true?}
    B -->|Yes| C[Show Toggle Button]
    B -->|No| D[Normal Post]
    C --> E[Press P]
    E --> F[Fullscreen Slides!]
```

---

## Animated Diagrams

Interactive diagrams with self-contained animations:

<SubagentDiagram
  task="Find auth files"
  files={["Auth.tsx", "auth.ts", "authService.ts"]}
/>

Click **Start** to see the Explore subagent flow animation!

---