Interactive Visual Patterns

Reference for the three scroll-driven service sketches on dxn.is. Use these patterns as the starting point for any future interactive visuals on the site. Every design decision is documented so a future session can reproduce the aesthetic without guessing.

Core Principles

Scroll is the only interaction

Scroll at 50% shows the 50% visual state. Scroll backward and it reverses. When scrolling stops, nothing moves. No hover, no click, no time-based animation. The scroll IS the timeline. This is the Apple homepage pattern.

Implementation: each sketch receives progress (0 to 1) from window.__serviceScrollState. The draw() function computes all visual properties as pure functions of progress.

Smoothstep easing

Raw scroll progress is linear and feels mechanical. Apply smoothstep: t * t * (3 - 2 * t). This eases the start and end of the animation without adding complexity.

Theme-aware colors via dynamic functions

Colors are never hardcoded. They come from functions that check the current theme.

function gold() { return isDarkMode() ? [255, 233, 74] : [180, 145, 10]; }
function coral() { return isDarkMode() ? [232, 100, 100] : [200, 70, 70]; }
function teal() { return isDarkMode() ? [80, 160, 176] : [40, 110, 130]; }

Dark mode: bright saturated values designed to glow against #09090B. Light mode: darker, richer values that pop against warm cream backgrounds and pass WCAG AA.

Lifecycle management

Sketches create and destroy themselves based on visibility. When a panel scrolls out of view, the p5 instance is removed. When it scrolls back in, a fresh instance is created. Every visit starts from the beginning.

Responsive sizing

All positions and sizes use relative values (p.min(w, h) * 0.32 for radius). On windowResized, canvases resize and positions recompute.

p5.js instance mode

All sketches use new p5(function(p) { ... }, container) so multiple canvases coexist without interfering with each other or the hero particles.

Sketch 1: Alignment Network

Strategic Planning & Facilitation

Visual metaphor: diverse perspectives aligning into a coherent whole.

Start (progress = 0)

14 gold nodes scattered randomly. Faint dashed teal connections between nearby nodes (80px threshold). Nodes at 80 alpha, 1x size. No center node.

End (progress = 1)

14 nodes in a precise circle (32% radius). Solid teal connections (260px threshold, 2.2px weight). Nodes at 255 alpha, 1.6x size with glow halos. Center facilitator at 22px.

Key transitions

Node positions: lerp(scattered, circle, smoothstep(progress))
Connections: dashed below 0.4, solid above. Weight interpolates 0.4 to 2.2.
Connection distance: lerp(80, 260, t)
Center node: appears at t > 0.1, grows 0 to 22px with 3x glow halo
Node glow halos: appear at t > 0.4, 4x node size, low alpha

Colors

Gold: nodes, center, halos

Teal: connections

Sketch 2: Radial Pulse

Workshops & Speaking

Visual metaphor: a catalyst at the center energizing concentric rings of participants.

Start (progress = 0)

Coral center at 10px (120 alpha). All participant nodes invisible, collapsed to center. No connections.

End (progress = 1)

Center at 20px (240 alpha) with 2.5x glow. Inner ring (6 nodes) and outer ring (10 nodes) at full radius and brightness. Connections between nearby nodes visible.

Staged reveal

Progress 0 to 0.4: inner ring (6 nodes, 15% radius) expands from center
Progress 0.2 to 0.7: outer ring (10 nodes, 32% radius) expands from center
Progress 0.5 to 1.0: connections between nearby nodes fade in
Pulse ring expands continuously: lerp(10, 40% of min dim, progress)

Colors

Coral: center catalyst, ring guides, pulse waves

Gold: participant nodes, connections

Sketch 3: Gravitational Pair

Coaching & Advisory

Visual metaphor: two entities in relationship, drawn closer through the coaching engagement.

Start (progress = 0)

Two teal nodes in a wide orbit (28% radius). Dim (120 alpha, 12px). Faint connection (30 alpha, 0.5px). Orbit path barely visible.

End (progress = 1)

Tight orbit (8% radius). Bright (255 alpha, 22px) with glow halos. Strong connection (200 alpha, 2.8px). Trail and orbit path visible. Three full rotations completed.

Key mechanics

Orbit angle: progress * TWO_PI * 3 (three rotations, scroll-controlled)
Both nodes diametrically opposed: angle and angle + PI
Orbit radius: lerp(28%, 8%, progress)
Midpoint marker: size inversely proportional to distance
Trail: 60-frame history of connection lines, visibility scales with progress

Colors

Teal: everything (single-color palette for intimacy)

Visual Vocabulary

Maintain these conventions across all interactive elements on dxn.is:

Nodes: filled circles with optional glow halos (same circle at 3-4x size, low alpha)
Connections: teal stroked lines. Dashed when weak or uncertain, solid when strong or aligned
Centers/catalysts: coral, larger, with breathing or expanding quality
Participants/elements: gold, smaller, multiple
Backgrounds: grainy gradient bloom (radial gradients + SVG noise filter)
Progress indicators: thin vertical strokes in the brand color, filling top-to-bottom
Easing: smoothstep for position, linear for alpha

How to Reuse

Define start state (progress = 0) and end state (progress = 1)
Every visual property = a function of progress (use lerp, map, constrain)
Apply smoothstep easing to raw progress
Use the theme-aware color functions
Wrap in manageVisibility() for lifecycle management
Use p5.js instance mode
Test by scrubbing the scroll slowly and fast in both directions

Source file: ~/dev/dxnis/js/service-visuals.js