react-native-webrtc-kaleidoscope 2.0.0 → 2.1.0

package/catalog/images/spaceship/observation-deck.ts

@@ -0,0 +1,6 @@
+import type { ImageSource } from '../image.types';
+
+// Native variant. The native module loads its own bundled resource by name, so
+// the source is just the image id; no WebP import, no expo-asset on native.
+// Web is handled by observation-deck.web.ts.
+export const observationDeck: ImageSource = 'observation-deck';

package/catalog/images/spaceship/observation-deck.web.ts

@@ -0,0 +1,7 @@
+/// <reference path="../assets.d.ts" />
+import { Asset } from 'expo-asset';
+import type { ImageSource } from '../image.types';
+import observationDeckAsset from './observation-deck.webp';
+
+// Web variant. The bundled WebP's URL, which the image layer fetches.
+export const observationDeck: ImageSource = Asset.fromModule(observationDeckAsset).uri;

package/catalog/images/underwater/oceanscape-dark.ts

@@ -0,0 +1,6 @@
+import type { ImageSource } from '../image.types';
+
+// Native variant. The native module loads its own bundled resource by name, so
+// the source is just the image id; no WebP import, no expo-asset on native.
+// Web is handled by oceanscape-dark.web.ts.
+export const oceanscapeDark: ImageSource = 'oceanscape-dark';

package/catalog/images/underwater/oceanscape-dark.web.ts

@@ -0,0 +1,7 @@
+/// <reference path="../assets.d.ts" />
+import { Asset } from 'expo-asset';
+import type { ImageSource } from '../image.types';
+import oceanscapeDarkAsset from './oceanscape-dark.webp';
+
+// Web variant. The bundled WebP's URL, which the image layer fetches.
+export const oceanscapeDark: ImageSource = Asset.fromModule(oceanscapeDarkAsset).uri;

package/catalog/images/wizard-tower/wizard-tower-1.ts

@@ -0,0 +1,6 @@
+import type { ImageSource } from '../image.types';
+
+// Native variant. The native module loads its own bundled resource by name, so
+// the source is just the image id; no WebP import, no expo-asset on native.
+// Web is handled by wizard-tower-1.web.ts.
+export const wizardTower1: ImageSource = 'wizard-tower-1';

package/catalog/images/wizard-tower/wizard-tower-1.web.ts

@@ -0,0 +1,7 @@
+/// <reference path="../assets.d.ts" />
+import { Asset } from 'expo-asset';
+import type { ImageSource } from '../image.types';
+import wizardTower1Asset from './wizard-tower-1.webp';
+
+// Web variant. The bundled WebP's URL, which the image layer fetches.
+export const wizardTower1: ImageSource = Asset.fromModule(wizardTower1Asset).uri;

package/catalog/images/wizard-tower/wizard-tower-2.ts

@@ -0,0 +1,6 @@
+import type { ImageSource } from '../image.types';
+
+// Native variant. The native module loads its own bundled resource by name, so
+// the source is just the image id; no WebP import, no expo-asset on native.
+// Web is handled by wizard-tower-2.web.ts.
+export const wizardTower2: ImageSource = 'wizard-tower-2';

package/catalog/images/wizard-tower/wizard-tower-2.web.ts

@@ -0,0 +1,7 @@
+/// <reference path="../assets.d.ts" />
+import { Asset } from 'expo-asset';
+import type { ImageSource } from '../image.types';
+import wizardTower2Asset from './wizard-tower-2.webp';
+
+// Web variant. The bundled WebP's URL, which the image layer fetches.
+export const wizardTower2: ImageSource = Asset.fromModule(wizardTower2Asset).uri;

package/catalog/images/wizard-tower/wizard-tower-night.ts

@@ -0,0 +1,6 @@
+import type { ImageSource } from '../image.types';
+
+// Native variant. The native module loads its own bundled resource by name, so
+// the source is just the image id; no WebP import, no expo-asset on native.
+// Web is handled by wizard-tower-night.web.ts.
+export const wizardTowerNight: ImageSource = 'wizard-tower-night';

package/catalog/images/wizard-tower/wizard-tower-night.web.ts

@@ -0,0 +1,7 @@
+/// <reference path="../assets.d.ts" />
+import { Asset } from 'expo-asset';
+import type { ImageSource } from '../image.types';
+import wizardTowerNightAsset from './wizard-tower-night.webp';
+
+// Web variant. The bundled WebP's URL, which the image layer fetches.
+export const wizardTowerNight: ImageSource = Asset.fromModule(wizardTowerNightAsset).uri;

package/catalog/shaders/README.md

@@ -0,0 +1,114 @@
+# Shaders: adding and extending
+
+Canonical GLSL lives here, one folder per shader, as the single source of truth
+across web, Android, and iOS. `bun run build:shaders` codegens the web and
+Android sources from these `.frag` files and transpiles the iOS Metal; the
+generated outputs are never hand-edited. This folder is the place to add a new
+generative layer shader (`plasma`, `clouds`, `godrays`, and the rest are here).
+
+For the deeper architecture (the texture-orientation contract, the
+codegen/transpile pipeline, the native registry), see
+[`../PATTERNS.md`](../PATTERNS.md). This file is the practical how-to.
+
+## Layout (one folder per shader)
+
+```
+shaders/
+├── _shared/                 # cross-cutting: passthrough.vert, the composite-* layer frags, transform.frag, types.ts
+└── <name>/
+    ├── <name>.frag          # the canonical GLSL ES 3.00 fragment (single source)
+    ├── <name>.ts            # the typed uniforms + the <NAME>_CONTROLS descriptor
+    └── <name>.presets.md    # optional: documented uniform presets / looks
+```
+
+All shaders share one vertex stage (`_shared/passthrough.vert`); there is no
+per-shader `.vert`.
+
+## The shader contract
+
+A generative layer is **background-source-agnostic**: the compositor runs
+`mix(background, original, mask)` and does not care that your shader produced the
+background. So your `.frag`:
+
+- samples nothing of its own orientation; the frame arrives display-upright and
+  non-mirrored (orientation is normalized once at the ingest, never per effect),
+  so you write `rotation 0` and add no flips. A flip or rotate inside a shader is
+  always an ingest bug, fixed there, not here.
+- receives the host built-ins `uTime` (seconds) and `uResolution` (vec2 px), plus
+  your own `u`-prefixed uniforms.
+- composites correctly on every platform with zero orientation code; only its raw
+  compute cost varies by device, handled by the resolution tier, not by you.
+
+## Adding a shader
+
+1. **GLSL**: `catalog/shaders/<name>/<name>.frag`. Write the fragment against the
+   contract above.
+2. **Types + control descriptor**: `catalog/shaders/<name>/<name>.ts`:
+   - `export type <Name>Uniforms = { … }` (each uniform; colors are `RGB`,
+     scalars are `number`). This is the single source for the layer's view model.
+   - `export const <NAME>_CONTROLS: readonly UniformControl[]`: one entry per
+     tunable uniform with `name`, `kind` (`'float'` | `'color'`), `default`,
+     range (`min`/`max`/`step` for floats), and a `doc` string. This descriptor
+     is what drives the editor (see "Controls come free" below) and documents the
+     uniform for editors and LLMs.
+3. **Register the shader** (three small edits, no native `Registration` change):
+   - `src/types.ts`: add `<name>: { uniforms: Partial<ShaderUniformsMap['<name>']> }`
+     to `LayerShaderOptions` (the closed catalog the `KaleidoscopeLayer` discriminant
+     narrows on).
+   - `src/shaders/index.ts`: import the `<Name>Uniforms` type, add
+     `<name>: <Name>Uniforms` to `ShaderUniformsMap`, and re-export both
+     `<Name>Uniforms` (type) and `<NAME>_CONTROLS` (value) for consumers.
+   - `web-driver/effects/layer-shaders.ts`: map `<name>` to its generated
+     `<NAME>_FRAG_SRC` const in `LAYER_SHADER_SOURCES` (the web compositor and the
+     native compositors dispatch on the name; there is no per-effect file).
+4. **Codegen**: `bun run build:shaders`, then commit the regenerated web/Android
+   sources. CI's `bun run check:shaders` regenerates and `git diff --exit-code`s
+   the deterministic codegen, so a `.frag` edit pushed without regenerating fails
+   the build.
+
+A new shader is now usable as a layer in any composite (`{ id, shader: '<name>',
+uniforms }`).
+
+## Controls come free
+
+A shader's `<NAME>_CONTROLS` descriptor is all the editor needs. A composite's
+controls form renders it with one line:
+
+```tsx
+import { CompositeLayerControlPanel } from 'react-native-webrtc-kaleidoscope/preset-control-panel';
+import { CLOUDS_CONTROLS } from 'react-native-webrtc-kaleidoscope/composites/clouds';
+// inside a ControlForm + ControlSection for the layer:
+<CompositeLayerControlPanel controls={CLOUDS_CONTROLS} />
+```
+
+`CompositeLayerControlPanel` maps each descriptor entry to a themed `Slider` (float) or
+`ColorPicker` (color). To hide a knob, filter the array; to narrow a range for a
+preset, pass `overrides={{ uName: { min, max } }}`. **No per-shader UI file is
+needed** for the built-in `float`/`color` kinds.
+
+### Custom widgets (a control beyond float/color)
+
+If a uniform deserves a bespoke control (an x/y pad, a polygon editor), add a
+`catalog/catalog/shaders/<name>/<name>.controls.tsx` and build it with the typed factory so the
+`uniform` prop is checked against your shader's type:
+
+```tsx
+import { makeControls } from 'react-native-webrtc-kaleidoscope/preset-control-panel';
+import type { <Name>Uniforms } from './<name>';
+
+const { Slider, ColorPicker } = makeControls<<Name>Uniforms>();
+// <Slider uniform="uExposure" min={0.2} max={1.5} />  // uniform key + value type checked
+```
+
+The custom widget is a self-wiring field: it reads/writes the nearest
+`ControlForm` via `useField` and emits a `Partial` of the shader's uniforms. A
+typo'd or wrong-typed `uniform` is a compile error.
+
+## Toolchain (iOS transpile only)
+
+The iOS Metal is transpiled `GLSL -> SPIR-V -> MSL` by `scripts/build-shaders.ts`.
+Contributors who do not touch shaders need none of this (the check is CI-only).
+If you do edit a `.frag`:
+
+- Debian/Ubuntu/WSL: `sudo apt install -y glslang-tools spirv-tools spirv-cross`
+- macOS: `brew install glslang spirv-tools spirv-cross`

package/catalog/shaders/_shared/composite-blit.frag

@@ -0,0 +1,26 @@
+// Composite BLIT (iOS-only source): draw a finished scratch texture (already
+// PREMULTIPLIED) into the output, applying a content-UV transform that folds in
+// the scratch's per-pass V parity. Unlike composite-image this does NOT
+// re-premultiply: a blur scratch preserves the opaque camera's alpha=1, and an
+// image scratch already came through composite-image, so re-premultiplying would
+// darken edges. uContentUvScale/uContentUvOffset carry the parity term the host
+// supplies, so one shader serves any scratch source.
+//
+// iOS-only: web and Android reuse the cover-fit composite-image shader for their
+// blit (cover scale 1,1); iOS needs this distinct no-premultiply/parity variant,
+// the same per-platform divergence as the composite V-flip terms. Not in the
+// Android/web codegen; transpiled to composite-blit.metalsrc for iOS.
+//
+// iOS binding contract (CompositeProcessor): uContentUvScale at buffer(0),
+// uContentUvOffset at buffer(1); uTex at texture(0), its sampler at sampler(0).
+#version 300 es
+precision highp float;
+uniform sampler2D uTex;
+uniform vec2 uContentUvScale;
+uniform vec2 uContentUvOffset;
+in highp vec2 vUv;
+out vec4 oColor;
+void main() {
+  vec2 uv = vUv * uContentUvScale + uContentUvOffset;
+  oColor = texture(uTex, uv);
+}

package/catalog/shaders/_shared/composite-camera.frag

@@ -0,0 +1,17 @@
+// Composite compositor CAMERA layer (direct/background): the raw display-upright
+// camera, fullscreen, opaque. The camera "original" is already display-upright
+// (CoreImage ingest on iOS, OES->2D on Android) and is sampled in the output
+// pass, so there is no V-parity term here. Output straight RGB with alpha 1 so
+// the non-blended base draw fills the frame.
+//
+// Canonical single source for all three runtimes (build:shaders): web
+// COMPOSITE_CAMERA_FRAG_SRC, Android Shaders.COMPOSITE_CAMERA_FRAG, iOS
+// composite-camera.metalsrc. Do not hand-edit the generated copies.
+#version 300 es
+precision highp float;
+uniform sampler2D uCamera;
+in highp vec2 vUv;
+out vec4 oColor;
+void main() {
+  oColor = vec4(texture(uCamera, vUv).rgb, 1.0);
+}

package/catalog/shaders/_shared/composite-image.frag

@@ -0,0 +1,23 @@
+// Composite IMAGE layer: cover-fit a still texture and output PREMULTIPLIED, so a
+// straight-alpha image (a transparent sky / cut-out opening) composites correctly
+// under the premultiplied "over" blend. uCoverScale zooms the UV about center to
+// crop-fit. No V-flip in-shader: the image arrives semantic-top at v=1 by sample
+// time, but how it gets upright is per-platform: web flips on GL upload
+// (UNPACK_FLIP_Y_WEBGL), Android pre-flips the bitmap (Matrix preScale) on upload,
+// and iOS folds the parity into a negated uCoverScale.y at draw time. Web also uses
+// this as its blit shader (scratch -> output at cover scale 1,1); iOS has a distinct
+// composite-blit.
+//
+// iOS binding contract (CompositeProcessor): uCoverScale at buffer(0), uTex at
+// texture(0), its sampler at sampler(0).
+#version 300 es
+precision highp float;
+uniform sampler2D uTex;
+uniform vec2 uCoverScale;
+in highp vec2 vUv;
+out vec4 oColor;
+void main() {
+  vec2 uv = (vUv - 0.5) * uCoverScale + 0.5;
+  vec4 c = texture(uTex, uv);
+  oColor = vec4(c.rgb * c.a, c.a);
+}

package/catalog/shaders/_shared/composite-masked.frag

@@ -0,0 +1,26 @@
+// Composite MASKED layer: stencil a rendered scratch (uTex, treated as
+// premultiplied) to the subject by multiplying through the mask alpha, keeping the
+// result premultiplied so the caller's "over"/"additive" blend composites it
+// correctly. Lets a generative/blur/image layer target the subject instead of the
+// background. Mask UV and safeHi as in composite-subject.
+//
+// iOS binding (CompositeProcessor): uTex at texture(0), uMask at texture(1); the
+// buffer uniforms (uMaskUvScale, uMaskUvOffset, uMaskHi, uMaskLo) bind by name via
+// ShaderLibrary.uniformBufferIndices, so the spirv-cross buffer order is not assumed.
+#version 300 es
+precision highp float;
+uniform sampler2D uTex;
+uniform sampler2D uMask;
+uniform vec2 uMaskUvScale;
+uniform vec2 uMaskUvOffset;
+uniform float uMaskLo;
+uniform float uMaskHi;
+in highp vec2 vUv;
+out vec4 oColor;
+void main() {
+  vec4 c = texture(uTex, vUv);
+  float raw = texture(uMask, vUv * uMaskUvScale + uMaskUvOffset).r;
+  float safeHi = max(uMaskHi, uMaskLo + 0.001);
+  float a = clamp(smoothstep(uMaskLo, safeHi, raw), 0.0, 1.0);
+  oColor = c * a;
+}

package/catalog/shaders/_shared/composite-subject.frag

@@ -0,0 +1,27 @@
+// Composite SUBJECT layer: the masked camera person, output PREMULTIPLIED (rgb
+// scaled by the mask alpha) so a "normal" over-blend composites the person onto
+// the stack. uMaskUvScale/uMaskUvOffset carry the mask orientation (identity on
+// Android where the readback already aligns the mask; (1,-1)/(0,1) on web).
+// safeHi guards smoothstep against edge0 == edge1 (undefined) when uMaskHi
+// collapses onto uMaskLo.
+//
+// iOS binding (CompositeProcessor): uCamera at texture(0), uMask at texture(1); the
+// buffer uniforms (uMaskUvScale, uMaskUvOffset, uMaskHi, uMaskLo) bind by name via
+// ShaderLibrary.uniformBufferIndices, so the spirv-cross buffer order is not assumed.
+#version 300 es
+precision highp float;
+uniform sampler2D uCamera;
+uniform sampler2D uMask;
+uniform vec2 uMaskUvScale;
+uniform vec2 uMaskUvOffset;
+uniform float uMaskLo;
+uniform float uMaskHi;
+in highp vec2 vUv;
+out vec4 oColor;
+void main() {
+  vec3 cam = texture(uCamera, vUv).rgb;
+  float raw = texture(uMask, vUv * uMaskUvScale + uMaskUvOffset).r;
+  float safeHi = max(uMaskHi, uMaskLo + 0.001);
+  float a = clamp(smoothstep(uMaskLo, safeHi, raw), 0.0, 1.0);
+  oColor = vec4(cam * a, a);
+}

package/catalog/shaders/_shared/passthrough.vert

@@ -0,0 +1,27 @@
+// Procedural full-screen quad. Caller draws four vertices via TRIANGLE_STRIP
+// with no VAO/VBO; gl_VertexID drives position.
+//
+// UV convention: vUv = (0, 0) at the BOTTOM-LEFT of the quad, (1, 1) at the
+// TOP-RIGHT. Fragment shaders sample textures with this same orientation,
+// expecting each input texture to land with its semantic top of source
+// image at v=1 (head at top, sky at top). Per-platform host code enforces
+// that convention at the upload boundary; see PATTERNS.md
+// "Texture-orientation convention."
+//
+// MSL behavior: spirv-cross does NOT negate gl_Position.y here. The build
+// (scripts/build-shaders.ts) passes no --msl-invert-y flag, so the generated
+// passthrough.metalsrc emits gl_Position identical to this GLSL. Metal's
+// top-left framebuffer origin is reconciled per-render-pass at the iOS
+// composite (the per-layer scratch parity cancels the odd ping-pong pass
+// count; see CompositeProcessor's scratch-parity constants), not by a vertex
+// Y-inversion. Android's GL passes share the FBO origin and
+// need no such term.
+
+#version 300 es
+precision highp float;
+out highp vec2 vUv;
+void main() {
+  vec2 p = vec2(float((gl_VertexID & 1) << 1), float(gl_VertexID & 2));
+  vUv = p * 0.5;
+  gl_Position = vec4(p - 1.0, 0.0, 1.0);
+}

package/catalog/shaders/_shared/transform.frag

@@ -0,0 +1,27 @@
+// Transform: a pure geometric reorientation of the input texture, an axis
+// flip or a 90-degree rotation. One shader serves all four ops (flip-x,
+// flip-y, rotate-cw, rotate-ccw); the host computes uUvTransform from the
+// desired SCREEN-space op and the frame's rotation via its platform Orientation
+// helper, so the camera-buffer rotation correction lives in exactly one place
+// instead of being repeated per op or per effect.
+//
+// uUvTransform maps output UV (taken about the 0.5 center) back to input UV: a
+// flip negates one axis; a 90-degree rotation swaps the axes, and the host
+// allocates a dimension-swapped (h x w) output target to match. Because flips
+// and 90-degree rotations map the unit square onto itself, the sampled UV stays
+// in [0, 1] with no clamp.
+//
+// UV convention: vUv = (0, 0) bottom-left, (1, 1) top-right (see
+// passthrough.vert). Web reorients in display space via canvas instead and does
+// not use this shader.
+
+#version 300 es
+precision mediump float;
+uniform sampler2D uTex;
+uniform mat2 uUvTransform;
+in highp vec2 vUv;
+out vec4 oColor;
+void main() {
+  vec2 uv = uUvTransform * (vUv - 0.5) + 0.5;
+  oColor = texture(uTex, uv);
+}

package/catalog/shaders/_shared/types.ts

@@ -0,0 +1,63 @@
+// Shared shape for a layer shader's tunable uniforms. Each shader exports a
+// `*_CONTROLS` list of these; the demo generates a control per entry, and the
+// list doubles as documentation (name, default, range, and a doc string).
+
+import type { RGB } from '../../../src/lib/primitives.types';
+
+/**
+ * A single tunable uniform with enough metadata to render a control and seed a
+ * default. `color` is an RGB triple (0..1 per channel); `float` is a scalar with
+ * a range. Reusable across shaders.
+ */
+// `name` is the uniform key (it maps to the shader uniform and the layer's
+// `uniforms` record). `label` is the optional display string for the generated
+// control; when present the UI shows it instead of `name`, so a control can read
+// "blur" while still writing the `sigma` uniform. Defaults to `name`.
+// Every variant carries the shared META (name, label?, kind, default, doc); the
+// remaining fields are the PROPS that spread into the kind's control component
+// (min/max/step for float, points for polygon). `kind` narrows which props apply.
+export type UniformControl =
+  | {
+      readonly name: string;
+      readonly label?: string;
+      readonly kind: 'color';
+      readonly default: RGB;
+      readonly doc: string;
+    }
+  | {
+      readonly name: string;
+      readonly label?: string;
+      readonly kind: 'float';
+      readonly default: number;
+      readonly min: number;
+      readonly max: number;
+      readonly step: number;
+      readonly doc: string;
+    }
+  | {
+      readonly name: string;
+      readonly label?: string;
+      readonly kind: 'switch';
+      readonly default: number; // 0 (off) | 1 (on)
+      readonly doc: string;
+    }
+  | {
+      // The uniform is a vec2 array `vec2 uX[points]`; `default` is the flat
+      // [x0,y0, x1,y1, ...] of length 2*points. The prototype editor renders
+      // x/y sliders per point on one row; a drag editor replaces it later.
+      readonly name: string;
+      readonly label?: string;
+      readonly kind: 'polygon';
+      readonly default: readonly number[];
+      readonly points: number;
+      readonly doc: string;
+    };
+
+/** The default uniform values from a control list, as a flat uniform map. */
+export const defaultUniforms = (
+  controls: readonly UniformControl[],
+): Record<string, number | readonly number[]> => {
+  const out: Record<string, number | readonly number[]> = {};
+  for (const c of controls) out[c.name] = c.default;
+  return out;
+};

package/catalog/shaders/anamorphic-lensflare/anamorphic-lensflare.form.tsx

@@ -0,0 +1,37 @@
+// Anamorphic-lensflare's editor form: the shader OWNS its control layout. This pass
+// just stacks one <Control uniform="…"/> per uniform in declared order (the
+// auto-form's shape); the point is that this file exists per shader, so
+// layout/grouping is a local edit here, and a new primitive flows in through
+// <Control> without touching it. Conventional layer id: "flare".
+
+import {
+  Control,
+  ControlForm,
+  ControlSection,
+  type KaleidoscopeControls,
+} from '../../../src/components/preset-control-panel';
+import { ANAMORPHIC_LENSFLARE_CONTROLS } from './anamorphic-lensflare';
+
+export function AnamorphicLensflareForm({ uniforms, onPatch, disabled }: KaleidoscopeControls) {
+  return (
+    <ControlForm
+      id="flare"
+      uniforms={uniforms.flare ?? {}}
+      onPatch={onPatch}
+      disabled={disabled}
+      controls={ANAMORPHIC_LENSFLARE_CONTROLS}
+    >
+      <ControlSection title="anamorphic flare">
+        <Control uniform="uFlareX" />
+        <Control uniform="uFlareY" />
+        <Control uniform="uIntensity" />
+        <Control uniform="uStreakLength" />
+        <Control uniform="uStreakWidth" />
+        <Control uniform="uGhostStrength" />
+        <Control uniform="uWarmColor" />
+        <Control uniform="uBlueColor" />
+        <Control uniform="uPinkColor" />
+      </ControlSection>
+    </ControlForm>
+  );
+}

package/catalog/shaders/anamorphic-lensflare/anamorphic-lensflare.frag

@@ -0,0 +1,123 @@
+// Animated cinematic anamorphic lens flare. A transparent OVERLAY layer (use
+// blend 'additive'); intended to sit in front of the layers beneath as a camera-lens
+// artifact (the observation-deck composite runs it over the simianlights field
+// plus the deck image).
+//
+// Ported from a ShaderToy prototype (mainImage/iTime/iResolution) to this repo's
+// GLSL ES 3.00 multi-runtime convention. The #define knobs and the three palette
+// consts are now uniforms so composites can place the flare and color-match it to
+// whatever sits behind it.
+//
+// UV convention: matches passthrough.vert. vUv = (0, 0) at bottom-left, (1, 1)
+// at top-right; ShaderToy's fragCoord / iResolution shares that origin, so uv =
+// vUv directly with no flip. Fully procedural: no input texture, so there is no
+// texture-origin handoff. Net texture flips: zero on every runtime.
+
+#version 300 es
+precision highp float;
+
+uniform float uTime;          // seconds, monotonically increasing; range [0, inf)
+uniform float uFlareX;        // flare X position, 0..1 (drifts slowly around this)
+uniform float uFlareY;        // flare Y position, 0..1 (0 = bottom)
+uniform float uIntensity;     // overall brightness multiplier
+uniform float uStreakLength;  // horizontal streak reach; higher = longer
+uniform float uStreakWidth;   // main streak vertical tightness; higher = thinner
+uniform float uGhostStrength; // optical-ghost strength along the flare axis
+uniform vec3 uWarmColor;      // core / warm streak tint
+uniform vec3 uBlueColor;      // halo / wide-streak tint
+uniform vec3 uPinkColor;      // secondary streak / ghost tint
+
+in highp vec2 vUv;
+out vec4 oColor;
+
+float softOrb(vec2 uv, vec2 center, float radius) {
+  float d = length(uv - center);
+  float q = d / radius;  // pow(q, 2.0) -> q*q; spirv-opt does not strength-reduce it
+  return exp(-q * q);
+}
+
+float softStreak(vec2 uv, vec2 center, float width, float length) {
+  float yFalloff = exp(-abs(uv.y - center.y) * width);
+  float xFalloff = exp(-abs(uv.x - center.x) * length);
+  return yFalloff * xFalloff;
+}
+
+void main() {
+  // ShaderToy uv = fragCoord / iResolution; identical to vUv here.
+  vec2 uv = vUv;
+
+  // Slow horizontal drift.
+  float horizontalDrift = sin(uTime * 0.18) * 0.10;
+  vec2 flarePos = vec2(uFlareX + horizontalDrift, uFlareY);
+
+  vec3 col = vec3(0.0);
+  float alpha = 0.0;
+
+  // Main source.
+  float core = softOrb(uv, flarePos, 0.022);
+  float bloom = softOrb(uv, flarePos, 0.095);
+  float outerHalo = softOrb(uv, flarePos, 0.28);
+
+  col += vec3(1.0) * core * 1.8;
+  col += uWarmColor * bloom * 0.95;
+  col += uBlueColor * outerHalo * 0.16;
+
+  alpha += core * 0.45;
+  alpha += bloom * 0.22;
+  alpha += outerHalo * 0.045;
+
+  // Moving streak intensity.
+  float sweepGlow = 0.85 + 0.15 * sin(uTime * 0.7 + uv.x * 8.0);
+
+  // Main + wide anamorphic streaks.
+  float mainStreak = softStreak(uv, flarePos, uStreakWidth, uStreakLength);
+  float wideStreak = softStreak(uv, flarePos, 70.0, uStreakLength * 0.65);
+
+  col += uWarmColor * mainStreak * 1.15 * sweepGlow;
+  col += uBlueColor * wideStreak * 0.26 * sweepGlow;
+
+  alpha += mainStreak * 0.18;
+  alpha += wideStreak * 0.055;
+
+  // Secondary colored streaks.
+  float upperLine = softStreak(uv, flarePos + vec2(0.0, 0.012), 260.0, uStreakLength * 0.7);
+  float lowerLine = softStreak(uv, flarePos - vec2(0.0, 0.010), 240.0, uStreakLength * 0.8);
+
+  col += uBlueColor * upperLine * 0.22;
+  col += uPinkColor * lowerLine * 0.16;
+
+  alpha += (upperLine + lowerLine) * 0.035;
+
+  // Optical ghosts along the line from the flare through screen center.
+  vec2 center = vec2(0.5);
+  vec2 axis = center - flarePos;
+
+  vec2 ghost1 = flarePos + axis * 0.45;
+  vec2 ghost2 = flarePos + axis * 0.85;
+  vec2 ghost3 = flarePos + axis * 1.28;
+  vec2 ghost4 = flarePos - axis * 0.35;
+
+  float g1 = softOrb(uv, ghost1, 0.070);
+  float g2 = softOrb(uv, ghost2, 0.115);
+  float g3 = softOrb(uv, ghost3, 0.055);
+  float g4 = softOrb(uv, ghost4, 0.095);
+
+  col += uPinkColor * g1 * 0.18 * uGhostStrength;
+  col += uBlueColor * g2 * 0.15 * uGhostStrength;
+  col += uWarmColor * g3 * 0.22 * uGhostStrength;
+  col += uBlueColor * g4 * 0.10 * uGhostStrength;
+
+  alpha += g1 * 0.040 * uGhostStrength;
+  alpha += g2 * 0.035 * uGhostStrength;
+  alpha += g3 * 0.050 * uGhostStrength;
+  alpha += g4 * 0.030 * uGhostStrength;
+
+  // Tiny shimmer to keep it alive.
+  float shimmer = 0.97 + 0.03 * sin(uTime * 2.1);
+
+  col *= uIntensity * shimmer;
+  alpha *= uIntensity * shimmer;
+
+  alpha = clamp(alpha, 0.0, 1.0);
+  oColor = vec4(col, alpha);
+}