Lightning Slide VTuber Kit

Lightweight browser-only SlideVTuber toolkit for Slidev — mic-driven idle/speaking image switcher that brings your avatar to life during presentations.

Quick Start (Manual)

1. Create a Slidev project and install the addon

npm init slidev@latest
cd <your-slidev-project>
npm install lightning-slide-vtuber-kit

2. Register the addon

Edit slides.md frontmatter:

---
addons:
  - lightning-slide-vtuber-kit
---

3. Start the dev server

npm run dev

4. Configure your character

Open the built-in Setup UI in your browser:

http://localhost:3030/__LightningSlideVTuberSetup/

Upload your idle/speaking images, adjust detection settings, and copy the character ID (e.g. ch_xxxxxxxx) shown in the UI.

5. Add the component to your slide

---
addons:
  - lightning-slide-vtuber-kit
---

# My Presentation

<SlideVTuber character-id="ch_xxxxxxxx" :width="300" :height="300" />

To show the avatar on every slide, create global-bottom.vue in your project root:

<template>
  <SlideVTuber
    character-id="ch_xxxxxxxx"
    :width="128"
    :height="128"
    style="position: fixed; bottom: 16px; right: 16px;"
  />
</template>

Quick Start (with Claude Code)

If you have Claude Code, you can let it handle the setup after step 1.

npm init slidev@latest
cd <your-slidev-project>
npm install lightning-slide-vtuber-kit

Then start Claude Code and tell it:

> Read node_modules/lightning-slide-vtuber-kit/setup/SLIDEV_SETUP.md and set up SlideVTuber in my slides

Claude Code will configure slides.md, place the component, and guide you through the rest.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | character-id | string | — | Character ID from the Setup UI (IndexedDB) | | character-src | string | — | URL to a .json character file (alternative to character-id) | | mode | "mic" \| "manual" | "mic" | Detection mode | | threshold | number | 0.02 | Mic sensitivity threshold | | hold-ms | number | 250 | Hold time after audio drops (ms) | | attack-smoothing | number | 0.5 | Smoothing for volume increase | | release-smoothing | number | 0.9 | Smoothing for volume decrease | | manual-mode | "hold" \| "toggle" | "hold" | Manual mode behavior | | manual-key | string | " " (Space) | Key for manual mode | | detector | SpeakingDetector | null | Inject custom detector | | width | number \| string | 256 | Component width | | height | number \| string | 256 | Component height |

Keyboard Shortcuts

Press 1–9 to switch between character presets while presenting.

License

UNLICENSED