Pinterest-style masonry layout using CSS columns. Cards have varying heights to create the characteristic staggered pattern.
Exploring the intersection of code and letterforms. Using parametric curves and randomized stroke widths to create unique typeface variations that never repeat.
typographyReal-time Navier-Stokes fluid dynamics rendered in the browser. Handles pressure, velocity, and advection at 60fps on modern GPUs.
The solver uses a Jacobi iteration method for the pressure step, coupled with a semi-Lagrangian advection scheme for stability at larger time steps.
simulationCreating artwork purely with CSS Grid and background gradients. No images, no SVG, no canvas.
cssConnecting the Web Audio API to Three.js geometries. Frequency bands drive mesh deformation, color shifts, and particle emission rates in real time.
Supports microphone input for live performances or file playback for pre-recorded content. FFT size configurable from 32 to 8192 bins.
The visual mapping layer allows arbitrary connections between audio features and visual parameters through a node-based interface.
audioLayered Perlin noise generates infinite terrain with biome classification based on elevation and moisture maps.
proceduralSigned distance functions rendered via sphere tracing on the GPU. Supports smooth unions, intersections, and subtractions for complex shape composition.
Ambient occlusion computed from the SDF directly, eliminating the need for pre-baked AO maps.
graphicsA* pathfinding compiled to WebAssembly for near-native performance. Handles grids up to 10,000 x 10,000 cells with weighted edges.
algorithmsA lightweight library for creating complex SVG path animations with staggered timing, easing curves, and morphing between arbitrary shapes.
Paths are decomposed into cubic bezier segments, normalized, and interpolated point-by-point for smooth morphing transitions.
Supports timeline scrubbing, loop modes, and keyframe-based sequencing. Export to Lottie JSON format for use in native apps.
The easing engine includes 30+ built-in curves plus custom cubic-bezier and spring physics options.
animationGlitch art technique that sorts pixel rows by brightness, hue, or saturation. Creates striking visual artifacts from ordinary photographs.
glitchBrowser-based style transfer using TensorFlow.js. Apply the visual style of famous paintings to uploaded photos in real time.
The model uses a VGG19 backbone with adaptive instance normalization for fast arbitrary style transfer without per-style training.
machine-learningTile-based isometric rendering with depth sorting, elevation layers, and animated sprites. Built for browser-based strategy games.
gamedevConverting datasets into musical compositions. Temperature readings become melodies, stock prices become rhythms, and population data becomes harmonies.
Uses Web MIDI API for output to hardware synthesizers or the built-in Web Audio oscillators for immediate playback.
Mapping presets available for common dataset types: time series, geographic, categorical, and network data.
dataCustom paint worklets for procedural backgrounds. Register once, use anywhere via CSS custom properties.
cssFortune's algorithm for Voronoi tessellation, rendered to Canvas 2D. Interactive: add, remove, and drag seed points to reshape the diagram in real time. Delaunay triangulation displayed as an overlay toggle.
geometryGray-Scott model simulated on the GPU via fragment shaders. Two chemical species interact to produce Turing patterns: spots, stripes, labyrinthine structures, and waves.
Feed and kill rates are adjustable in real time, allowing exploration of the full parameter space of emergent patterns.
simulationLindenmayer system parser and renderer. Define axioms and production rules to grow fractal plants, trees, and organic structures through iterative string rewriting.
procedural