Change the background animation

aoc-web/src/main.rs

@@ -61,7 +61,7 @@ fn router(route: Route) -> Html {
     html! {
         <>
             <Header year={year} route={route} />
-            <main>{ main }</main>
+            <main class="fade-in">{ main }</main>
         </>
     }
 }

aoc-web/src/solution.rs

@@ -56,7 +56,7 @@ pub fn solution(props: &Props) -> Html {
     };
 
     html! {
-        <div>
+        <div class="fade-in">
             <pre>
                 <code>{ output.join("\n") }</code>
             </pre>

aoc-web/static/fragment.glsl

@@ -9,10 +9,9 @@ void main() {
   float snow = 0.0;
   for (int k = 0; k < 3; k++) {
     for (int i = 0; i < 8; i++) {
-      float cellSize =
-          2.0 + (float(i) * iResolution.x / 640.); // (float(i) * 3.);
+      float cellSize = floor(2.0 + (float(i) * iResolution.x / 800.));
       float downSpeed =
-          0.3 + (sin(iTime * 0.4 + float(k + i * 20)) + 1.0) * 0.00008;
+          0.2 + (sin(iTime * 0.4 + float(k + i * 20)) + 1.0) * 0.00008;
       vec2 uv = (gl_FragCoord.xy / iResolution.x) +
                 vec2(0.01 * sin((iTime + float(k * 6185)) * 0.6 + float(i)) *
                          (5.0 / float(i)),
@@ -39,7 +38,7 @@ void main() {
 
       float omiVal =
           fract(sin(dot(uvStep.xy, vec2(32.4691, 94.615))) * 31572.1684);
-      if (omiVal < 0.08 ? true : false) {
+      if (omiVal < 0.15) {
         float newd =
             (x + 1.0) * 0.4 *
             clamp(1.9 - d * (15.0 + (x * 6.3)) * (cellSize / 1.4), 0.0, 1.0);

aoc-web/static/styles.css

@@ -1,4 +1,4 @@
-/* Mostly borrowed from https://adventofcode.com/ to get the same look */
+/* Base theme borrowed from https://adventofcode.com/ to get the same look */
 
 html,
 body {
@@ -178,12 +178,6 @@ footer {
   transform: rotateX(-90deg) translateZ(120px);
 }
 
-main {
-  opacity: 0;
-  animation: fadeInAnimation ease-in 400ms;
-  animation-fill-mode: forwards;
-}
-
 @keyframes fadeInAnimation {
   0% {
     opacity: 0;
@@ -217,11 +211,17 @@ code:before {
 
 .highlighted pre {
   font-size: 10pt;
-  display: inline-block;
+  max-width: 900px;
   margin: 0;
   padding: 1rem;
   opacity: 90%;
   overflow-x: scroll;
   background: #10101a !important;
   border: 1px solid #333340;
 }
+
+.fade-in {
+  opacity: 0;
+  animation: fadeInAnimation ease-in 400ms;
+  animation-fill-mode: forwards;
+}