◈ component · pigment-bath
Kubelka–Munk Pigment Bath
A stirred emulsion mixing pigments with two-constant Kubelka–Munk scattering — K/S inverted from masstone reflectance — across linseed oil, watercolor, and encaustic wax vehicles.
Float two pigments.
Deposit selects the next brush. Hold on the bath to lay paint; drag to stir. The optional starter pair gives the first gesture a visible beginning.
The fallback shows selected pigments. Fluid motion is transient; saving colours or parameters does not save the complete bath state.
"use client";
import { useOpticalSurface } from '@/components/optics/useOpticalSurface';
import { createPigmentRenderer, ksFromColor } from '@/components/optics/renderers/pigment';
// Wrap in MovementProvider. Hold on the surface to deposit pigment.
export function Bath() {
const {hostRef,canvasRef,ready} = useOpticalSurface({
createRenderer:createPigmentRenderer, interactive:true,
getUniforms:()=>({u_ks0:ksFromColor([.75,.3,.15]),u_ks1:ksFromColor([.15,.3,.65]),u_ks2:ksFromColor([.8,.7,.3]),u_brush:0,u_rinse:0})
});
return <div ref={hostRef} style={{position:'relative',height:360,background:'#b94d2c'}}>
<canvas ref={canvasRef} style={{position:'absolute',inset:0,width:'100%',height:'100%',opacity:ready?1:0}} />
</div>;
}Measure and save a mixture →Copies component source and tokens directly into your repository with requirements listed for this item: no additional npm dependencies beyond the host framework.
Open-source under MIT. We preserve the source header comment, and invite you to credit the archive on your project's /about, /colophon, or footer. Display our Archival Colophon Seal or copy a citation snippet below. Sites displaying the seal are welcome to submit to our Federation Showcase!
Mount it in your application.
React examples use a client component. Optical surfaces need a sized host, the installed optical stylesheet, and a MovementProvider above the preview. Import your chosen movement tokens and load the fonts separately.
"use client";
import { MovementProvider } from '@/components/MovementProvider';
import '@/registry/optical-components.css';
// Install movement-themes separately for the ten authored palettes.
// import '@/registry/movement-themes.css';
export default function Example() {
return <MovementProvider>{/* place the selected preview here */}</MovementProvider>;
}Model
K/S = (1 − R)² / 2R; R∞ = 1 + K/S − sqrt((K/S)² + 2·K/S)
Source
components/optics/renderers/pigment.ts
Registry item: /r/pigment-bath.json
Citation
Kubelka, P., & Munk, F. (1931). Ein Beitrag zur Optik der Farbanstriche. Zeitschrift für technische Physik, 12, 593–601.