Da Vinci's Principles in 3D

Exploring volumetric patterns through particle systems

🧱 Technology•🌀 Creativity•🧬 Humanity•🌐 Fusion

The Story Behind the Animation

The Challenge

When I set out to create a hero animation for Skills of the Future, I wanted something that embodied the intersection of technology, creativity, and humanity. Leonardo da Vinci felt like the perfect inspiration—a polymath who mastered engineering, art, science, and philosophy centuries before we had terms for "interdisciplinary thinking."

My first instinct was to recreate his iconic sketches: mechanical gears, the golden spiral, the Vitruvian Man. I thought, "Let's bring these 2D drawings to life with particles!"

The Breakthrough

After implementing the gear teeth, spiral curves, and the Vitruvian square-and-circle, I stepped back and realized: none of these looked good.

The patterns were unrecognizable. Increasing particle count from 400 to 1200 helped, but didn't solve the fundamental problem. That's when it hit me:

Particles fill volumes, not lines.

I was trying to draw 2D shapes with a 3D medium. It was like trying to paint with a hammer—fighting the tool instead of embracing it. The Neural Network pattern (the fourth state) was already working beautifully precisely because it filled 3D space naturally.

The Pivot

I needed to stop thinking about da Vinci's sketches and start thinking about da Vinci's principles. What did he actually study?

Volumetric geometry - His architectural drawings mastered 3D perspective
Fluid dynamics - His water studies revealed turbulent flow patterns in three dimensions
Anatomical structures - He dissected cadavers to understand the 3D code of the human body

So I redesigned all three patterns from scratch:

🧱

Modular Cubes

Technology - A 5×5×3 grid of 3D cube wireframes. Each cube has 8 particles at its corners, creating clear geometric building blocks representing modular systems architecture.

🌀

Fluid Turbulence

Creativity - Twenty layered cylindrical slices, each following different sine wave frequencies (3, 5, and 7). These waves interfere with each other, creating organic, unpredictable patterns.

🧬

Double Helix

Humanity - Two intertwined helical strands offset by 180 degrees, instantly recognizable as DNA. Da Vinci's anatomical sketches meet our modern understanding of what makes us human at the molecular level.

The result? All four patterns now look stunning because they leverage what particles do best: fill three-dimensional space.

Why This Matters for Enterprise Architecture

This journey mirrors what I do for clients every day. When a solution isn't working, the answer usually isn't to apply more force (more particles, more budget, more people). It's to step back and ask: Am I fighting the medium, or working with it?

Just as da Vinci fused art and engineering, modern organizations need to blend Technology, Creativity, and Humanity into integrated systems. The Neural Network state—the fusion of all three—shows how these elements connect and strengthen each other.

How It Works

The Tech Stack

This animation runs entirely in the browser using modern web technologies:

Three.js (v0.170.0) - WebGL rendering engine for 3D graphics
React Three Fiber (v8.18.7) - React renderer for Three.js
GSAP (v3.12.7) - Smooth morphing animations between states
Framer Motion (v12.0.11) - UI transitions and interactions
Next.js 15 - Server-side rendering with client-side hydration

Performance Optimization

With 1200 particles on desktop (600 on tablet, 400 on mobile), performance was critical. Here's how we achieved 60 FPS:

1. Instanced Mesh Rendering

All particles render in a single draw call instead of 1200 separate ones. This is the difference between 1 GPU instruction and 1200 GPU instructions per frame.

2. Device Detection

Automatically adjusts particle count based on screen size and GPU capability:

Desktop: 1200 particles
Tablet: 600 particles
Mobile: 400 particles

3. Connection Culling

Each particle connects to maximum 6 neighbors within 1.2 units distance. Without this limit, we'd be rendering millions of connection lines.

4. GPU-Optimized Math

Parametric equations using sin/cos run extremely fast on modern GPUs. These calculations are optimized at the hardware level.

The Four Patterns

Pattern 1: Modular Cubes

A 5×5×3 grid of 3D cube wireframes (75 cubes total). Each cube is defined by 8 corner particles, creating clear geometric building blocks.

// 5×5×3 grid = 75 cubes × 8 corners = 600 particles
const gridDimensions = [5, 5, 3];
const cubeSize = 0.4;
const spacing = 1.0;

// 8 corners of a cube (relative to center)
const cubeCorners = [
  [-0.2, -0.2, -0.2], // bottom-back-left
  [0.2, -0.2, -0.2],  // bottom-back-right
  [-0.2, 0.2, -0.2],  // top-back-left
  [0.2, 0.2, -0.2],   // top-back-right
  // ... 4 more corners
];

Pattern 2: Fluid Turbulence

Twenty horizontal layers, each following different sine wave frequencies. Multiple waves interfere to create organic, emergent patterns.

// 20 layers with interference patterns
const numLayers = 20;
const waveFrequencies = [3, 5, 7];
const waveAmplitudes = [0.3, 0.2, 0.15];

// For each particle:
const radius = baseRadius +
  Math.sin(angle × 3) × 0.3 +
  Math.sin(angle × 5 + layer × 0.5) × 0.2 +
  Math.sin(angle × 7 - layer × 0.3) × 0.15;

// Convert cylindrical to Cartesian coordinates

Pattern 3: Double Helix

Two intertwined helical strands using parametric helix equations. The second strand is offset by π radians (180 degrees).

// Parametric helix equations
const numTurns = 4;
const helixRadius = 1.5;
const helixHeight = 6;

// First strand
x = Math.cos(t) × helixRadius
y = (progress) × helixHeight - helixHeight/2
z = Math.sin(t) × helixRadius

// Second strand (offset by π)
// Same equations with t + Math.PI

Pattern 4: Neural Network

Random spherical distribution representing the synthesis of all three themes. Particles are distributed uniformly across a sphere's surface.

// Random spherical distribution
const theta = Math.random() × Math.PI × 2;
const phi = Math.acos(2 × Math.random() - 1);
const radius = 2 + Math.random() × 1;

// Spherical to Cartesian
x = radius × Math.sin(phi) × Math.cos(theta)
y = radius × Math.sin(phi) × Math.sin(theta)
z = radius × Math.cos(phi)

The Morphing Magic

GSAP handles the smooth transitions between states over 2 seconds. Each particle lerps (linear interpolates) from its current position to its target position at 5% per frame:

currentPosition = lerp(currentPosition, targetPosition, 0.05);

The animation cycles through all four states, spending 6 seconds on each (4 seconds visible, 2 seconds transitioning). Total cycle time: 24 seconds.

Interactivity

The animation includes several interactive features:

Mouse tracking - Subtle particle attraction to cursor position creates organic movement
Pause/play controls - Stop animation to examine any state in detail
Manual state selection - Click buttons to jump to specific patterns
Responsive design - Adapts to screen size and device capabilities
Accessibility - Respects prefers-reduced-motion with static fallback

White Particles on Orange

Initially, I tried orange particles matching the brand color (#EF4723). They got lost in the background. Switching to white "chalk-like" particles with 90% opacity created the perfect contrast—like sketches on a canvas.

The connection lines use white with slight warm tint (RGB: 1.0, 0.95, 0.9) and fade based on distance for depth perception.

Configuration-Driven Design

Following best practices, all tunable values live in a centralized config file (config.ts) rather than being hard-coded. This makes it trivial to adjust timing, particle counts, pattern parameters, or visual properties without touching component code.

// config.ts
export const NEURAL_NETWORK_CONFIG = {
  particles: {
    desktop: 1200,
    mobile: 400,
    tablet: 600
  },
  visuals: {
    particleSize: 0.06,
    particleOpacity: 0.9
  },
  timing: {
    morphDuration: 2,
    morphInterval: 6000
  },
  daVinci: {
    modularCubes: {
      gridDimensions: [5, 5, 3],
      spacing: 1.0
    },
    fluidTurbulence: {
      waveFrequencies: [3, 5, 7]
    },
    doubleHelix: {
      numTurns: 4,
      helixRadius: 1.5
    },
  }
};

The Result

A browser-based 3D animation that runs at 60 FPS on desktop, requires no plugins, and communicates complex ideas through beautiful motion. Just like da Vinci would have wanted—if he'd had WebGL.

←Back to Showreel