Satin

Installation

Usage

Copyimport { Satin } from "@/components/asciicn/satin";
 
export function Hero() {
  return (
    <section className="relative isolate min-h-[480px]">
      <Satin seed="orchid" className="absolute inset-0 -z-10" />
      <h1>Your headline</h1>
    </section>
  );
}

Each seed rolls a set of ribbons: how many, how they swing, how much slow noise bends them, how wide they are and how often they twist. A ribbon's width follows its twist, so where it turns edge-on it narrows to a bright line, like a strip of film turning in the light. Its rims are the brightest part, a soft halo surrounds it, and the ribbons further back sit a little dimmer. In truecolor each ribbon takes its own hue along the palette.

Satin stays in deep magenta and leans slightly towards purple. It rolls three or four wide ribbons with gentle folds and slow twists. It draws in blocks by default ( ░▒▓█), which gives the folds a woven, soft finish.

Each seed gets its own palette, built in OKLCH: a first hue, then a turn of up to 120 degrees that never runs through the olive and khaki hues that turn muddy at glyph sizes. The palette comes in two versions, deep to bright on dark paper and pale to deep on light paper, and switches with the theme, so the densest glyphs always have the most contrast.

The parts are in lib/ascii/seed.ts (shipped with the ascii-shader item) if you want your own preset: seedParams(seed, kind, options) rolls the parameters, seedField(seed, kind) returns { field, colorField, uniforms } for AsciiShader, and the SeedField component wraps both.

Examples

Behind a call to action

A lower intensity behind a heading and a button.

Three seeds

Three seed strings, three drapes of the same satin.

Props

Notes

• It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
• With reduced motion turned on, it draws one still frame at stillTime and stops.
• By default it does not react to the pointer: moving the mouse over it changes nothing.
• It pauses when scrolled out of view or when the tab is hidden, and releases its WebGL context when far offscreen. Without WebGL it shows soft CSS glows in the seed's colours.
• A seed is rolled once, on the CPU, in a few milliseconds: a small exposure check samples the field at 40×22 at three moments and re-rolls (up to eight times) until between a quarter and three fifths of the box carries a glyph, then sets the gain so the brightest glyphs reach the top of the ramp. Changing seed re-rolls; changing the look props does not. See Performance.