vue-3d-ai-assistant · Live Demo

A reusable Vue 3 + TresJS component that renders an interactive 3D AI voice assistant sphere with an iridescent shader, blinking eyes, fire-ember sparkles, and blink-triggered radar ripple rings.

Installation

npm install @ibrahim-org/vue-3d-ai-assistant

Peer dependencies

npm install vue three @tresjs/core

Usage

<script setup>
import { AIVoiceAssistant } from '@ibrahim-org/vue-3d-ai-assistant';
</script>

<template>
  <AIVoiceAssistant style="width: 100vw; height: 100vh;" />
</template>

The component owns its own <TresCanvas>; just give the parent/root element width and height.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | scale | number | 1 | Scale multiplier for the sphere | | colorPalette | string[] | ['#00e5ff', '#ff00ff', '#ff2200', '#4400aa'] | Array of 4 hex colors for shader uniforms | | animationSpeed | number | 1 | Multiplier for animations (shader flow, bobbing, ripple pacing) | | enableMouseTracking | boolean | true | Sphere rotates toward pointer movement |

Style and class pass-through

Use normal Vue attributes on the component root:

<AIVoiceAssistant class="hero-assistant" style="width: 600px; height: 600px;" />

Use only the sphere in your own TresCanvas

<script setup>
import { TresCanvas } from '@tresjs/core';
import { IridescentSphere } from '@ibrahim-org/vue-3d-ai-assistant';
</script>

<template>
  <TresCanvas :dpr="[1, 2]" clear-color="#0a0a0a">
    <TresPerspectiveCamera :position="[0, 0, 4]" :fov="45" />
    <TresAmbientLight :intensity="0.4" />
    <IridescentSphere :scale="1.2" :animation-speed="1" :enable-mouse-tracking="true" />
  </TresCanvas>
</template>

Development

npm install --no-audit --no-fund
npm run dev

Build and checks

npm run lint
npm run build
npm run build:lib

Publish checklist (GitHub + npm)

1. Create a new GitHub repo named vue-3d-ai-assistant.
2. Set remote URL and push:

git init
git add .
git commit -m "feat: initial vue package"
git branch -M main
git remote add origin https://github.com/Ibrahim-dvp/vue-3d-ai-assistant.git
git push -u origin main

3. Verify package content:

npm pack

4. Publish scoped package:

npm publish --access public

License

MIT