@konce-pt/backdrop

Animowane tło Koncept UI to dekoracyjna warstwa pod sekcję — rysowana na canvasie zamiast wczytywana jako obraz, więc nie kosztuje transferu, skaluje się bez rozdzielczości i bierze kolory z tokenów motywu.

Ta paczka jest jego rdzeniem: układ siatki i rampa gęstości efektu signal-grid, płynąca wstęga i rampa barw efektu wave, oraz renderery canvas dla obu. Czysty TypeScript bez wiązania z frameworkiem; rachunek barw bierze z @konce-pt/color, swojej jedynej zależności.

Zwykle nie instalujesz go samodzielnie: używa go KptBackdrop z @konce-pt/angular i z @konce-pt/react. Sięgnij po niego wprost, gdy rysujesz ten sam efekt własnym rendererem.

npm i @konce-pt/backdrop

import { createBackdropRenderer } from '@konce-pt/backdrop';

// Renderer żyje tyle, co jeden zestaw ustawień — zmiana wejść buduje nowy.
const renderer = createBackdropRenderer({
  effect: 'wave',
  colors: ['#5B8AF2', '#A86DF2', '#F25B9E'],
  rotation: 12,
});

renderer.resize(1200, 480);   // przy starcie i przy zmianie rozmiaru
renderer.draw(context, 3.4);  // klatka dla 3,4 sekundy animacji

Dwa efekty, jedna zasada

signal-grid bierze gradient z tego, ile kwadratów się pali w danej odległości od kotwicy — nie przyciemnia gotowej, równomiernej siatki. wave opada od linii środkowej krzywą Gaussa, więc w całym kadrze nie ma ani jednej twardej krawędzi; to właśnie odróżnia prąd światła od paska.

W obu wypadkach losowania wyprowadzają się z pozycji, a nie z zapamiętanego stanu, więc zmiana rozmiaru okna zostawia obraz rozpoznawalnym zamiast tasować go od nowa.

Barwy mieszają się dookoła koła

Rampa wstęgi jest zamknięta w pętlę i mieszana po biegunowej postaci OKLab. Interpolacja sRGB miesza wartości po gammie i wychodzi błotem; nawet prostokątny OKLab przecina oś achromatyczną dla przeciwnych odcieni, więc w połowie drogi z niebieskiego w żółty zostaje szarość — dokładnie tam, gdzie prąd świeci najmocniej.

Wstęga liczy się w małym buforze

Efekt nie ma detalu, tylko miękkość. Liczymy go więc w buforze o dłuższym boku 160 px i skalujemy w górę — rozmycie robi za darmo interpolacja przeglądarki. Kilka tysięcy pikseli na klatkę obsługuje kadr dowolnej wielkości.

API

• Renderery — createBackdropRenderer, createSignalGridRenderer, createWaveRenderer, resolveBackdropColors, typy KptBackdropRenderer, KptBackdropRenderOptions, KptBackdropColors
• Siatka — buildSignalGrid, signalGridDensity, signalGridAlpha, typy KptSignalGridOptions, KptSignalGridFrame, KptSignalGridCell
• Wstęga — resolveWave, waveIntensity, waveRamp, waveBuffer, typy KptWaveOptions, KptWaveSettings, KptWaveBuffer, KptWaveHarmonic
• Barwy (re-eksport z @konce-pt/color) — mixOklch, shiftHue, readCssColor, parseHexColor, toHexColor, srgbToOklab, oklabToSrgb, adaptLightness, adaptToSurface, relativeLuminance, prefersDarkContent, typy KptRgb, KptOklab
• Losowanie — kptHash01
• Stałe — KPT_SIGNAL_GRID_*, KPT_WAVE_*, KPT_BACKDROP_MAX_DPR, KPT_BACKDROP_MAX_STEP
• Model — typy KptBackdropAnchor, KptBackdropEffect

Pełny opis: llms.txt (EN) i llms-pl.txt (PL).

Testy

pnpm --filter @konce-pt/backdrop exec node --test "src/**/*.test.ts"

Licencja

MIT © konce.pt