vue-agent-fx

Vue 3 port of Libraries.dev: thinking orbs, border beam, voice glow and image loader for AI & agent UIs

209

vue vue3 ai webgl animation loading canvas voice agent thinking-orbs border-beam

Install
`npm install vue-agent-fx`
Latest Version:	0.1.0 (Oct 9, 2026)
Vue:	3
License:	MIT
Last Updated:	Oct 9, 2026
Links:	GitHub · npm

Maintainer: _mxcd

vue-agent-fx

Effects for AI & agent UIs in Vue 3: a port of Libraries.dev by Jakub Antalik.

Component	Import	Upstream docs (props are identical)
`ThinkingOrb`	`vue-agent-fx/orbs`	thinking-orbs
`BorderBeam`	`vue-agent-fx/beam`	border-beam
`VoiceBeam`, `useMicrophone`	`vue-agent-fx/voice`	voice-glow
`ImageGeneration`	`vue-agent-fx/image` (needs `three`)	img-fx

Live demo

Usage

bun add vue-agent-fx
bun add three   # only for ImageGeneration

<script setup lang="ts">
import { BorderBeam, ThinkingOrb, VoiceBeam, useMicrophone } from 'vue-agent-fx';
import { ImageGeneration } from 'vue-agent-fx/image';

const mic = useMicrophone({ constraints: { echoCancellation: true, noiseSuppression: true } });
</script>

<template>
  <ThinkingOrb state="searching" :size="32" color="#7c9cff" />

  <BorderBeam theme="auto" size="md">
    <div class="card">Generating report</div>
  </BorderBeam>

  <VoiceBeam theme="auto" :stream="mic.stream.value" :active="mic.state.value === 'live'">
    <textarea />
  </VoiceBeam>

  <ImageGeneration theme="auto" :images="['/a.jpg', '/b.jpg']" auto-reveal>
    <div class="card" />
  </ImageGeneration>
</template>

Compiled ES modules with types; vue >= 3.5 (and three for image) are peer dependencies.

Vue differences from the React packages

Wrapped children go in the default slot; class, style and listeners fall through.
Callback props are events: onActivate/onDeactivate -> @activate/@deactivate (beam, voice), onLevel -> @level, onCycle -> @cycle.
Refs: beam and voice expose el; ImageGeneration exposes the upstream handle (triggerReveal, triggerHide, triggerRegenerate, isImageActive, element) via a template ref typed ImageGenerationHandle.
useMicrophone returns refs (stream, state, error) and stops the stream when the owning component unmounts.
theme="auto" everywhere uses one shared resolver: nearest ancestor data-theme / .dark / .light, then <html> color-scheme, then prefers-color-scheme; all live. Defaults match upstream (orbs and image auto, beam and voice dark).
voice: upstream's build-time __VOICE_SURFACE__ flag is a constant false (the experimental dots/lines looks stay off, as in upstream's default build).

Development

bun install
bun run dev        # demo
bun run build      # demo -> dist-demo (deployed to GitHub Pages on push to main)
bun run typecheck
bun run build:lib  # package -> dist (runs on publish)

Framework-agnostic upstream files (engines, styles, presets, drivers) are copied verbatim from Libraries.dev bcaf88f; only the component layer is Vue. To pull upstream changes, re-copy those files. Not ported: bot-avatars, liquid-gooey, metal-fx, and Pro/Studio content.

Demo photos in demo/public/ are AI-generated for this repo.

Related Packages

thinking-orbs-vue3

Vue 3 port of the dotted thought-orb loading indicators for AI and agent UIs

1,087

agent ai animation canvas loading vue vue3

thinking-orbs-vue

Vue 3 port of thinking-orbs — dotted thought-orb loading indicators for AI & age...

200 0

agent ai animation canvas loading thinking-orbs vue vue3 dark-mode llm +3

or3-workflow-vue

Vue 3 components for visual workflow editing with drag-and-drop canvas

1,736 0

agent ai canvas vue vue3 drag-drop visual-editor workflow

@shader-core/vue

Vue components for Shader Core: with layers as children.

1,342

animation canvas vue webgl background glsl shader shaders webgl2

@fxshelf/glyph-rain

Matrix-style glyph rain with cursor stir and drop-head lighting for React and Vu...

295 0

animation canvas vue webgl effect fxshelf glyph matrix rain react

Version History

Version	Released	Vue	License
0.1.0	Oct 9, 2026	^3.5.0	MIT

Pre-releases (1)

Version	Released	License
0.0.0-stage	Oct 9, 2026