Redesign halo page

src/routes/landing-page-halo/webgl/+page.svelte

@@ -26,10 +26,6 @@
                     name: "u_offset",
                     data: "offset",
                 },
-                {
-                    name: "u_scale",
-                    data: "scale",
-                },
             ]}
         ></WebGlFragmentShader>
     </div>
@@ -62,10 +58,16 @@
 
     h1 {
         font-family: "Handjet", sans-serif;
-        font-size: 5rem;
+        font-size: 8rem;
 
         color: rgb(250, 250, 250);
 
         margin: 0;
     }
+
+    @media (max-width: 700px) or (max-height: 700px) {
+        h1 {
+            font-size: 3.5rem;
+        }
+    }
 </style>

src/routes/landing-page-halo/webgl/shader.frag

@@ -5,23 +5,32 @@ out vec4 fragColor;
 
 uniform vec2 u_resolution;
 uniform vec2 u_offset;
-uniform float u_scale;
+
+
+// Pick a pseudo-random number for the given `pos`.
+float random(vec2 pos) {
+    vec2 st = pos / u_resolution;
+    return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);
+}
 
 
 // Determine the value of the pixel at `pos`, if we want to draw a halo at `center` with a the given `radius`.
-float halo(vec2 pos, vec2 center, float radius) {
-    float halo_solid_feather = 3.0 * u_scale;
-    float halo_thickness = 4.5 * u_scale;
-    float halo_glow_spread = 50.0 * u_scale;
+// The `side_length` represents the smaller dimension of the canvas, and is used to scale all values accordingly.
+float halo(vec2 pos, vec2 center, float radius, float side_length) {
+    float halo_solid_feather = 0.02 * side_length;
+    float halo_thickness = 0.017 * side_length;
+    float halo_glow_spread = 0.3 * side_length;
 
     // Create a distance field from the center.
     float center_d = distance(pos, center);
     // Create a distence field for the halo.
     float halo_d = abs(center_d - radius);
     // Draw the 'solid' part of the halo.
-    float halo_solid = smoothstep(halo_d, halo_d + halo_solid_feather, halo_thickness);
-    // Draw the subtle glow around the halo.
-    float halo_glow = pow(1.0 - clamp(halo_d / halo_glow_spread, 0.0, 1.0), 3.0) * 0.2;
+    // By multiplying by 5.0 we generate a value greater than 1.0,
+    // which will make the color saturate into a whiter nuance and give the halo sharper edges.
+    float halo_solid = smoothstep(halo_d, halo_d + halo_solid_feather, halo_thickness) * 5.0;
+    // Draw the glow around the halo.
+    float halo_glow = pow(1.0 - clamp(halo_d / halo_glow_spread, 0.0, 1.0), 5.0) * 0.4 * (0.85 + random(pos) * 0.3);
 
     return halo_solid + halo_glow;
 }
@@ -32,22 +41,29 @@ void main() {
 
     vec2 screen_center = u_resolution / 2.0;
 
+    // This shader automatically scales to fit the smallest dimension of the canvas.
+    float side_length = min(u_resolution.x, u_resolution.y);
+
     // Draw 5 halos to create a sense of depth.
     float v = 0.0;
     for (float i = 0.0; i < 5.0; i++) {
         // As the halos get further back they:
         // - Are placed slightly higher up
-        vec2 center = screen_center + vec2(0.0, i * 3.0 * u_scale);
+        vec2 center = screen_center + vec2(0.0, i * 0.005 * side_length);
         // - Get smaller
-        float radius = 140.0 / (i * 0.15 + 1.0) * u_scale;
+        float radius = (side_length * 0.4) / (i * 0.15 + 1.0);
         // - Gradually fade out
-        float fade_factor = i * 15.0 + 1.0;
+        float fade_factor = pow(0.3, i);
 
-        v += halo(pos, center, radius) / fade_factor;
+        v += halo(pos, center, radius, side_length) * fade_factor;
     }
 
     // Give the halos a yellowish color.
-    vec3 color = vec3(1.0, 1.0, 0.8);
+    float gradient_length = 0.5 * side_length;
+    float gradient_value = clamp((-pos.y + (u_resolution.y + gradient_length) * 0.5) / gradient_length, 0.0, 1.0);
+    vec4 warm_color = vec4(1.0, 0.69, 0.37, 1.0);
+    vec4 cool_color = vec4(0.67, 0.82, 1.0, 1.0);
+    vec4 color = mix(warm_color, cool_color, gradient_value);
 
-    fragColor = vec4(color * v, v);
+    fragColor = vec4(color * v);
 }

src/routes/landing-page-halo/webgpu/+page.svelte

@@ -30,12 +30,6 @@
                     type: "uniform",
                     data: "offset",
                 },
-                {
-                    label: "Scale",
-                    binding: 2,
-                    type: "uniform",
-                    data: "scale",
-                },
             ]}
         ></WebGpuFragmentShader>
     </div>
@@ -68,10 +62,16 @@
 
     h1 {
         font-family: "Handjet", sans-serif;
-        font-size: 5rem;
+        font-size: 8rem;
 
         color: rgb(250, 250, 250);
 
         margin: 0;
     }
+
+    @media (max-width: 700px) or (max-height: 700px) {
+        h1 {
+            font-size: 3.5rem;
+        }
+    }
 </style>

src/routes/landing-page-halo/webgpu/shader.wgsl

@@ -3,20 +3,30 @@
 @group(0) @binding(2) var<uniform> scale: f32;
 
 
+// Pick a pseudo-random number for the given `pos`.
+fn random(pos: vec2f) -> f32 {
+    let st = pos / resolution;
+    return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);
+}
+
+
 // Determine the value of the pixel at `pos`, if we want to draw a halo at `center` with a the given `radius`.
-fn halo(pos: vec2f, center: vec2f, radius: f32) -> f32 { 
-    let halo_solid_feather = 3.0 * scale;
-    let halo_thickness = 4.5 * scale;
-    let halo_glow_spread = 50.0 * scale;
+// The `side_length` represents the smaller dimension of the canvas, and is used to scale all values accordingly.
+fn halo(pos: vec2f, center: vec2f, radius: f32, side_length: f32) -> f32 { 
+    let halo_solid_feather = 0.02 * side_length;
+    let halo_thickness = 0.017 * side_length;
+    let halo_glow_spread = 0.3 * side_length;
 
     // Create a distance field from the center.
     let center_d = distance(pos, center);
     // Create a distence field for the halo.
     let halo_d = abs(center_d - radius);
     // Draw the 'solid' part of the halo.
-    let halo_solid = smoothstep(halo_d, halo_d + halo_solid_feather, halo_thickness);
-    // Draw the subtle glow around the halo.
-    let halo_glow = pow(1.0 - clamp(halo_d / halo_glow_spread, 0.0, 1.0), 3.0) * 0.2;
+    // By multiplying by 5.0 we generate a value greater than 1.0,
+    // which will make the color saturate into a whiter nuance and give the halo sharper edges.
+    let halo_solid = smoothstep(halo_d, halo_d + halo_solid_feather, halo_thickness) * 5.0;
+    // Draw the glow around the halo.
+    let halo_glow = pow(1.0 - clamp(halo_d / halo_glow_spread, 0.0, 1.0), 5.0) * 0.4 * (0.85 + random(pos) * 0.3);
 
     return halo_solid + halo_glow;
 }
@@ -28,22 +38,29 @@ fn fragmentMain(@builtin(position) raw_pos: vec4f) -> @location(0) vec4f {
 
     let screen_center = resolution / 2.0;
 
+    // This shader automatically scales to fit the smallest dimension of the canvas.
+    let side_length = min(resolution.x, resolution.y);
+
     // Draw 5 halos to create a sense of depth.
     var v = 0.0;
     for (var i = 0.0; i < 5.0; i += 1.0) {
         // As the halos get further back they:
         // - Are placed slightly higher up
-        let center = screen_center - vec2(0.0, i * 3.0 * scale);
+        let center = screen_center - vec2(0.0, i * 0.005 * side_length);
         // - Get smaller
-        let radius = 140.0 / (i * 0.15 + 1.0) * scale;
+        let radius = (side_length * 0.4) / (i * 0.15 + 1.0);
         // - Gradually fade out
-        let fade_factor = i * 15.0 + 1.0;
+        let fade_factor = pow(0.3, i);
 
-        v += halo(pos, center, radius) / fade_factor;
+        v += halo(pos, center, radius, side_length) * fade_factor;
     }
 
     // Give the halos a yellowish color.
-    let color = vec3(1.0, 1.0, 0.8);
+    let gradient_length = 0.5 * side_length;
+    let gradient_value = clamp((pos.y - (resolution.y - gradient_length) * 0.5) / gradient_length, 0.0, 1.0);
+    let warm_color = vec4(1.0, 0.69, 0.37, 1.0);
+    let cool_color = vec4(0.67, 0.82, 1.0, 1.0);
+    let color = mix(warm_color, cool_color, gradient_value);
 
-    return vec4(color * v, v);
+    return vec4(color * v);
 }