react-native-effects 0.0.1 → 0.2.0

package/src/components/ShaderViewWithPanGesture/index.tsx

@@ -0,0 +1,225 @@
+import { useCallback, useRef } from 'react';
+import { StyleSheet, View, type LayoutChangeEvent } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import {
+  createSynchronizable,
+  type Synchronizable,
+} from 'react-native-worklets';
+import ShaderView from '../ShaderView';
+import { useParamsSynchronizable } from '../../hooks/useParamsSynchronizable';
+import type { ShaderViewProps } from '../ShaderView/types';
+
+/**
+ * A {@link ShaderView} that feeds touch input into the shader's `u.live`:
+ *
+ *   - `live.x` → pointer X, normalized 0..1 (left → right)
+ *   - `live.y` → pointer Y, normalized 0..1 (bottom → top, matching UV space)
+ *   - `live.z` → 1.0 while touching, 0.0 when released
+ *   - `live.w` → 0.0 (reserved)
+ *
+ * Dragging moves the pointer **relatively** — it pushes from where the pointer
+ * already is rather than jumping under the finger — and a fling lets it glide to
+ * a stop. The position is **remembered**: it stays wherever it ended and is
+ * never reset; only the "touched" flag (`live.z`) toggles on release. A
+ * shader can read `live.xy` as a stable resting position and use `live.z`
+ * purely for touch-driven emphasis, so the effect never snaps back.
+ *
+ * The resting value before the first touch is `[0, 0, 0, 0]` by default; pass
+ * `initialParamsSynchronizable` to seed it — e.g. `[0.5, 0.5, 0, 0]` to start a
+ * pointer at screen center.
+ *
+ * The drag runs as a **worklet on the UI thread** and writes the synchronizable
+ * directly, so pointer updates never hop to the JS thread — matching the rest of
+ * the library, which renders off the JS thread. The render runtime reads the
+ * same synchronizable each frame.
+ */
+export type ShaderViewWithPanGestureProps = Omit<
+  ShaderViewProps,
+  'paramsSynchronizable'
+> & {
+  /**
+   * Initial value for the gesture channel (`u.live`) before the first touch.
+   * Defaults to `[0, 0, 0, 0]`. Use e.g. `[0.5, 0.5, 0, 0]` to rest a pointer at
+   * screen center.
+   */
+  initialParamsSynchronizable?: readonly [number, number, number, number];
+};
+
+export default function ShaderViewWithPanGesture({
+  style,
+  initialParamsSynchronizable = [0, 0, 0, 0],
+  ...props
+}: ShaderViewWithPanGestureProps) {
+  const { paramsSynchronizable } = useParamsSynchronizable(
+    initialParamsSynchronizable
+  );
+
+  // View size, read inside the gesture worklets to normalize pointer coords.
+  const sizeRef = useRef<Synchronizable<Float64Array> | null>(null);
+  if (sizeRef.current === null) {
+    sizeRef.current = createSynchronizable<Float64Array>(Float64Array.of(1, 1));
+  }
+  const sizeSynchronizable = sizeRef.current;
+
+  // Generation of the current post-release glide; bumped to cancel an old one.
+  const momentumRef = useRef<Synchronizable<Float64Array> | null>(null);
+  if (momentumRef.current === null) {
+    momentumRef.current = createSynchronizable<Float64Array>(
+      Float64Array.of(0)
+    );
+  }
+  const momentumSynchronizable = momentumRef.current;
+
+  // Pointer position when the current drag began — the pan moves the pointer
+  // relative to this, so a drag pushes from where it was rather than jumping.
+  const panStartRef = useRef<Synchronizable<Float64Array> | null>(null);
+  if (panStartRef.current === null) {
+    panStartRef.current = createSynchronizable<Float64Array>(
+      Float64Array.of(0, 0)
+    );
+  }
+  const panStartSynchronizable = panStartRef.current;
+
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      const { width, height } = e.nativeEvent.layout;
+      sizeSynchronizable.setBlocking(() =>
+        Float64Array.of(width || 1, height || 1)
+      );
+    },
+    [sizeSynchronizable]
+  );
+
+  // Worklet: runs on the UI thread and writes the normalized pointer straight
+  // into the synchronizable the render runtime reads, so a pointer move never
+  // touches the JS thread.
+  const writePointer = (nx: number, ny: number, active: number) => {
+    'worklet';
+    const x = Math.min(1, Math.max(0, nx));
+    const y = Math.min(1, Math.max(0, ny));
+    paramsSynchronizable.setBlocking(() => Float64Array.of(x, y, active, 0));
+  };
+
+  const stopMomentum = () => {
+    'worklet';
+    const next = (momentumSynchronizable.getDirty()[0] || 0) + 1;
+    momentumSynchronizable.setBlocking(() => Float64Array.of(next));
+  };
+
+  // Drop the touched flag in place — safety net for a gesture cancelled with no
+  // onEnd, so the flag never sticks.
+  const releaseFlag = () => {
+    'worklet';
+    const p = paramsSynchronizable.getDirty();
+    const x = p[0] || 0;
+    const y = p[1] || 0;
+    paramsSynchronizable.setBlocking(() => Float64Array.of(x, y, 0, 0));
+  };
+
+  // After release, drift from the last position along the fling velocity and
+  // decay to a stop — a little inertia. Runs on the UI thread via rAF, like the
+  // render loop, writing each frame into the same synchronizable.
+  const startMomentum = (velX: number, velY: number) => {
+    'worklet';
+    const s = sizeSynchronizable.getDirty();
+    const w = s[0] || 1;
+    const h = s[1] || 1;
+
+    // Flick speed in normalized units/sec, scaled to a subtle glide (Y flipped).
+    const SCALE = 0.12;
+    let vx = (velX / w) * SCALE;
+    let vy = (-velY / h) * SCALE;
+
+    const p = paramsSynchronizable.getDirty();
+    let x = p[0] || 0;
+    let y = p[1] || 0;
+
+    // Claim this glide; a newer one bumps the generation and this loop bails.
+    const gen = (momentumSynchronizable.getDirty()[0] || 0) + 1;
+    momentumSynchronizable.setBlocking(() => Float64Array.of(gen));
+
+    const FRICTION = 2; // 1/s — higher stops sooner
+    let last = -1;
+
+    // Plain closure (no 'worklet') so its accumulators and self-reference
+    // survive across frames; a serialized worklet would snapshot them by value.
+    const step = (now: number) => {
+      if ((momentumSynchronizable.getDirty()[0] || 0) !== gen) {
+        return;
+      }
+      const dt = last < 0 ? 0 : (now - last) / 1000;
+      last = now;
+
+      x = Math.min(1, Math.max(0, x + vx * dt));
+      y = Math.min(1, Math.max(0, y + vy * dt));
+      const decay = Math.exp(-FRICTION * dt);
+      vx = vx * decay;
+      vy = vy * decay;
+
+      paramsSynchronizable.setBlocking(() => Float64Array.of(x, y, 0, 0));
+
+      if (Math.abs(vx) + Math.abs(vy) > 0.0008) {
+        requestAnimationFrame(step);
+      }
+    };
+    requestAnimationFrame(step);
+  };
+
+  // Drag moves the pointer *relatively*: grab anywhere and push it from where it
+  // is, rather than snapping it under the finger. A plain tap leaves it put.
+  const pan = Gesture.Pan()
+    .onBegin(() => {
+      'worklet';
+      stopMomentum();
+      const p = paramsSynchronizable.getDirty();
+      const sx = p[0] || 0;
+      const sy = p[1] || 0;
+      panStartSynchronizable.setBlocking(() => Float64Array.of(sx, sy));
+      writePointer(sx, sy, 1);
+    })
+    .onUpdate((e) => {
+      'worklet';
+      const s = sizeSynchronizable.getDirty();
+      const w = s[0] || 1;
+      const h = s[1] || 1;
+      const start = panStartSynchronizable.getDirty();
+      // Add the drag delta; Y is flipped to match the shader's UV space.
+      writePointer(
+        (start[0] || 0) + e.translationX / w,
+        (start[1] || 0) - e.translationY / h,
+        1
+      );
+    })
+    .onEnd((e) => {
+      'worklet';
+      const p = paramsSynchronizable.getDirty();
+      writePointer(p[0] || 0, p[1] || 0, 0);
+      startMomentum(e.velocityX, e.velocityY);
+    })
+    .onFinalize(() => {
+      'worklet';
+      releaseFlag();
+    });
+
+  return (
+    <GestureDetector gesture={pan}>
+      <View
+        style={[styles.fill, style]}
+        onLayout={onLayout}
+        collapsable={false}
+      >
+        <ShaderView
+          {...props}
+          paramsSynchronizable={paramsSynchronizable}
+          style={StyleSheet.absoluteFill}
+        />
+      </View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+});

package/src/components/Silk.tsx

@@ -0,0 +1,102 @@
+import { useMemo } from 'react';
+import type { ViewProps } from 'react-native';
+import type { ColorInput } from '../utils/colors';
+import ShaderView from './ShaderView';
+
+type Props = ViewProps & {
+  /** The base color for the silk effect. */
+  color?: ColorInput;
+  /** Animation speed multiplier. Default: 1.0 */
+  speed?: number;
+  /** Scale of the pattern. Default: 1.0 */
+  scale?: number;
+  /** Rotation angle in radians. Default: 0.0 */
+  rotation?: number;
+  /** Intensity of the noise grain. Default: 1.5 */
+  noiseIntensity?: number;
+};
+
+export default function Silk({
+  color = '#7B7481',
+  speed = 1.0,
+  scale = 1.0,
+  rotation = 0.0,
+  noiseIntensity = 1.5,
+  ...viewProps
+}: Props) {
+  const colors = useMemo(() => [color], [color]);
+  const params = useMemo(
+    () => [scale, rotation, noiseIntensity],
+    [scale, rotation, noiseIntensity]
+  );
+
+  return (
+    <ShaderView
+      fragmentShader={SILK_SHADER}
+      colors={colors}
+      params={params}
+      speed={speed}
+      isStatic={false}
+      {...viewProps}
+    />
+  );
+}
+
+const SILK_SHADER = /* wgsl */ `
+struct Uniforms {
+  resolution: vec4<f32>,
+  time:       vec4<f32>,
+  color0:     vec4<f32>,
+  color1:     vec4<f32>,
+  params0:    vec4<f32>,
+  params1:    vec4<f32>,
+};
+@group(0) @binding(0) var<uniform> u: Uniforms;
+
+const e = 2.71828182845904523536;
+
+fn noise(texCoord: vec2<f32>) -> f32 {
+  let G = e;
+  let r = (G * sin(G * texCoord));
+  return fract(r.x * r.y * (1.0 + texCoord.x));
+}
+
+fn rotateUvs(uv: vec2<f32>, angle: f32) -> vec2<f32> {
+  let c = cos(angle);
+  let s = sin(angle);
+  let rot = mat2x2<f32>(c, -s, s, c);
+  return rot * uv;
+}
+
+@fragment
+fn main(@location(0) ndc: vec2<f32>) -> @location(0) vec4<f32> {
+  let time = u.time.x;
+  let scale = u.params0.x;
+  let rotation = u.params0.y;
+  let noiseIntensity = u.params0.z;
+
+  let resolution2D = u.resolution.xy;
+  let vUv = ndc * 0.5 + vec2<f32>(0.5, 0.5);
+  let fragCoord = vUv * resolution2D;
+
+  let rnd = noise(fragCoord);
+  let uv = rotateUvs(vUv * scale, rotation);
+  var tex = uv * scale;
+  let tOffset = time;
+
+  tex.y = tex.y + 0.03 * sin(8.0 * tex.x - tOffset);
+
+  let pattern = 0.6 +
+                0.4 * sin(5.0 * (tex.x + tex.y +
+                                 cos(3.0 * tex.x + 5.0 * tex.y) +
+                                 0.02 * tOffset) +
+                         sin(20.0 * (tex.x + tex.y - 0.1 * tOffset)));
+
+  var col = u.color0 * vec4<f32>(pattern, pattern, pattern, 1.0) -
+            vec4<f32>(rnd / 15.0 * noiseIntensity, rnd / 15.0 * noiseIntensity,
+                     rnd / 15.0 * noiseIntensity, 0.0);
+  col.a = u.color0.a;
+
+  return clamp(col, vec4<f32>(0.0), vec4<f32>(1.0));
+}
+`;

package/src/consts.ts

@@ -0,0 +1,152 @@
+export const NAMED_COLORS: Record<string, number> = {
+  // Basic colors
+  black: 0x000000,
+  white: 0xffffff,
+  red: 0xff0000,
+  green: 0x008000,
+  blue: 0x0000ff,
+  yellow: 0xffff00,
+  cyan: 0x00ffff,
+  magenta: 0xff00ff,
+  silver: 0xc0c0c0,
+  gray: 0x808080,
+  grey: 0x808080,
+  maroon: 0x800000,
+  olive: 0x808000,
+  lime: 0x00ff00,
+  aqua: 0x00ffff,
+  teal: 0x008080,
+  navy: 0x000080,
+  fuchsia: 0xff00ff,
+  purple: 0x800080,
+
+  // Extended colors
+  aliceblue: 0xf0f8ff,
+  antiquewhite: 0xfaebd7,
+  aquamarine: 0x7fffd4,
+  azure: 0xf0ffff,
+  beige: 0xf5f5dc,
+  bisque: 0xffe4c4,
+  blanchedalmond: 0xffebcd,
+  blueviolet: 0x8a2be2,
+  brown: 0xa52a2a,
+  burlywood: 0xdeb887,
+  cadetblue: 0x5f9ea0,
+  chartreuse: 0x7fff00,
+  chocolate: 0xd2691e,
+  coral: 0xff7f50,
+  cornflowerblue: 0x6495ed,
+  cornsilk: 0xfff8dc,
+  crimson: 0xdc143c,
+  darkblue: 0x00008b,
+  darkcyan: 0x008b8b,
+  darkgoldenrod: 0xb8860b,
+  darkgray: 0xa9a9a9,
+  darkgrey: 0xa9a9a9,
+  darkgreen: 0x006400,
+  darkkhaki: 0xbdb76b,
+  darkmagenta: 0x8b008b,
+  darkolivegreen: 0x556b2f,
+  darkorange: 0xff8c00,
+  darkorchid: 0x9932cc,
+  darkred: 0x8b0000,
+  darksalmon: 0xe9967a,
+  darkseagreen: 0x8fbc8f,
+  darkslateblue: 0x483d8b,
+  darkslategray: 0x2f4f4f,
+  darkslategrey: 0x2f4f4f,
+  darkturquoise: 0x00ced1,
+  darkviolet: 0x9400d3,
+  deeppink: 0xff1493,
+  deepskyblue: 0x00bfff,
+  dimgray: 0x696969,
+  dimgrey: 0x696969,
+  dodgerblue: 0x1e90ff,
+  firebrick: 0xb22222,
+  floralwhite: 0xfffaf0,
+  forestgreen: 0x228b22,
+  gainsboro: 0xdcdcdc,
+  ghostwhite: 0xf8f8ff,
+  gold: 0xffd700,
+  goldenrod: 0xdaa520,
+  greenyellow: 0xadff2f,
+  honeydew: 0xf0fff0,
+  hotpink: 0xff69b4,
+  indianred: 0xcd5c5c,
+  indigo: 0x4b0082,
+  ivory: 0xfffff0,
+  khaki: 0xf0e68c,
+  lavender: 0xe6e6fa,
+  lavenderblush: 0xfff0f5,
+  lawngreen: 0x7cfc00,
+  lemonchiffon: 0xfffacd,
+  lightblue: 0xadd8e6,
+  lightcoral: 0xf08080,
+  lightcyan: 0xe0ffff,
+  lightgoldenrodyellow: 0xfafad2,
+  lightgray: 0xd3d3d3,
+  lightgrey: 0xd3d3d3,
+  lightgreen: 0x90ee90,
+  lightpink: 0xffb6c1,
+  lightsalmon: 0xffa07a,
+  lightseagreen: 0x20b2aa,
+  lightskyblue: 0x87cefa,
+  lightslategray: 0x778899,
+  lightslategrey: 0x778899,
+  lightsteelblue: 0xb0c4de,
+  lightyellow: 0xffffe0,
+  limegreen: 0x32cd32,
+  linen: 0xfaf0e6,
+  mediumaquamarine: 0x66cdaa,
+  mediumblue: 0x0000cd,
+  mediumorchid: 0xba55d3,
+  mediumpurple: 0x9370db,
+  mediumseagreen: 0x3cb371,
+  mediumslateblue: 0x7b68ee,
+  mediumspringgreen: 0x00fa9a,
+  mediumturquoise: 0x48d1cc,
+  mediumvioletred: 0xc71585,
+  midnightblue: 0x191970,
+  mintcream: 0xf5fffa,
+  mistyrose: 0xffe4e1,
+  moccasin: 0xffe4b5,
+  navajowhite: 0xffdead,
+  oldlace: 0xfdf5e6,
+  olivedrab: 0x6b8e23,
+  orange: 0xffa500,
+  orangered: 0xff4500,
+  orchid: 0xda70d6,
+  palegoldenrod: 0xeee8aa,
+  palegreen: 0x98fb98,
+  paleturquoise: 0xafeeee,
+  palevioletred: 0xdb7093,
+  papayawhip: 0xffefd5,
+  peachpuff: 0xffdab9,
+  peru: 0xcd853f,
+  pink: 0xffc0cb,
+  plum: 0xdda0dd,
+  powderblue: 0xb0e0e6,
+  rosybrown: 0xbc8f8f,
+  royalblue: 0x4169e1,
+  saddlebrown: 0x8b4513,
+  salmon: 0xfa8072,
+  sandybrown: 0xf4a460,
+  seagreen: 0x2e8b57,
+  seashell: 0xfff5ee,
+  sienna: 0xa0522d,
+  skyblue: 0x87ceeb,
+  slateblue: 0x6a5acd,
+  slategray: 0x708090,
+  slategrey: 0x708090,
+  snow: 0xfffafa,
+  springgreen: 0x00ff7f,
+  steelblue: 0x4682b4,
+  tan: 0xd2b48c,
+  thistle: 0xd8bfd8,
+  tomato: 0xff6347,
+  turquoise: 0x40e0d0,
+  violet: 0xee82ee,
+  wheat: 0xf5deb3,
+  whitesmoke: 0xf5f5f5,
+  yellowgreen: 0x9acd32,
+};

package/src/hooks/useClock.ts

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import {
+  useFrameCallback,
+  useSharedValue,
+  type FrameInfo,
+  type SharedValue,
+} from 'react-native-reanimated';
+
+export function useClock(): SharedValue<number> {
+  const clock = useSharedValue(0);
+  const callback = useCallback(
+    (info: FrameInfo) => {
+      'worklet';
+      clock.value = info.timeSinceFirstFrame;
+    },
+    [clock]
+  );
+  useFrameCallback(callback);
+  return clock;
+}

package/src/hooks/useParamsSynchronizable.ts

@@ -0,0 +1,52 @@
+import { useCallback, useRef } from 'react';
+import { createSynchronizable } from 'react-native-worklets';
+import type { ParamsSynchronizable } from '../components/ShaderView/types';
+
+/**
+ * Creates a {@link ParamsSynchronizable} — a 4-float channel written into the
+ * dedicated `u.live` slot of a {@link ShaderView} every frame. It has its own
+ * uniform slot, so it leaves all 8 static `params` untouched.
+ *
+ * The returned `setParamsSynchronizable` runs on the JS thread (call it from gesture or scroll
+ * handlers); the values are read by the off-thread render loop. By convention
+ * the four floats carry `(x, y, active, extra)` for pointer input, or
+ * `(progress, ...)` for scroll-driven effects — but the meaning is up to the
+ * shader consuming `u.live`.
+ *
+ * Pass `initial` to seed the channel's starting value (read once on first
+ * render), so the shader has a sane resting state before the first update —
+ * e.g. `[0.5, 0.5, 0, 0]` to start a pointer at screen center. Defaults to all
+ * zeros.
+ */
+export function useParamsSynchronizable(
+  initial: readonly [number, number, number, number] = [0, 0, 0, 0]
+): {
+  paramsSynchronizable: ParamsSynchronizable;
+  setParamsSynchronizable: (
+    x: number,
+    y: number,
+    active: number,
+    extra: number
+  ) => void;
+} {
+  // Lazily create once; `initial` is only a seed, so it is read on first render
+  // and ignored thereafter.
+  const ref = useRef<ParamsSynchronizable | null>(null);
+  if (ref.current === null) {
+    ref.current = createSynchronizable<Float64Array>(
+      Float64Array.of(initial[0], initial[1], initial[2], initial[3])
+    );
+  }
+  const paramsSynchronizable = ref.current;
+
+  const setParamsSynchronizable = useCallback(
+    (x: number, y: number, active: number, extra: number) => {
+      paramsSynchronizable.setBlocking(() =>
+        Float64Array.of(x, y, active, extra)
+      );
+    },
+    [paramsSynchronizable]
+  );
+
+  return { paramsSynchronizable, setParamsSynchronizable };
+}

package/src/hooks/useWGPUSetup.tsx

@@ -0,0 +1,73 @@
+import { PixelRatio } from 'react-native';
+import {
+  useCanvasRef,
+  type CanvasRef,
+  type RNCanvasContext,
+} from 'react-native-webgpu';
+import { useEffect, useState } from 'react';
+import type { WorkletRuntime } from 'react-native-worklets';
+import { initWebGPU } from '../utils/initWebGPU';
+import { BackgroundRuntime } from '../utils/backgroundRuntime';
+
+type GPUResources = {
+  device: GPUDevice;
+  context: RNCanvasContext;
+  presentationFormat: GPUTextureFormat;
+};
+
+type WGPUSetupResult = {
+  canvasRef: React.RefObject<CanvasRef>;
+  runtime: WorkletRuntime;
+  resources: GPUResources | null;
+};
+
+export function useWGPUSetup(): WGPUSetupResult {
+  const canvasRef = useCanvasRef();
+  const [resources, setResources] = useState<GPUResources | null>(null);
+  const runtime = BackgroundRuntime;
+
+  useEffect(() => {
+    let cancelled = false;
+
+    (async () => {
+      const adapter = await navigator.gpu.requestAdapter();
+      if (!adapter || cancelled) {
+        return;
+      }
+
+      const device = await adapter.requestDevice();
+      if (cancelled) {
+        return;
+      }
+
+      const context = canvasRef.current!.getContext('webgpu')!;
+      const canvas = context.canvas as typeof context.canvas & {
+        width: number;
+        height: number;
+      };
+      const dpr = PixelRatio.get();
+      canvas.width = canvas.width * dpr;
+      canvas.height = canvas.height * dpr;
+
+      const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+      context.configure({
+        device,
+        format: presentationFormat,
+        alphaMode: 'premultiplied',
+      });
+
+      initWebGPU(runtime);
+
+      if (!cancelled) {
+        setResources({ device, context, presentationFormat });
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return { canvasRef, runtime, resources };
+}

package/src/index.tsx

@@ -0,0 +1,32 @@
+import CircularGradient from './components/CircularGradient';
+import LinearGradient from './components/LinearGradient';
+import ShaderView from './components/ShaderView';
+import ShaderViewWithPanGesture from './components/ShaderViewWithPanGesture';
+import Iridescence from './components/Iridescence';
+import LiquidChrome from './components/LiquidChrome';
+import Silk from './components/Silk';
+import Campfire from './components/Campfire';
+import CalicoSwirl from './components/CalicoSwirl';
+import Aurora from './components/Aurora';
+import { useParamsSynchronizable } from './hooks/useParamsSynchronizable';
+
+export type {
+  ShaderViewProps,
+  ParamsSynchronizable,
+} from './components/ShaderView/types';
+export type { ShaderViewWithPanGestureProps } from './components/ShaderViewWithPanGesture';
+export type { ColorInput } from './utils/colors';
+
+export {
+  CircularGradient,
+  LinearGradient,
+  ShaderView,
+  ShaderViewWithPanGesture,
+  Iridescence,
+  LiquidChrome,
+  Silk,
+  Campfire,
+  CalicoSwirl,
+  Aurora,
+  useParamsSynchronizable,
+};

package/src/shaders/TRIANGLE_VERTEX_SHADER.ts

@@ -0,0 +1,17 @@
+export const TRIANGLE_VERTEX_SHADER = /* wgsl */ `
+  struct VSOut { 
+    @builtin(position) pos: vec4<f32>,
+    @location(0) ndc: vec2<f32>,
+  };
+  
+  @vertex 
+  fn main(@builtin(vertex_index) vid: u32) -> VSOut {
+    var p = array<vec2<f32>,3>(
+      vec2<f32>(-1.0,-3.0), vec2<f32>(-1.0,1.0), vec2<f32>(3.0,1.0)
+    );
+    var o: VSOut;
+    o.pos = vec4<f32>(p[vid], 0, 1.0);
+    o.ndc = p[vid];
+    return o;
+  }
+`;

package/src/shaders/uniforms.ts

@@ -0,0 +1,18 @@
+/** 112 bytes = 7 × vec4<f32> */
+export const UNIFORM_BUFFER_SIZE = 112;
+
+/** Number of float32 values in the uniform buffer */
+export const UNIFORM_FLOAT_COUNT = UNIFORM_BUFFER_SIZE / 4; // 28
+
+export const UNIFORMS_WGSL = /* wgsl */ `
+struct Uniforms {
+  resolution: vec4<f32>,  // (width, height, aspect, pixelRatio)
+  time:       vec4<f32>,  // (seconds, dt, 0, 0)
+  color0:     vec4<f32>,  // colors[0] RGBA
+  color1:     vec4<f32>,  // colors[1] RGBA
+  params0:    vec4<f32>,  // params[0..3]
+  params1:    vec4<f32>,  // params[4..7]
+  live:       vec4<f32>,  // paramsSynchronizable (touch/scroll/audio); (0,0,0,0) when unused
+};
+@group(0) @binding(0) var<uniform> u: Uniforms;
+`;