Improve circle fade and welcome message

deluksic · Jan 12, 2025 · f86e127 · f86e127
1 parent 356f170
commit f86e127
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 23 deletions.
diff --git a/docs/assets/index-CNCUtGkD.css b/docs/assets/index-CNCUtGkD.css
diff --git a/docs/assets/index-DimjPUGy.css b/docs/assets/index-DimjPUGy.css
diff --git a/docs/assets/index-CVtpojne.js → docs/assets/index-ZI7z1YVS.js b/docs/assets/index-CVtpojne.js → docs/assets/index-ZI7z1YVS.js
diff --git a/docs/index.html b/docs/index.html
@@ -6,8 +6,8 @@
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" type="image/ico" href="./assets/favicon-mtvwWgEY.ico" />
     <title>Solid App</title>
-    <script type="module" crossorigin src="./assets/index-CVtpojne.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-CNCUtGkD.css">
+    <script type="module" crossorigin src="./assets/index-ZI7z1YVS.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-DimjPUGy.css">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/demo/App.module.css b/src/demo/App.module.css
@@ -64,10 +64,16 @@
   pointer-events: none;
 
   & h1 {
+    font-weight: 300;
+    font-size: 3rem;
     margin-top: 0;
   }
 }
 
+.welcomeMessageSubtitle {
+  font-weight: 200;
+}
+
 .canvas {
   image-rendering: pixelated;
 }
diff --git a/src/demo/App.tsx b/src/demo/App.tsx
@@ -166,7 +166,9 @@ export function App() {
       <Show when={circles.length === 0}>
         <div class={ui.welcomeMessage}>
           <h1>Apollonian Circles</h1>
-          <span>Click to create, scroll to zoom.</span>
+          <p class={ui.welcomeMessageSubtitle}>
+            Click to create, scroll to zoom.
+          </p>
         </div>
       </Show>
       <Root>

diff --git a/src/demo/Circles.tsx b/src/demo/Circles.tsx
@@ -103,7 +103,11 @@ const fadeFragmentShader = tgpu
       // adding half a distWidth in order for circles to touch fully
       let disk = clamp((0.5*distWidth + OUTER_RADIUS - dist) / distWidth, 0, 1);
       let fade = linearstep(in.innerRatio, OUTER_RADIUS, dist);
-      return mix(style.fadeColor, style.rimColor, fade * fade) * vec4f(1, 1, 1, disk * fade);
+      let fadeEaseIn = fade * fade;
+      return (
+        mix(style.fadeColor, style.rimColor, fadeEaseIn) *
+        vec4f(1, 1, 1, disk * fadeEaseIn)
+      );
     }
   `,
   )