Canvas Background Utils

weekendsuperhero-io-sistine/canvas-background-utils

UnverifiedUtility

Ramp-driven canvas background engine: createCanvas({ color, style, ramp, steps, angle, speed }) renders gradient / lava / circle styles from the OKLCH ramps.

Install it

npx shadcn@latest add https://raw.githubusercontent.com/Weekendsuperhero-io/sistine/main/canvas-background-utils.json

Source

lib/canvas-background-utils.tsraw.githubusercontent.com/Weekendsuperhero-io/sistine/main/canvas-background-utils.json · first 6 KB

1/**
2 * Canvas Background Utilities
3 *
4 * Ramp-driven canvas backgrounds. Pick a base color (the live glass tint) and a ramp axis
5 * (tonal / lightness ["linear"] / chroma / hue); the colors are generated from the shared
6 * oklch-utils ramps — no hard-coded palettes. Three styles, all returned as a unified
7 * `step(ctx, t)` so the component can either paint one static frame (t = 0) or drive an
8 * animation loop:
9 *   - gradient: a linear gradient of the ramp (base centered), rotatable via `angle`, and
10 *               scrolled "through" the ramp at `speed`.
11 *   - lava:     a deep backdrop derived from the base color, with gooey metaballs colored
12 *               from the ramp (renamed from the old "blobs").
13 *   - circle:   the base color as a backdrop, with soft translucent circles colored from the
14 *               ramp (renamed from the old "circles").
15 */
16 
17import * as React from "react";
18import { formatOklch, type OklchColor, parseOklch, type RampGradientAxis, rampAxisColors } from "./oklch-utils";
19 
20export type CanvasStyle = "gradient" | "lava" | "circle";
21/** Ramp axis the canvas colors follow. `lightness` is the "linear" ramp. */
22export type CanvasRamp = RampGradientAxis;
23 
24/**
25 * Signature hues for the bespoke multi-hue fresco tints. Backgrounds build a multi-hue ramp/gradient
26 * from these (at the canvas's standard L/C) instead of the single `--glass-tint-h`, so a fresco's
27 * canvas/gradient matches its glass instead of collapsing to one color.
28 */
29export const FRESCO_HUES: Record<string, number[]> = {
30  sistine: [
31    75,
32    8,
33    255,
34    158,
35  ],
36  muse: [
37    222,
38    326,
39    74,
40  ],
41  aurora: [
42    152,
43    196,
44    292,
45  ],
46  gloaming: [
47    62,
48    350,
49    278,
50  ],
51};
52 
53/** Live theme-tint snapshot for the JS-painted backdrops (GradientBackground + CanvasBackground):
54 * accent hue when the accent knob is on (else the tint hue), dark mode, the bespoke fresco preset,
55 * and P3 support — kept fresh by ONE MutationObserver on <html> (class + data-glass-tint + style). */
56export function useBackdropTint() {
57  const [state, setState] = React.useState<{
58    hue: number;
59    dark: boolean;
60    p3: boolean;
61    preset: string | undefined;
62  }>({
63    hue: 250,
64    dark: true,
65    p3: false,
66    preset: undefined,
67  });
68  React.useEffect(() => {
69    const root = document.documentElement;
70    const read = () => {
71      const cs = getComputedStyle(root);
72      const acc = Number.parseFloat(cs.getPropertyValue("--accent-h"));
73// … truncated

What it pulls in

Other registry items

@sistine/oklch-utils

Files it writes

lib/canvas-background-utils.ts

More from weekendsuperhero-io/sistine

All 71 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Gradient Utilsgradient-utils	weekendsuperhero-io/sistine	Utilities	Unverified	no deps
Hover Effectshover-effects	weekendsuperhero-io/sistine	Utilities	Unverified	1 dep
Material Systemmaterial	weekendsuperhero-io/sistine	Utilities	Unverified	no deps
OKLCH Utilsoklch-utils	weekendsuperhero-io/sistine	Utilities	Unverified	no deps
Theme Generatortheme-generator	weekendsuperhero-io/sistine	Utilities	Unverified	no deps