The engineering behind the business sites.
Hands-on canvas experiments and command-interface prototypes that show how MacKinnon Tech thinks about motion, interaction, and systems — separate from client work, but built with the same care.
Built to explore, not just to ship.
Each experiment is interactive on the homepage — move your cursor over a live one to see it react in real time.
Flow Field
Particles navigating a noise-based vector field. Each particle follows the invisible current of a mathematical flow, creating paths that feel organic and unpredictable.
Canvas 2D · Value Noise · JS
Why it matters: Tests smooth, GPU-friendly motion driven entirely by math rather than pre-rendered animation — the same technique that keeps interactive backgrounds fast at scale.
Commercial use: Product storytelling sections and ambient brand backgrounds that need to feel alive without any video weight.
Try it live →Grid Pulse
A reactive grid of points that pulse with sine waves. Each node scales and brightens based on its distance from a moving wave origin and the cursor position.
Canvas 2D · Sin Waves · JS
Why it matters: A simple demonstration of turning a single input (distance, time) into a visually rich, real-time reaction — the core idea behind live dashboards and monitoring displays.
Commercial use: Technical dashboards and status displays that need to visually communicate activity at a glance.
Try it live →Lattice Network
Drifting points form connections when close enough, creating an ever-changing network topology. The cursor repels nearby nodes, distorting the lattice in real time.
Canvas 2D · Graph Theory · JS
Why it matters: A working example of real-time graph/network rendering — nodes, edges, and proximity math computed every frame.
Commercial use: The pattern behind the homepage hero visual, and a fit for infrastructure or relationship-mapping dashboards.
Try it live →Orbital
Geometric objects following elliptical orbits at different speeds and radii. Each body leaves a fading trail, tracing the invisible geometry of circular motion.
Canvas 2D · Trigonometry · JS
Why it matters: Demonstrates precise, predictable motion timing — useful anywhere multiple elements need to move in a coordinated, non-random rhythm.
Commercial use: Data visualization and simulation interfaces where multiple values orbit or cycle in relation to each other.
Try it live →Scatter
A structured grid of dots that scatter on cursor proximity and spring back to their home positions using damped force simulation. Order disrupted, order restored.
Canvas 2D · Spring Physics · JS
Why it matters: A small physics simulation (damped springs) rather than a scripted animation — the same underlying math used in natural-feeling drag, hover, and gesture interactions.
Commercial use: Interactive landing pages and brand activations where a physical, responsive feel matters more than a literal chart.
Try it live →Warp
Concentric rings warped by domain-noise distortion. The distortion field evolves slowly over time, bending the geometry in ways that feel almost biological.
Canvas 2D · Domain Warping · JS
Why it matters: Domain warping layers noise on top of noise to distort a shape organically — a technique used in generative design and procedural graphics.
Commercial use: Generative brand marks, rich portfolio backgrounds, and immersive storytelling sections.
Try it live →OSIRIS
A technical prototype of a synthetic-intelligence and reconnaissance interface concept — a dark AI/cyber command experience with a cinematic Cortex view, live demo telemetry, and infrastructure-focused modules.
React · Vite · Tailwind · Cortex UI · Replit
Why it matters: A full command-interface concept, not just a single effect — showing how a real-time dashboard, telemetry view, and modular UI can be assembled into one cohesive interface.
Commercial use: AI-assisted tools, security operations dashboards, and command-and-control interfaces for technical teams.
View OSIRIS →See the craft, then put it to work.
These experiments exist to sharpen the same skills that go into every client build — motion, performance, and clean interaction design.