NeoDisco

Tiny Canvas 2D disco ball renderer for vanilla JavaScript, React, and Vue.

• Website: neo-disco.vikingz.me
• Repository: github.com/vikingmute/neo-disco
• LLM reference: llm.txt

NeoDisco renders an art-directed mirror ball: projected tile geometry, theme palettes, glow, star flares, wire strokes, shadow, cord, and slow rotation without WebGL or Three.js.

Install

npm install neodisco

Vanilla

import { createNeoDisco } from "neodisco";

const instance = createNeoDisco(document.querySelector("#stage")!, {
  theme: "prism",
  tileRows: 28,
  tileColumns: 54,
  sparkle: 0.7,
  glow: 1.1,
  rotationSpeed: 0.18
});

instance.update({ theme: "gold" });
instance.destroy();

React

import { NeoDisco } from "neodisco/react";

export function Hero() {
  return <NeoDisco theme="gold" sparkle={0.6} glow={1.05} />;
}

Vue

<script setup lang="ts">
import { NeoDisco } from "neodisco/vue";
</script>

<template>
  <NeoDisco :options="{ theme: 'prism', tileColumns: 54, sparkle: 0.7 }" />
</template>

Options

| Option | Purpose | | --- | --- | | theme | Preset look: ice, gold, prism, or mono. | | palette | Override base, mirror, glow, wire, or shadow. | | size | Square CSS size, or auto to fill the host. | | pixelRatio | Canvas resolution multiplier, clamped internally. | | radius | Ball radius relative to canvas size. | | tileRows / tileColumns | Mirror density. | | tileGap | Separation between tiles. | | rotation / rotationSpeed | Initial angle and animation speed. | | tilt | Vertical sphere tilt for perspective. | | contrast | Mirror light/dark intensity. | | glow | Flare size and bloom strength. | | sparkle | Highlight tile and star flare intensity. | | cord | Draw the hanging line and cap. | | background | true, false, or a CSS color. | | paused | Render one frame without animation. | | seed | Stable random layout for tiles. | | canvasClassName / canvasStyle | Apply styling directly to the generated canvas. |

Build

npm run typecheck
npm run build

The package ships ESM entry points and generated TypeScript declarations from dist/.

Publish

npm publish

prepublishOnly runs type-checking and the library build before publishing.

License

MIT