Animations
Custom animations used throughout the application. These animations are centralized components that can be configured and reused across the platform.
Browse the available animations below. Each animation is a centralized component that can be configured and reused across the platform.
Lattice Animation
A 3D lattice animation built with Three.js featuring animated point lights that move through a 3D grid of cubes, creating dynamic lighting effects.
Cloth Lattice Animation
An interactive 2D force-directed graph animation built with D3.js that creates a cloth-like lattice structure. Nodes can be dragged to interact with the physics simulation.
Flocking Animation
A boids/flocking simulation that demonstrates emergent behavior through simple rules: separation, alignment, and cohesion. Creates natural, organic movement patterns.
Particle Animation
An animated particle system with a gradient background. Particles move smoothly and connect to nearby particles, creating an organic, flowing network effect.
Row of Lines
An interactive horizontal line pattern built with SVG. Lines respond to mouse hover, with the closest line becoming thicker and surrounding lines gaining progressive thickness.
Fractal Animation
A canvas-based fractal animation that draws animated curves using interpolated circles. Creates organic, flowing patterns through mathematical interpolation and phase-shifted circular motion.
Heartbeat Animation
A CSS-based pulsing glow effect that creates a subtle, rhythmic animation reminiscent of a heartbeat. Uses radial gradients with blur effects and CSS keyframe animations.
Fitzpatrick Gradient
An animated gradient that shifts through the Fitzpatrick skin tone scale palette. Uses the design system gradient colors for inclusive, brand-aligned visuals.
Particle sphere
Fibonacci-distributed points on a rotating sphere with optional center spokes and a spectrum or single-color mesh. Presets for nav, hero, and placement — tunable on the sphere page.