// StreakField — signal simulation
const GRID = 128;                     // flow potential lattice
let phase = 0;                        // A→B morph, ~14s per epoch
const curl = (x, y) => {
  const dx = sample(x + h, y) - sample(x - h, y);
  const dy = sample(x, y + h) - sample(x, y - h);
  return [dy * FLOW, -dx * FLOW];     // divergence-free: pure swirl
};
for (let i = 0; i < P; i++) {
  const [u, v] = curl(px[i], py[i]);
  px[i] += (u + vortex.x + scatter.x) * dt * rush;
  py[i] += (v + vortex.y + scatter.y) * dt * rush;
  // cursor crush: flash teal, kick outward, spring home
  if (d2(ptr, i) < R && ptr.speed > MIN) {
    flash[i] = 1;
    kick(i, ptr, (1 - d2 / R) * ptr.speed * IMPULSE);
  }
  charge[i] = Math.max(flash[i] *= COOL, trailGlow(px[i], py[i]));
}
// trails: fade pass 4.5% → filaments persist ~25 frames
fade(fbo, 0.045); draw(points, ADDITIVE); composite(fbo, screen);

// StreakField — signal simulation
const GRID = 128;                     // flow potential lattice
let phase = 0;                        // A→B morph, ~14s per epoch
const curl = (x, y) => {
  const dx = sample(x + h, y) - sample(x - h, y);
  const dy = sample(x, y + h) - sample(x, y - h);
  return [dy * FLOW, -dx * FLOW];     // divergence-free: pure swirl
};
for (let i = 0; i < P; i++) {
  const [u, v] = curl(px[i], py[i]);
  px[i] += (u + vortex.x + scatter.x) * dt * rush;
  py[i] += (v + vortex.y + scatter.y) * dt * rush;
  // cursor crush: flash teal, kick outward, spring home
  if (d2(ptr, i) < R && ptr.speed > MIN) {
    flash[i] = 1;
    kick(i, ptr, (1 - d2 / R) * ptr.speed * IMPULSE);
  }
  charge[i] = Math.max(flash[i] *= COOL, trailGlow(px[i], py[i]));
}
// trails: fade pass 4.5% → filaments persist ~25 frames
fade(fbo, 0.045); draw(points, ADDITIVE); composite(fbo, screen);

// StreakField — signal simulation
const GRID = 128;                     // flow potential lattice
let phase = 0;                        // A→B morph, ~14s per epoch
const curl = (x, y) => {
  const dx = sample(x + h, y) - sample(x - h, y);
  const dy = sample(x, y + h) - sample(x, y - h);
  return [dy * FLOW, -dx * FLOW];     // divergence-free: pure swirl
};
for (let i = 0; i < P; i++) {
  const [u, v] = curl(px[i], py[i]);
  px[i] += (u + vortex.x + scatter.x) * dt * rush;
  py[i] += (v + vortex.y + scatter.y) * dt * rush;
  // cursor crush: flash teal, kick outward, spring home
  if (d2(ptr, i) < R && ptr.speed > MIN) {
    flash[i] = 1;
    kick(i, ptr, (1 - d2 / R) * ptr.speed * IMPULSE);
  }
  charge[i] = Math.max(flash[i] *= COOL, trailGlow(px[i], py[i]));
}
// trails: fade pass 4.5% → filaments persist ~25 frames
fade(fbo, 0.045); draw(points, ADDITIVE); composite(fbo, screen);

// StreakField — signal simulation
const GRID = 128;                     // flow potential lattice
let phase = 0;                        // A→B morph, ~14s per epoch
const curl = (x, y) => {
  const dx = sample(x + h, y) - sample(x - h, y);
  const dy = sample(x, y + h) - sample(x, y - h);
  return [dy * FLOW, -dx * FLOW];     // divergence-free: pure swirl
};
for (let i = 0; i < P; i++) {
  const [u, v] = curl(px[i], py[i]);
  px[i] += (u + vortex.x + scatter.x) * dt * rush;
  py[i] += (v + vortex.y + scatter.y) * dt * rush;
  // cursor crush: flash teal, kick outward, spring home
  if (d2(ptr, i) < R && ptr.speed > MIN) {
    flash[i] = 1;
    kick(i, ptr, (1 - d2 / R) * ptr.speed * IMPULSE);
  }
  charge[i] = Math.max(flash[i] *= COOL, trailGlow(px[i], py[i]));
}
// trails: fade pass 4.5% → filaments persist ~25 frames
fade(fbo, 0.045); draw(points, ADDITIVE); composite(fbo, screen);

// StreakField — signal simulation
const GRID = 128;                     // flow potential lattice
let phase = 0;                        // A→B morph, ~14s per epoch
const curl = (x, y) => {
  const dx = sample(x + h, y) - sample(x - h, y);
  const dy = sample(x, y + h) - sample(x, y - h);
  return [dy * FLOW, -dx * FLOW];     // divergence-free: pure swirl
};
for (let i = 0; i < P; i++) {
  const [u, v] = curl(px[i], py[i]);
  px[i] += (u + vortex.x + scatter.x) * dt * rush;
  py[i] += (v + vortex.y + scatter.y) * dt * rush;
  // cursor crush: flash teal, kick outward, spring home
  if (d2(ptr, i) < R && ptr.speed > MIN) {
    flash[i] = 1;
    kick(i, ptr, (1 - d2 / R) * ptr.speed * IMPULSE);
  }
  charge[i] = Math.max(flash[i] *= COOL, trailGlow(px[i], py[i]));
}
// trails: fade pass 4.5% → filaments persist ~25 frames
fade(fbo, 0.045); draw(points, ADDITIVE); composite(fbo, screen);

// StreakField — signal simulation
const GRID = 128;                     // flow potential lattice
let phase = 0;                        // A→B morph, ~14s per epoch
const curl = (x, y) => {
  const dx = sample(x + h, y) - sample(x - h, y);
  const dy = sample(x, y + h) - sample(x, y - h);
  return [dy * FLOW, -dx * FLOW];     // divergence-free: pure swirl
};
for (let i = 0; i < P; i++) {
  const [u, v] = curl(px[i], py[i]);
  px[i] += (u + vortex.x + scatter.x) * dt * rush;
  py[i] += (v + vortex.y + scatter.y) * dt * rush;
  // cursor crush: flash teal, kick outward, spring home
  if (d2(ptr, i) < R && ptr.speed > MIN) {
    flash[i] = 1;
    kick(i, ptr, (1 - d2 / R) * ptr.speed * IMPULSE);
  }
  charge[i] = Math.max(flash[i] *= COOL, trailGlow(px[i], py[i]));
}
// trails: fade pass 4.5% → filaments persist ~25 frames
fade(fbo, 0.045); draw(points, ADDITIVE); composite(fbo, screen);

// StreakField — signal simulation
const GRID = 128;                     // flow potential lattice
let phase = 0;                        // A→B morph, ~14s per epoch
const curl = (x, y) => {
  const dx = sample(x + h, y) - sample(x - h, y);
  const dy = sample(x, y + h) - sample(x, y - h);
  return [dy * FLOW, -dx * FLOW];     // divergence-free: pure swirl
};
for (let i = 0; i < P; i++) {
  const [u, v] = curl(px[i], py[i]);
  px[i] += (u + vortex.x + scatter.x) * dt * rush;
  py[i] += (v + vortex.y + scatter.y) * dt * rush;
  // cursor crush: flash teal, kick outward, spring home
  if (d2(ptr, i) < R && ptr.speed > MIN) {
    flash[i] = 1;
    kick(i, ptr, (1 - d2 / R) * ptr.speed * IMPULSE);
  }
  charge[i] = Math.max(flash[i] *= COOL, trailGlow(px[i], py[i]));
}
// trails: fade pass 4.5% → filaments persist ~25 frames
fade(fbo, 0.045); draw(points, ADDITIVE); composite(fbo, screen);

// StreakField — signal simulation
const GRID = 128;                     // flow potential lattice
let phase = 0;                        // A→B morph, ~14s per epoch
const curl = (x, y) => {
  const dx = sample(x + h, y) - sample(x - h, y);
  const dy = sample(x, y + h) - sample(x, y - h);
  return [dy * FLOW, -dx * FLOW];     // divergence-free: pure swirl
};
for (let i = 0; i < P; i++) {
  const [u, v] = curl(px[i], py[i]);
  px[i] += (u + vortex.x + scatter.x) * dt * rush;
  py[i] += (v + vortex.y + scatter.y) * dt * rush;
  // cursor crush: flash teal, kick outward, spring home
  if (d2(ptr, i) < R && ptr.speed > MIN) {
    flash[i] = 1;
    kick(i, ptr, (1 - d2 / R) * ptr.speed * IMPULSE);
  }
  charge[i] = Math.max(flash[i] *= COOL, trailGlow(px[i], py[i]));
}
// trails: fade pass 4.5% → filaments persist ~25 frames
fade(fbo, 0.045); draw(points, ADDITIVE); composite(fbo, screen);

// StreakField — signal simulation
const GRID = 128;                     // flow potential lattice
let phase = 0;                        // A→B morph, ~14s per epoch
const curl = (x, y) => {
  const dx = sample(x + h, y) - sample(x - h, y);
  const dy = sample(x, y + h) - sample(x, y - h);
  return [dy * FLOW, -dx * FLOW];     // divergence-free: pure swirl
};
for (let i = 0; i < P; i++) {
  const [u, v] = curl(px[i], py[i]);
  px[i] += (u + vortex.x + scatter.x) * dt * rush;
  py[i] += (v + vortex.y + scatter.y) * dt * rush;
  // cursor crush: flash teal, kick outward, spring home
  if (d2(ptr, i) < R && ptr.speed > MIN) {
    flash[i] = 1;
    kick(i, ptr, (1 - d2 / R) * ptr.speed * IMPULSE);
  }
  charge[i] = Math.max(flash[i] *= COOL, trailGlow(px[i], py[i]));
}
// trails: fade pass 4.5% → filaments persist ~25 frames
fade(fbo, 0.045); draw(points, ADDITIVE); composite(fbo, screen);

/

Index / 04

GitHub Instagram

Available

/

About

Vanja
Modrinjak

I design and build interfaces and systems. Full stack when needed, frontend by preference. I care about the details most people skip — the easing curve, the loading state, the thing that happens when you hit the edge case.

Based in Croatia. Working with teams and clients across Europe. Currently open to new projects.

Capabilities / 05

01

Frontend Engineering

React / Next.jsTypeScriptGSAP / MotionThree.js / WebGLTailwind CSS

02

Systems & Rust

Rust — Axum, TokioGPU-accelerated toolsBroadcast QC (EBU R128)Zero-alloc streamingTerminal-native apps

03

Backend & Data

Node.jsPostgreSQL / ConvexSQLite / Redis StreamsREST / GraphQL / AxumSanity CMS

04

Media & Cinema

FFmpeg pipelinesLoudness analysisHLS / video playoutCinematographyColor & framing

05

Design & Direction

UI/UX DesignMotion designDesign systemsEditorial layoutCreative direction

Experience

2023 —

Freelance Design Engineer

Independent — Remote

Designing and building web products, interactive experiences, and design systems for clients across Europe. Full ownership from concept to deployment.

2021 — 23

Frontend Developer

Agency Work — Croatia

Built production web applications, component libraries, and client-facing interfaces. Collaborated closely with design and backend teams on tight deadlines.

2019 — 21

Cinematographer & Editor

Film & Commercial — Croatia

Shot and edited commercial and narrative projects. Learned composition, pacing, and visual storytelling — skills that carry directly into interface design.