58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { Main, render_and_copy } from "./common.tsx";
|
|
// when two grids are misaligned and strange patterns you find, that's-a moire
|
|
// ^ bad remembering of https://xkcd.com/1814/
|
|
// some sort of parallax would be *phenomenal*
|
|
// maybe a multi-part post?
|
|
// ^ horrible for sharing
|
|
// shape moire is a thing
|
|
// moires are too headachey and cws would ruin the attention-grabbing aspect
|
|
// draggable window to reveal stuff?
|
|
// i've been reading a lot of homestuck lately so something related to that would be nice
|
|
// background-clip: text?
|
|
// ^ doesn't seem to really work :(
|
|
// vh units will work really well
|
|
// scrolling through my drafts is very headache lol
|
|
|
|
function vh_stripes(
|
|
percent_of_view_height: number,
|
|
...colors: string[]
|
|
): string {
|
|
const out = [];
|
|
const stripe_height = (percent_of_view_height * 100) / colors.length;
|
|
let start = 0;
|
|
|
|
for (const color of colors) {
|
|
const end = start + stripe_height;
|
|
out.push(`${color} ${start}vh ${end}vh`);
|
|
start = end;
|
|
}
|
|
|
|
return out.join(", ");
|
|
}
|
|
|
|
render_and_copy(
|
|
<>
|
|
<div
|
|
id="main"
|
|
style={{
|
|
background: `linear-gradient(${vh_stripes(
|
|
0.9,
|
|
"#a10000",
|
|
"#a15000",
|
|
"#a1a100",
|
|
"#626262",
|
|
"#416600",
|
|
"#008141",
|
|
"#008282",
|
|
"#005682",
|
|
"#000056",
|
|
"#2b0057",
|
|
"#6a006a",
|
|
"#77003c"
|
|
)}) fixed`,
|
|
}}
|
|
></div>
|
|
<div id="fake-main"></div>
|
|
</>
|
|
);
|