Grain Gradient Field
A section background where the grain lives inside the gradient instead of on top of it. A raymarched signed-distance shape is flat-shaded by one key light, smeared twice by noise-steered blur at quarter and half resolution, warped by a slow standing wave, dragged by a decaying pointer trail, and finally scattered by 24 random taps per pixel. Because that last pass samples the frame rather than overlaying a texture, the grain thickens where the image has contrast and disappears where it is flat, which is the tell no noise PNG can fake. Seven WebGL2 passes plus a ping-pong trail buffer, all eight shaders reproduced byte-for-byte, and every knob art-directable.
npx shadcn@latest add https://ui.aryank.space/r/grain-gradient-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 |
|---|---|---|---|
| baseColor / shapeColor | string | #f7f8ec / #cdcec4 | Flat ground the stack composites over, and the flat-shaded colour of the shape lit by the single key light. |
| aspectWidth / aspectHeight / cover | number / number / boolean | 1440 / 1800 / true | Scene aspect and whether it fills the container or fits inside it. The canvas is anchored top-left so the shape keeps its proportions. |
| dpi / fps | number | 1.5 / 30 | Backing-store multiplier and render gate. The motion is tuned for 30; raising it speeds the drift up because the clocks count frames. |
| interactive / paused | boolean | true / false | Whether the pointer drives the trail and warp, and whether the loop runs at all. Paused holds the first painted frame. |
| config | Partial<GrainFieldConfig> | the scene's own values | Per-knob overrides for all 23 shader parameters: shape placement and lighting, both blur passes, the wave, the pointer trail and the grain. |
| shapeSrc | string | Compronents-hosted PNG | MSDF atlas the shape pass raymarches. RGB carry the multi-channel field and alpha carries a plain SDF; any atlas in that layout changes the silhouette. |
| fadeTopColor / fadeTop / fadeBottomColor / fadeBottom | string / number | #b8b9af / 0.2 / #f7f8ec / 0.2 | Edge fades that blend the field into the sections above and below it. Set either fraction to 0 to remove that fade. |
baseColor / shapeColorcolorThe flat ground and the flat-shaded colour of the lit shape. Everything else in the picture is those two colours pushed around.
config.grainAmount / config.grainQualitytupleScatter radius and how many of the 24 taps are actually sampled. Amount is the grain's size, quality is its smoothness.
config.blurAmount / config.blurAngle / config.blurScaletupleDistance, direction and frequency of the noise-steered smear that turns the hard shape into a soft field.
config.shapeSize / config.shapeX / config.shapeYtupleScale and centre of the raymarched shape, in 0-1 texture space with y counting up from the bottom.