Refactor font selection in Examples page to group fonts by categories; update Home page to use FluidWaterfall preset; remove unused CloudyShape and Waterfall presets; adjust WaterReflection preset parameters for improved visual effects.

collectioneur · collectioneur · commit 80ee076f7fb7 · 2026-03-01T18:43:53.000+01:00
diff --git a/packages/lib/src/interaction.tsx b/packages/lib/src/interaction.tsx
@@ -150,7 +150,9 @@ export function InteractionArea({ children, className, style }: InteractionAreaP
       const activePointerId = activePointerIdRef.current;
 
       if (activePointerId == null) {
-        if (!isInsideHost(event)) return;
+        const canBootstrapTracking =
+          event.pointerType === "mouse" || isInsideHost(event);
+        if (!canBootstrapTracking) return;
         activePointerIdRef.current = event.pointerId;
       }
 
diff --git a/packages/site/index.html b/packages/site/index.html
@@ -6,7 +6,7 @@
     <title>ShaderUI</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&family=Roboto:wght@400;600;700&family=Open+Sans:wght@400;600;700&family=Lato:wght@400;600;700&family=Montserrat:wght@400;600;700&family=Poppins:wght@400;600;700&family=Bebas+Neue&family=Oswald:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&family=Cormorant+Garamond:wght@400;600;700&family=Raleway:wght@400;600;700&family=Pacifico&family=Lobster&family=Cinzel:wght@400;600;700&family=DM+Serif+Display:ital@0;1&family=Syne:wght@400;600;800&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/packages/site/src/pages/Examples.tsx b/packages/site/src/pages/Examples.tsx
@@ -4,13 +4,35 @@ import type { FontConfig } from "shaderui";
 import { UniformControls } from "../components/UniformControls";
 import { presetRegistry } from "../presets/registry";
 
-const FONT_FAMILIES = [
-  "Inter",
-  "Helvetica",
-  "Georgia",
-  "Arial",
-  "system-ui",
-  "sans-serif",
+const FONT_GROUPS: { label: string; fonts: string[] }[] = [
+  {
+    label: "Popular & system",
+    fonts: [
+      "Inter",
+      "Roboto",
+      "Open Sans",
+      "Lato",
+      "Montserrat",
+      "Poppins",
+      "Helvetica",
+      "Arial",
+      "Georgia",
+      "system-ui",
+      "sans-serif",
+    ],
+  },
+  {
+    label: "Display & distinctive",
+    fonts: ["Bebas Neue", "Oswald", "Space Grotesk", "Syne", "DM Serif Display"],
+  },
+  {
+    label: "Serif & elegant",
+    fonts: ["Playfair Display", "Cormorant Garamond", "Cinzel", "Raleway"],
+  },
+  {
+    label: "Script & casual",
+    fonts: ["Pacifico", "Lobster"],
+  },
 ];
 
 const panelStyle: CSSProperties = {
@@ -211,10 +233,14 @@ export function Examples() {
             onChange={(e) => updateActiveProp("font", { ...font, family: e.target.value })}
             style={inputStyle}
           >
-            {FONT_FAMILIES.map((f: string) => (
-              <option key={f} value={f}>
-                {f}
-              </option>
+            {FONT_GROUPS.map((group) => (
+              <optgroup key={group.label} label={group.label}>
+                {group.fonts.map((f) => (
+                  <option key={f} value={f}>
+                    {f}
+                  </option>
+                ))}
+              </optgroup>
             ))}
           </select>
           <div style={{ display: "flex", gap: 12, marginTop: 12, alignItems: "center" }}>
diff --git a/packages/site/src/pages/Home.tsx b/packages/site/src/pages/Home.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Waterfall } from "../presets/Waterfall";
+import { FluidWaterfall } from "../presets/FluidWaterfall";
 import { type FontConfig } from "shaderui";
 
 const MOBILE_BREAKPOINT = 768;
@@ -93,7 +93,7 @@ export function Home() {
             top: -titlePadding + 150,
           }}
         >
-          <Waterfall
+          <FluidWaterfall
             text="shaderUI"
             font={
               {
diff --git a/packages/site/src/presets/FluidWaterfall.tsx b/packages/site/src/presets/FluidWaterfall.tsx
@@ -1,3 +1,6 @@
+/**
+ * Fluid Waterfall preset — spiral/fluid text effect with iridescence and distortion.
+ */
 import React, { useRef, useMemo, useEffect } from "react";
 import tgpu from "typegpu";
 import * as d from "typegpu/data";
@@ -20,7 +23,11 @@ import { collectUniformControls, type PresetMeta } from "./types";
 // Everything is packed into ONE WGSL struct → ONE GPU buffer → no WebGPU limit issues.
 const U = defineUniforms({
   // --- interaction ---
-  mouseUV: { schema: d.vec2f, value: d.vec2f(-2, -2), control: { editable: false } },
+  mouseUV: {
+    schema: d.vec2f,
+    value: d.vec2f(-2, -2),
+    control: { editable: false },
+  },
   time: { schema: d.f32, value: 0, control: { editable: false } },
 
   // --- SPIRAL_* controls global swirl shape, speed, and micro-perturbation ---
@@ -168,9 +175,9 @@ const U = defineUniforms({
   // --- SDF_* and AA_* control edge extraction and antialias softening ---
   SDF_ALPHA_EDGE_MAX: { schema: d.f32, value: 100.0 },
   SDF_ALPHA_EDGE_OFFSET: { schema: d.f32, value: 40.0 },
-  AA_FWIDTH_SCALE: { schema: d.f32, value: 1.5 },
+  AA_FWIDTH_SCALE: { schema: d.f32, value: 1.0 },
 
-  // --- COLOR_* defines the waterfall palette ---
+  // --- COLOR_* defines the fluid waterfall palette ---
   COLOR_PRIMARY: { schema: d.vec4f, value: d.vec4f(0.871, 0.267, 0.231, 1.0) },
   COLOR_SECONDARY: { schema: d.vec4f, value: d.vec4f(0.4, 0.0, 0.706, 1.0) },
   COLOR_TERTIARY: {
@@ -179,7 +186,7 @@ const U = defineUniforms({
   },
 });
 
-const waterFragment = tgpu["~unstable"].fragmentFn({
+const fluidWaterfallFragment = tgpu["~unstable"].fragmentFn({
   in: { uv: d.vec2f },
   out: d.vec4f,
 })(({ uv }) => {
@@ -237,10 +244,7 @@ const waterFragment = tgpu["~unstable"].fragmentFn({
     u.PAINT_CONTRAST_OFFSET;
   const paintRes = std.min(
     u.PAINT_MAX_RES,
-    std.max(
-      d.f32(0.0),
-      std.length(uvSpiral) * u.PAINT_RES_SCALE * contrastMod,
-    ),
+    std.max(d.f32(0.0), std.length(uvSpiral) * u.PAINT_RES_SCALE * contrastMod),
   );
   const circleSharpness = u.PAINT_CIRCLE_SHARPNESS;
   const c1p = std.max(
@@ -282,12 +286,20 @@ const waterFragment = tgpu["~unstable"].fragmentFn({
     u.IRIDESCENCE_BLEND23_END,
     tSmooth,
   );
-  const blend31 = std.smoothstep(u.IRIDESCENCE_BLEND31_START, d.f32(1.0), tSmooth);
+  const blend31 = std.smoothstep(
+    u.IRIDESCENCE_BLEND31_START,
+    d.f32(1.0),
+    tSmooth,
+  );
   const colorPrimary = u.COLOR_PRIMARY;
   const colorSecondary = u.COLOR_SECONDARY;
   const colorTertiary = u.COLOR_TERTIARY;
   const iridescent = std.mix(
-    std.mix(std.mix(colorPrimary, colorSecondary, blend12), colorTertiary, blend23),
+    std.mix(
+      std.mix(colorPrimary, colorSecondary, blend12),
+      colorTertiary,
+      blend23,
+    ),
     colorPrimary,
     blend31,
   );
@@ -298,10 +310,7 @@ const waterFragment = tgpu["~unstable"].fragmentFn({
   const c3pVec = d
     .vec4f(colorTertiary.x, colorTertiary.y, colorTertiary.z, colorPrimary.w)
     .mul(c3p);
-  const blend = colorPrimary
-    .mul(c1p)
-    .add(colorSecondary.mul(c2p))
-    .add(c3pVec);
+  const blend = colorPrimary.mul(c1p).add(colorSecondary.mul(c2p)).add(c3pVec);
   const baseColor = colorPrimary
     .mul(contrastFactor)
     .add(blend.mul(oneMinusCf))
@@ -313,7 +322,10 @@ const waterFragment = tgpu["~unstable"].fragmentFn({
   const noiseScale = u.DISTORTION_NOISE_SCALE;
   const noisePos = uv.mul(noiseScale);
 
-  const timeOffset = d.vec2f(d.f32(0.0), time * u.DISTORTION_TIME_OFFSET_Y_SPEED);
+  const timeOffset = d.vec2f(
+    d.f32(0.0),
+    time * u.DISTORTION_TIME_OFFSET_Y_SPEED,
+  );
   const noiseVal = perlin2d.sample(noisePos.add(timeOffset));
 
   const distFromCenter =
@@ -332,7 +344,8 @@ const waterFragment = tgpu["~unstable"].fragmentFn({
 
   const pullStrength = u.DISTORTION_PULL_STRENGTH;
 
-  const yDisplacement = dirToCenter * distortionMask * streakNoise * pullStrength;
+  const yDisplacement =
+    dirToCenter * distortionMask * streakNoise * pullStrength;
 
   const noiseValX = perlin2d.sample(uv.add(timeOffset));
   const distortionMaskX = std.smoothstep(
@@ -341,7 +354,8 @@ const waterFragment = tgpu["~unstable"].fragmentFn({
     distFromCenter,
   );
 
-  const xDisplacement = noiseValX * distortionMaskX * u.DISTORTION_X_DISPLACEMENT_SCALE;
+  const xDisplacement =
+    noiseValX * distortionMaskX * u.DISTORTION_X_DISPLACEMENT_SCALE;
 
   const flareMask = std.pow(distFromCenter, u.FLARE_MASK_POW);
 
@@ -398,7 +412,7 @@ const DEFAULT_PADDING = {
   paddingLeft: 150,
 } satisfies Padding;
 
-export interface WaterfallProps {
+export interface FluidWaterfallProps {
   text: string;
   font: FontConfig;
   padding?: Partial<Padding>;
@@ -412,7 +426,7 @@ export interface WaterfallProps {
   className?: string;
 }
 
-function WaterfallCanvas({
+function FluidWaterfallCanvas({
   text,
   font,
   padding = DEFAULT_PADDING,
@@ -424,7 +438,7 @@ function WaterfallCanvas({
   FLARE_STRENGTH = 0.5,
   style,
   className,
-}: WaterfallProps) {
+}: FluidWaterfallProps) {
   const interactionUniforms = useShaderInteractionUniforms();
   const timeRef = useRef(0);
   const spiralSpeedRef = useRef(SPIRAL_SPEED);
@@ -472,7 +486,7 @@ function WaterfallCanvas({
   return (
     <ShaderCanvas
       source={source}
-      fragment={waterFragment}
+      fragment={fluidWaterfallFragment}
       uniformBindingsRef={uniformBindings}
       padding={padding}
       style={style}
@@ -481,10 +495,10 @@ function WaterfallCanvas({
   );
 }
 
-export function Waterfall(props: WaterfallProps) {
+export function FluidWaterfall(props: FluidWaterfallProps) {
   return (
     <InteractionArea style={{ display: "inline-block" }}>
-      <WaterfallCanvas {...props} />
+      <FluidWaterfallCanvas {...props} />
     </InteractionArea>
   );
 }
@@ -496,18 +510,18 @@ const DEFAULT_FONT: FontConfig = {
 };
 
 export const presetMeta = {
-  id: "waterfall",
-  name: "Waterfall",
-  component: Waterfall,
+  id: "fluid-waterfall",
+  name: "Fluid Waterfall",
+  component: FluidWaterfall,
   defaultProps: {
-    text: "Hello",
-    font: DEFAULT_FONT,
-    SPIRAL_SPEED: 7.0,
-    SPIRAL_AMOUNT: 3.0,
-    PAINT_CONTRAST: 28.0,
-    IRIDESCENCE_MIX_FACTOR: 0.6,
-    DISTORTION_PULL_STRENGTH: 2.0,
-    FLARE_STRENGTH: 0.5,
+    text: "Waterfall",
+    font: { family: "Cormorant Garamond", size: 120, weight: 700 },
+    SPIRAL_SPEED: 17.5,
+    SPIRAL_AMOUNT: 0.0,
+    PAINT_CONTRAST: 9.0,
+    IRIDESCENCE_MIX_FACTOR: 0.0,
+    DISTORTION_PULL_STRENGTH: 0.9,
+    FLARE_STRENGTH: 0.0,
   },
   uniformControls: collectUniformControls(U.specs),
-} satisfies PresetMeta<WaterfallProps>;
+} satisfies PresetMeta<FluidWaterfallProps>;
diff --git a/packages/site/src/presets/MorphingCrystal.tsx b/packages/site/src/presets/MorphingCrystal.tsx
diff --git a/packages/site/src/presets/WaterReflection.tsx b/packages/site/src/presets/WaterReflection.tsx

Original file line number	Diff line number	Diff line change
`@@ -150,7 +150,9 @@ export function InteractionArea({ children, className, style }: InteractionAreaP`
`150`	`150`	`const activePointerId = activePointerIdRef.current;`
`151`	`151`
`152`	`152`	`if (activePointerId == null) {`
`153`		`- if (!isInsideHost(event)) return;`
	`153`	`+ const canBootstrapTracking =`
	`154`	`+ event.pointerType === "mouse" \|\| isInsideHost(event);`
	`155`	`+ if (!canBootstrapTracking) return;`
`154`	`156`	`activePointerIdRef.current = event.pointerId;`
`155`	`157`	`}`
`156`	`158`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`import React, { useState, useEffect } from "react";`
`2`		`-import { Waterfall } from "../presets/Waterfall";`
	`2`	`+import { FluidWaterfall } from "../presets/FluidWaterfall";`
`3`	`3`	`import { type FontConfig } from "shaderui";`
`4`	`4`
`5`	`5`	`const MOBILE_BREAKPOINT = 768;`
`@@ -93,7 +93,7 @@ export function Home() {`
`93`	`93`	`top: -titlePadding + 150,`
`94`	`94`	`}}`
`95`	`95`	`>`
`96`		`- <Waterfall`
	`96`	`+ <FluidWaterfall`
`97`	`97`	`text="shaderUI"`
`98`	`98`	`font={`
`99`	`99`	`{`