Ink Field
A sumi-e ink field you can paint into, rebuilt from the InkField engine's mark-making pipeline. A spring-damped brush stamps grayscale geometry, an animated wind map decides which way ink creeps, and a diffusion shader spreads it under a rule that lets ink darken a pixel but never brighten one, so strokes accumulate instead of washing out. Colour only exists at commit time, which is why the same geometry can be replayed in any of 36 pigments with optional Kubelka-Munk mixing. Seven brush modes, six diffusion behaviours, five post effects, eight flow displacement styles and a six-material metallic etching pass. All ten GLSL shaders are the originals, transcribed byte-exact.
npx shadcn@latest add https://ui.aryank.space/r/ink-field.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| brushMode / brushSize | 1 | 2 | 3 | 4 | 5 | 6 | 7 / number | 1 / 2 | Ink Brush, Marker, Spray Paint, Dry Brush, Spray Dots, Flat Brush, Deckle Edge. Sizes run 0.1 to 5. The Ink Brush settles for three times as long after release as every other mode, which is why it reads as the wet one. |
| inkMode / diffusionStrength | number / number | 4 / 0.45 | Diffusion behaviour 0-5: Fly White, Squeeze, Marker, Salt, Bleed, Fiber. Fiber is Bleed at a third the speed on a clock that never wraps. diffusionStrength is the blend weight for Fly White. |
| colorIndex / customColor | number / string | 0 / #FF6A3D | Palette index 0-35. 0 is black, 1 is the white brush, 29 paints with the paper colour to erase, and 33 resolves to customColor. |
| blendMode / spectralMix | number / boolean | 0 / false | 0 Mix, 1 Multiply, 2 Darken. spectralMix routes colour through a 38-band reflectance curve so red over yellow makes orange rather than drifting toward black. |
| hueShift / satShift / briShift / whiteMaxOpacity | number | -0.01 / 0.02 / 0.02 / 0.78 | Per-stroke HSB jitter applied to non-black pigments, and the opacity ceiling for the white brush. |
| background / paperTexture / paperGrain | string / boolean / number | #F4F1EA / true / 0.06 | Paper colour and its procedural fibre grain. No image asset is fetched. |
| distortEnabled / displacementB / displacementC | boolean / number / number | false / 20 / 50 | Domain-warped FBM displacement with a faint enlarged ghost tap, plus hue rotation proportional to force. |
| resonanceEnabled / rsFrequency / rsStrength / rsGradientMix / rsScale | boolean / number | false / 300 / 0.5 / 0.1 / 100 | Treats sixteen force-map samples as wave sources and displaces along the interference gradient, like stones dropped in a pond. |
| cellularEnabled / cellularScale / whiteDotEnabled / whiteDotDensity / grainEnabled / grainAmount | boolean / number | false / 15 / false / 0.1 / false / 0.3 | Voronoi border displacement, three scales of paper flaw with a heavy-tailed size distribution, and per-region film grain strongest in dark active areas. |
| flowType / flowStrength / flowStyle / flowOnLongPress | number / number / number / boolean | 0 / 100 / 0 / true | Displacement styles: 0 Basic, 2 Concentric, 3 Vertical, 4 Horizontal, 5 Crack, 6 Mosaic, 7 Vortex, 8 Cellular. Holding the pointer still displaces the artwork under it rather than marking it. |
| metalTint / metallicStrength / biteSize / biteCount | string / number / number / number | gold / 85 / 7 / 10 | Bug-bite etching. A strided scan picks dark points weighted toward the darkest with minimum-distance rejection, then a metallic pass with per-channel dispersion lights them. Materials: gold, silver, copper, rose, iron, diamond. |
| seed / autoplay / autoplaySpeed / interactive / maxPixelRatio | number / boolean / number / boolean / number | 20260722 / true / 1 / true / 2 | The same seed reproduces the same demo composition and the same brush character. Autoplay hands control over on the first pointer press. |
| ref | InkFieldHandle | - | clear(), playDemo(), applyFlow(), applyEtching(), reseedForceMap() and toDataURL() for driving the canvas from outside. |
brushMode / brushSize / inkModetextSeven brush behaviours, seven size presets, and the six diffusion modes that decide how ink spreads and textures.
colorIndex / customColor / blendMode / spectralMixtext36-pigment palette with two dynamic slots, three composite modes, and optional Kubelka-Munk reflectance mixing.
background / paperTexture / paperGraintextPaper colour and procedural fibre grain. Ink multiplies on neutral sheets and mixes directly on saturated ones.
distortEnabled / resonanceEnabled / cellularEnabled / whiteDotEnabled / grainEnabledtextFive independent post effects, each with its own parameters, applied only where there is something between paper and full ink.
flowType / metalTinttextEight displacement styles for the long-press flow pass, and six materials for the bug-bite etching overlay.