TwoJS

A Vue 3 component library featuring interactive 3D canvas visualizations.

Installation

npm install @antinomystudio/twojs

Peer Dependencies

This library requires the following peer dependencies:

npm install vue motion-v

Components

EcosystemGraph

An interactive 3D sphere visualization with rotating circles and particles.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { useScroll } from 'motion-v'
import { EcosystemGraph } from '@antinomystudio/twojs'

const { scrollYProgress } = useScroll()
const current = ref(0) // 0 shows all items, use 1-4 to highlight specific items
</script>

<template>
  <EcosystemGraph :scroll-y-progress="scrollYProgress" :current="current" />
</template>

Props

• scrollYProgress: MotionValue<number> - Motion value for scroll-based rotation (from motion-v)
• current: number - Controls which circle/item is currently active (0 shows all items, other values highlight specific items by their itemIndex)

Particles

An animated particle field with magnetic interaction effects.

Usage

<script setup lang="ts">
import { Particles } from '@antinomystudio/twojs'
</script>

<template>
  <Particles />
</template>

Styling

The components include internal styles. If you need to customize the canvas container, wrap the components in your own container:

<template>
  <div class="my-custom-wrapper">
    <Particles />
  </div>
</template>

<style scoped>
.my-custom-wrapper {
  width: 100%;
  height: 80svh;
}
</style>

Development

Install Dependencies

npm install

Build Library

npm run build

Development Mode

npm run dev

Releasing Updates

To publish a new version to npm:

# 1. Commit your changes
git add .
git commit -m "feat: your changes"
git push

# 2. Bump version (choose one)
npm version patch   # Bug fixes: 0.1.0 -> 0.1.1
npm version minor   # New features: 0.1.0 -> 0.2.0
npm version major   # Breaking changes: 0.1.0 -> 1.0.0

# 3. Push the tag to trigger automated publishing
git push --tags

GitHub Actions will automatically build and publish to npm. Monitor progress at Actions.

Note: The dist/ folder is built automatically during publishing - never commit it to git.

License

MIT