andras/fleeting-garden
andras/fleeting-garden
Watch
1
0
Fork
You've already forked fleeting-garden
 0
Code Issues Pull requests 10 Projects Releases Packages Wiki Activity Actions

more

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-21 07:43:10 +01:00
commit 6bc125be1c
104 changed files with 3084 additions and 2410 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/style/_app-shell.scss
View file

@ -1,8 +1,10 @@
html > body.pre-drawing .dev-stats-overlay,
html > body.is-loading .dev-stats-overlay {
html > body.is-loading .perf-stats-overlay {
display: none;
}
$grain-noise-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='257' height='257' viewBox='0 0 257 257'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='257' height='257' filter='url(%23n)'/%3E%3C/svg%3E");
$grain-noise-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='389' height='389' viewBox='0 0 389 389'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.53' numOctaves='5' seed='41' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='389' height='389' filter='url(%23n)'/%3E%3C/svg%3E");
html > body {
width: 100%;
height: 100vh;
@ -20,16 +22,57 @@ html > body {
overflow: hidden;
> canvas {
position: relative;
z-index: 0;
height: 100%;
width: 100%;
touch-action: none;
}
> .garden-grain {
--garden-grain-strength: 0;
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
contain: strict;
&::before,
&::after {
content: '';
position: absolute;
inset: 0;
}
&::before {
opacity: clamp(0, calc(var(--garden-grain-strength) * 12), 0.44);
background-image: $grain-noise-a;
background-size: 257px 257px;
filter: contrast(190%) brightness(0.66);
mix-blend-mode: multiply;
}
&::after {
opacity: clamp(0, calc(var(--garden-grain-strength) * 7), 0.24);
background-image: $grain-noise-b;
background-position: 73px 41px;
background-size: 389px 389px;
filter: contrast(170%) brightness(1.02);
mix-blend-mode: screen;
transform: rotate(0.01deg);
}
&[hidden] {
display: none;
}
}
> .eraser-preview {
position: absolute;
top: 0;
left: 0;
z-index: 1;
z-index: 3;
width: var(--eraser-preview-size, 96px);
height: var(--eraser-preview-size, 96px);
border: 2px solid rgb(255 234 228 / 88%);
@ -52,7 +95,7 @@ html > body {
}
}
> .dev-stats-overlay {
> .perf-stats-overlay {
position: absolute;
top: max(8px, env(safe-area-inset-top));
left: max(8px, env(safe-area-inset-left));