const { useState, useEffect, useRef, useCallback } = React;
/* -------------- DATA -------------- */
const PRODUCTS = [
{
id: "clvster",
name: "CLVSTER",
type: "Algorithmic Sequencer",
price: 79,
badges: ["new"],
viz: "clvster",
blurb: "Cluster-based sequencing manipulated by live Algo Modifiers."
},
{
id: "kantian",
name: "KANTIAN",
type: "Free M4L Device",
price: 0,
badges: [],
viz: "wave",
blurb: "Transcendental sequencer for Ableton Live — free forever."
},
{
id: "rubber",
name: "RUBBER",
type: "Neo-VOSIM Synth",
price: 69,
sale: 49,
badges: ["sale"],
viz: "tire",
blurb: "Vocal-formant synthesis with a rubbery, pneumatic core."
}];
const TESTIMONIALS = [
{ quote: "XOVND is the only plugin chain I trust on every record I touch. PRISMA single-handedly replaced three of my outboards.", name: "Mira Okafor", role: "Producer, mixer — Lo-Fi 95, NYE, Hotline", initials: "MO", featured: true, for: "On PRISMA" },
{ quote: "MONOLITH does this thing where it makes a flat synth bus suddenly sound like it costs a million dollars. I don't know how. I don't care.", name: "Jules Maren", role: "Engineer — Sable, KAINO, Plastic Body", initials: "JM", featured: false, for: "On MONOLITH" },
{ quote: "I used DRIFT on the entire bridge of the last single. The label thought we re-recorded it. We didn't. We just pushed two knobs.", name: "Wren Kovacs", role: "Songwriter, artist — Hexafloor", initials: "WK", featured: false, for: "On DRIFT" },
{ quote: "The interfaces are absurdly fun. It's the first time in a decade that opening a plugin made me want to write instead of mix.", name: "Sun Park", role: "Producer — Goldenrod, Tinta", initials: "SP", featured: false, for: "On the suite" },
{ quote: "I demo-d PRISMA on a Thursday. By Sunday I'd finished an EP that had been stuck in my drafts for two years. Real talk.", name: "Dia Brennan", role: "Artist — solo records, scoring", initials: "DB", featured: false, for: "On PRISMA" },
{ quote: "Most plugins try to be invisible. XOVND plugins want to be in the song. That's a totally different design philosophy.", name: "Theo Vance", role: "Mix engineer — credits across pop & indie", initials: "TV", featured: false, for: "On the suite" }];
const AWARDS = [
{ year: "2025", title: "Plugin of the Year", org: "Soundwave Mag" },
{ year: "2025", title: "Best Creative Tool", org: "Studio Press" },
{ year: "2024", title: "Editor's Choice", org: "MIX Quarterly" },
{ year: "2024", title: "Innovation Award", org: "Producer Forum" },
{ year: "2024", title: "Top 10 of the Year", org: "Tape & Wire" },
{ year: "2023", title: "Most Wanted", org: "Modular Monthly" }];
/* -------------- VIZ COMPONENTS -------------- */
const KnobViz = () =>
;
const WaveViz = () =>
;
const GridViz = () => ;
const ClvsterViz = () => {
// Regular octagon path centered at 0,0 with radius r
const oct = (cx, cy, r) => {
const pts = [];
for (let i = 0; i < 8; i++) {
const a = Math.PI / 4 * i + Math.PI / 8;
pts.push((cx + r * Math.cos(a)).toFixed(2) + "," + (cy + r * Math.sin(a)).toFixed(2));
}
return pts.join(" ");
};
const R = 26;
const step = R * 1.95;
return (
);
}
/* -------------- HERO -------------- */
/* generative-art background ports the p5 sketch the user shared:
a grid of n×n cells, each filled with one of five wiggle/line/noise
primitives. Three params (n, marg, amp) rerandomize on every epoch so
the pattern keeps recomposing. Palette is locked to dark/medium grays
so the CLVSTER logo and plugin photo stay the visual focus. */
function HeroGenArt() {
const canvasRef = React.useRef(null);
const wrapRef = React.useRef(null);
const [params, setParams] = React.useState({ n: 5, marg: 12, amp: 4 });
React.useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext("2d");
let raf = 0;
let stopped = false;
let epoch = 0;
let cur = { n: 5, marg: 12, amp: 4 };
let target = cur;
function resize() {
const r = canvas.getBoundingClientRect();
const dpr = Math.min(window.devicePixelRatio || 1, 2);
canvas.width = Math.max(1, Math.floor(r.width * dpr));
canvas.height = Math.max(1, Math.floor(r.height * dpr));
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
resize();
window.addEventListener("resize", resize);
function pickTarget() {
return {
n: 3 + Math.floor(Math.random() * 7), // 3..9
marg: 4 + Math.random() * 26, // 4..30
amp: 1.5 + Math.random() * 9 // 1.5..10.5
};
}
// small seeded PRNG so each cell's pattern type is stable within an epoch
function mulberry32(a) {
return function () {
let t = a += 0x6d2b79f5;
t = Math.imul(t ^ t >>> 15, t | 1);
t ^= t + Math.imul(t ^ t >>> 7, t | 61);
return ((t ^ t >>> 14) >>> 0) / 4294967296;
};
}
/* --- primitives, gray on transparent --- */
const STROKES = ["#3a3a3a", "#4a4a4a", "#5a5a5a", "#6a6a6a"];
function rectLines(ctx, x, y, w, h, rng) {
const step = 3 + rng() * 4;
ctx.lineWidth = 1;
for (let yy = y + step / 2; yy < y + h; yy += step) {
ctx.beginPath();
ctx.moveTo(x, yy);
ctx.lineTo(x + w, yy);
ctx.stroke();
}
}
function rectWiggleLines(ctx, x, y, w, h, rng, amp) {
const step = 4 + rng() * 5;
const freq = 0.03 + rng() * 0.05;
const phase = rng() * Math.PI * 2;
ctx.lineWidth = 1;
for (let yy = y + step / 2; yy < y + h; yy += step) {
ctx.beginPath();
let first = true;
for (let xx = x; xx <= x + w; xx += 3) {
const dy = Math.sin((xx - x) * freq + phase + yy * 0.04) * amp;
if (first) {ctx.moveTo(xx, yy + dy);first = false;} else
ctx.lineTo(xx, yy + dy);
}
ctx.stroke();
}
}
function rectWiggleXLines(ctx, x, y, w, h, rng, amp) {
const step = 4 + rng() * 5;
const freq = 0.03 + rng() * 0.05;
const phase = rng() * Math.PI * 2;
ctx.lineWidth = 1;
for (let xx = x + step / 2; xx < x + w; xx += step) {
ctx.beginPath();
let first = true;
for (let yy = y; yy <= y + h; yy += 3) {
const dx = Math.sin((yy - y) * freq + phase + xx * 0.04) * amp;
if (first) {ctx.moveTo(xx + dx, yy);first = false;} else
ctx.lineTo(xx + dx, yy);
}
ctx.stroke();
}
}
function rectBackforthLines(ctx, x, y, w, h, rng) {
const step = Math.max(4, 4 + rng() * 5);
ctx.lineWidth = 1;
ctx.beginPath();
let dir = 1;
let yy = y;
ctx.moveTo(x, yy);
while (yy <= y + h) {
ctx.lineTo(dir > 0 ? x + w : x, yy);
yy += step;
if (yy <= y + h) ctx.lineTo(dir > 0 ? x + w : x, yy);
dir *= -1;
}
ctx.stroke();
}
function rectNoise(ctx, x, y, w, h, rng) {
const density = Math.floor(40 + rng() * (w * h) * 0.04);
for (let i = 0; i < density; i++) {
const px = x + rng() * w;
const py = y + rng() * h;
const g = 50 + Math.floor(rng() * 60);
ctx.fillStyle = `rgb(${g},${g},${g})`;
ctx.fillRect(px, py, 1, 1);
}
}
function draw() {
const W = canvas.clientWidth;
const H = canvas.clientHeight;
ctx.clearRect(0, 0, W, H);
const n = Math.max(2, Math.round(cur.n));
const marg = cur.marg;
const amp = cur.amp;
const cellW = (W - marg * (n + 1)) / n;
const cellH = (H - marg * (n + 1)) / n;
const rng = mulberry32(epoch * 9973 + n * 131);
for (let j = 0; j < n; j++) {
for (let k = 0; k < n; k++) {
const x = marg + j * (cellW + marg);
const y = marg + k * (cellH + marg);
const t = Math.floor(rng() * 5);
ctx.strokeStyle = STROKES[Math.floor(rng() * STROKES.length)];
ctx.fillStyle = ctx.strokeStyle;
switch (t) {
case 0:rectWiggleXLines(ctx, x, y, cellW, cellH, rng, amp);break;
case 1:rectWiggleLines(ctx, x, y, cellW, cellH, rng, amp);break;
case 2:rectLines(ctx, x, y, cellW, cellH, rng);break;
case 3:rectBackforthLines(ctx, x, y, cellW, cellH, rng);break;
case 4:rectNoise(ctx, x, y, cellW, cellH, rng);break;
}
}
}
}
function lerp(a, b, k) {return a + (b - a) * k;}
function ease(t) {return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;}
target = pickTarget();
cur = { ...target };
let lastEpoch = performance.now();
let from = { ...cur };
const epochMs = 2800; // how long until next reroll
const transMs = 1400; // morph time
let lastFrame = performance.now();
function tick(now) {
if (stopped) return;
const dt = now - lastFrame;
lastFrame = now;
const sinceEpoch = now - lastEpoch;
if (sinceEpoch >= epochMs) {
lastEpoch = now;
from = { ...cur };
target = pickTarget();
epoch++;
}
const k = ease(Math.min(1, sinceEpoch / transMs));
cur = {
n: lerp(from.n, target.n, k),
marg: lerp(from.marg, target.marg, k),
amp: lerp(from.amp, target.amp, k)
};
// breathing on amplitude for life between epochs
cur.amp += Math.sin(now * 0.0009) * 0.6;
setParams({
n: Math.round(cur.n),
marg: Math.round(cur.marg),
amp: +cur.amp.toFixed(1)
});
draw();
raf = requestAnimationFrame(tick);
}
raf = requestAnimationFrame(tick);
return () => {
stopped = true;
cancelAnimationFrame(raf);
window.removeEventListener("resize", resize);
};
}, []);
return (
n {params.n}marg {params.marg}amp {params.amp}
);
}
function Hero({ onAdd }) {
return (
NEWCLVSTER/ALGORITHMIC SEQUENCER
SequenceReshapeExplore
CLVSTER is a human-operated, multi-algorithmic sequencer. 🎛️ Instead of working with individual steps, you operate on Clusters — groups of steps treated as a single unit. 🔲
Each Cluster can then be shaped and transformed by Algo Modifiers ⚙️ — small algorithmic processes that manipulate rhythmic and pitch data in real time.
The result? A fully interactive, live algorithmic rave experience. 🕺🔊REAL-TIME ALGO-RAVE!
Subscribe to own every XOVND plugin. Cancel anytime. Keep what you've earned.
);
}
function AllCard() {
return (
{[...Array(9)].map((_, i) => )}
Catalog
13 plugins
All Products
The Full Catalog
);
}
function ProductSection({ onAdd }) {
return (
[ OUR ADVAANCED DSP WORK, A LABOUR OF LOVE!]
Tools for producers who'd rather make a XOON.
Advanced plugins with an easy GUI interaction , all the power of DSP, under an easy to use and educative GUI, this is our expertise. This makes our tools explorative by default.
XOVND is an independent, producer-owned software studio. We make
opinionated instruments and effects for people who'd rather finish a
record than fight a UI.
In an industry sprinting toward more buttons, more presets, and more AI
doing the work for you — we make the opposite bet. The future sound of
music belongs to the people writing it. Our job is to put a tool in
their hand that gets out of the way.
OVND
