source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
refactor: update video ambient backdrop gradient generation to use oklch color space
- Replace the previous gradient pairs with a new algorithm that utilizes the oklch color space for perceptually uniform hue distribution.
- Introduce functions for hue normalization and CSS conversion to enhance color generation.
- Adjust highlight and scrim opacity values for improved visual consistency.
+33
-31
+33
-31
src/utils/video-ambient-backdrop.ts
+33
-31
src/utils/video-ambient-backdrop.ts
···
1
-
// Hash-seeded gradient + scrim values for video backdrops.
2
-
const VIDEO_AMBIENT_BACKDROP_GRADIENT_PAIRS = [
3
-
['#130436', '#06090d'],
4
-
['#091f47', '#110430'],
5
-
['#002c20', '#06090d'],
6
-
['#390420', '#110430'],
7
-
['#440915', '#110430'],
8
-
['#10131a', '#020305'],
9
-
['#392500', '#110430'],
10
-
['#481805', '#110430'],
11
-
['#002a32', '#081c3f'],
12
-
['#002a32', '#06090d'],
13
-
['#392500', '#06090d'],
14
-
['#091f47', '#00271c'],
15
-
['#130436', '#00271c'],
16
-
['#390420', '#3d0813'],
17
-
['#481805', '#020305'],
18
-
['#440915', '#06090d'],
19
-
['#002c20', '#110430'],
20
-
['#392500', '#401504'],
21
-
] as const;
1
+
// Hash-seeded gradient values for video backdrops using oklch.
2
+
// Golden angle maximizes hue separation across consecutive hashes.
3
+
const GOLDEN_ANGLE = 137.50776;
4
+
5
+
function oklchToCss(l: number, c: number, h: number): string {
6
+
return `oklch(${l.toFixed(3)} ${c.toFixed(3)} ${h.toFixed(2)})`;
7
+
}
8
+
9
+
function normalizeHue(value: number): number {
10
+
const hue = value % 360;
11
+
return hue < 0 ? hue + 360 : hue;
12
+
}
13
+
14
+
function getVideoAmbientBackdropGradientColors(seedUrl: string | null): readonly [string, string] {
15
+
const seed = seedUrl ?? 'fallback';
16
+
17
+
const baseHue = normalizeHue((hashVideoAmbientBackdropSeed(`${seed}:h`) * GOLDEN_ANGLE) % 360);
18
+
19
+
const secondHueOffset = 150 + (hashVideoAmbientBackdropSeed(`${seed}:h2`) % 61);
20
+
const secondHue = normalizeHue(baseHue + secondHueOffset);
21
+
22
+
const lightPrimary = 0.16 + (hashVideoAmbientBackdropSeed(`${seed}:l1`) % 6) * 0.01;
23
+
const lightSecondary = 0.1 + (hashVideoAmbientBackdropSeed(`${seed}:l2`) % 5) * 0.01;
24
+
const chromaPrimary = 0.04 + (hashVideoAmbientBackdropSeed(`${seed}:c1`) % 4) * 0.01;
25
+
const chromaSecondary = 0.02 + (hashVideoAmbientBackdropSeed(`${seed}:c2`) % 3) * 0.01;
26
+
27
+
return [
28
+
oklchToCss(lightPrimary, chromaPrimary, baseHue),
29
+
oklchToCss(lightSecondary, chromaSecondary, secondHue),
30
+
];
31
+
}
22
32
23
33
const VIDEO_AMBIENT_BACKDROP_ANGLES = [155, 170, 185, 200, 215, 230] as const;
24
34
const VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_X = [14, 28, 42, 58, 72, 86] as const;
25
35
const VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_Y = [12, 20, 28, 36] as const;
26
-
const VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_OPACITY = [0.05, 0.07, 0.09, 0.11] as const;
27
-
const VIDEO_AMBIENT_BACKDROP_SCRIM_OPACITY = [0.52, 0.56, 0.6, 0.64] as const;
36
+
const VIDEO_AMBIENT_BACKDROP_HIGHLIGHT_OPACITY = [0.07, 0.09, 0.11, 0.13] as const;
37
+
const VIDEO_AMBIENT_BACKDROP_SCRIM_OPACITY = [0.42, 0.46, 0.5, 0.54] as const;
28
38
29
39
export function hashVideoAmbientBackdropSeed(value: string): number {
30
40
let hash = 0;
···
33
43
hash |= 0;
34
44
}
35
45
return Math.abs(hash);
36
-
}
37
-
38
-
export function getVideoAmbientBackdropGradientColors(
39
-
seedUrl: string | null
40
-
): readonly [string, string] {
41
-
const s = seedUrl ?? 'fallback';
42
-
const index = hashVideoAmbientBackdropSeed(s) % VIDEO_AMBIENT_BACKDROP_GRADIENT_PAIRS.length;
43
-
return VIDEO_AMBIENT_BACKDROP_GRADIENT_PAIRS[index];
44
46
}
45
47
46
48
export function getVideoAmbientBackdropInlineStyle(seedUrl: string | null): string {