react-native-webrtc-kaleidoscope 2.0.0 → 2.1.0

package/catalog/composites/clouds/clouds.controls.tsx

@@ -0,0 +1,19 @@
+// Turnkey controls for the clouds composite (a single clouds `sky` layer).
+
+import {
+  CompositeLayerControlPanel,
+  ControlForm,
+  ControlSection,
+  type KaleidoscopeControls,
+} from '../../../src/components/preset-control-panel';
+import { CLOUDS_CONTROLS } from '../../shaders/clouds/clouds';
+
+export function CloudsControls({ uniforms, onPatch, disabled }: KaleidoscopeControls) {
+  return (
+    <ControlForm id="sky" uniforms={uniforms.sky ?? {}} onPatch={onPatch} disabled={disabled}>
+      <ControlSection title="sky">
+        <CompositeLayerControlPanel controls={CLOUDS_CONTROLS} />
+      </ControlSection>
+    </ControlForm>
+  );
+}

package/catalog/composites/clouds/clouds.ts

@@ -0,0 +1,32 @@
+// Sky: raymarched daytime clouds with you composited over them. Fully
+// procedural; no image layer.
+//
+// A packaged composite consumers can list by importing this module.
+
+import type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';
+
+export const clouds = {
+  name: 'Daytime',
+  taxonomy: ['Shaders', 'Sky'],
+  layers: [
+    {
+      id: 'sky',
+      shader: 'clouds',
+      uniforms: {
+        uSkyLowColor: [0.09, 0.63, 0.95],
+        uSkyHighColor: [0.04, 0.03, 0.86],
+        uCloudLightColor: [1.0, 0.91, 0.77],
+        uCloudDarkColor: [0.3, 0.3, 0.5],
+        uExposure: 1.18,
+        uStepSize: 0.16,
+        uCloudSpeed: 0.16,
+        uCloudScale: 1.08,
+        uDensity: 0.235,
+        uCoverage: 0.42,
+        uSoftness: 0.39,
+      },
+    },
+    // You, under the sky.
+    { id: 'you', shader: 'direct', target: 'subject' },
+  ],
+} as const satisfies KaleidoscopePreset;

package/catalog/composites/corporate-blobs/corporate-blobs.controls.tsx

@@ -0,0 +1,24 @@
+// Turnkey controls for the corporate-blobs composite. Demonstrates a per-composite
+// override: the blob size (`uScale`) is narrowed to a tighter band than the
+// shader's full range, via the CompositeLayerControlPanel `overrides` prop.
+
+import {
+  CompositeLayerControlPanel,
+  ControlForm,
+  ControlSection,
+  type KaleidoscopeControls,
+} from '../../../src/components/preset-control-panel';
+import { CORPORATE_BLOBS_CONTROLS } from '../../shaders/corporate-blobs/corporate-blobs';
+
+export function CorporateBlobsControls({ uniforms, onPatch, disabled }: KaleidoscopeControls) {
+  return (
+    <ControlForm id="blobs" uniforms={uniforms.blobs ?? {}} onPatch={onPatch} disabled={disabled}>
+      <ControlSection title="blobs">
+        <CompositeLayerControlPanel
+          controls={CORPORATE_BLOBS_CONTROLS}
+          overrides={{ uScale: { min: 1.5, max: 3 } }}
+        />
+      </ControlSection>
+    </ControlForm>
+  );
+}

package/catalog/composites/corporate-blobs/corporate-blobs.ts

@@ -0,0 +1,51 @@
+// Corporate blobs: a corporate-logo backdrop, you composited over it, and large
+// decorative edge/vignette blobs framing the frame on top (normal blend; the
+// center stays clear so you read through). Each blob's color is its own uniform,
+// so the eight-color brand palette is fully tunable; uColor grades them all
+// together.
+//
+// A packaged composite: within the library it imports its image layers
+// relatively; a consumer would import from
+// `react-native-webrtc-kaleidoscope/images/<category>/<leaf>` instead.
+
+import type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';
+// Native variant. The thumbnail is the string id the prebuild plugin bundles
+// `corporate-blobs.thumb.webp` as into the native app target;
+// `resolveImageUri` looks it up in Bundle.main. The web sibling
+// (corporate-blobs.web.ts) keeps the `Asset.fromModule(...).uri` pattern;
+// mirrors images/<id>/{<id>.ts,<id>.web.ts}.
+import { corporateLogo } from '../../images/corporate/corporate-logo';
+
+export const corporateBlobs = {
+  name: 'Blobs',
+  taxonomy: ['Worlds', 'Corporate'],
+  thumbnail: 'corporate-blobs-thumb',
+  layers: [
+    { id: 'corporate-logo', shader: 'image', source: corporateLogo },
+    // You, in front of the logo (blobs frame you from the edges, on top).
+    { id: 'you', shader: 'direct', target: 'subject' },
+    {
+      id: 'blobs',
+      shader: 'corporate-blobs',
+      blend: 'normal',
+      uniforms: {
+        uColor: [0.96, 0.71, 1],
+        uBlobColor1: [0.376, 0.647, 0.98],
+        uBlobColor2: [0.063, 0.725, 0.506],
+        uBlobColor3: [0.984, 0.749, 0.141],
+        uBlobColor4: [0.976, 0.451, 0.086],
+        uBlobColor5: [0.133, 0.773, 0.369],
+        uBlobColor6: [0.851, 0.275, 0.937],
+        uBlobColor7: [0.341, 0.325, 0.306],
+        uBlobColor8: [0.008, 0.518, 0.78],
+        uGlobalAlpha: 0.75,
+        uScale: 2.26,
+        uEdgePull: 0.4,
+        uCenterClear: 0.86,
+        uMotionAmount: 1,
+        uMotionSpeed: 2.61,
+        uEdgeSoftness: 0.006,
+      },
+    },
+  ],
+} as const satisfies KaleidoscopePreset;

package/catalog/composites/corporate-blobs/corporate-blobs.web.ts

@@ -0,0 +1,42 @@
+// Web variant. Resolves the thumbnail URI via expo-asset at module-load time.
+// Native is corporate-blobs.ts (no thumbnail).
+// Mirrors images/<id>/{<id>.ts,<id>.web.ts}.
+
+import { Asset } from 'expo-asset';
+import type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';
+import { corporateLogo } from '../../images/corporate/corporate-logo';
+import corporateBlobsThumb from './corporate-blobs.thumb.webp';
+
+export const corporateBlobs = {
+  name: 'Blobs',
+  taxonomy: ['Worlds', 'Corporate'],
+  thumbnail: Asset.fromModule(corporateBlobsThumb).uri,
+  layers: [
+    { id: 'corporate-logo', shader: 'image', source: corporateLogo },
+    // You, in front of the logo (blobs frame you from the edges, on top).
+    { id: 'you', shader: 'direct', target: 'subject' },
+    {
+      id: 'blobs',
+      shader: 'corporate-blobs',
+      blend: 'normal',
+      uniforms: {
+        uColor: [0.96, 0.71, 1],
+        uBlobColor1: [0.376, 0.647, 0.98],
+        uBlobColor2: [0.063, 0.725, 0.506],
+        uBlobColor3: [0.984, 0.749, 0.141],
+        uBlobColor4: [0.976, 0.451, 0.086],
+        uBlobColor5: [0.133, 0.773, 0.369],
+        uBlobColor6: [0.851, 0.275, 0.937],
+        uBlobColor7: [0.341, 0.325, 0.306],
+        uBlobColor8: [0.008, 0.518, 0.78],
+        uGlobalAlpha: 0.75,
+        uScale: 2.26,
+        uEdgePull: 0.4,
+        uCenterClear: 0.86,
+        uMotionAmount: 1,
+        uMotionSpeed: 2.61,
+        uEdgeSoftness: 0.006,
+      },
+    },
+  ],
+} as const satisfies KaleidoscopePreset;

package/catalog/composites/fairy-cave/fairy-cave.controls.tsx

@@ -0,0 +1,33 @@
+// Turnkey controls for the fairy-cave composite: a clouds `sky` plus a
+// `fireflies` overlay, each its own ControlForm sharing the one onPatch.
+
+import {
+  CompositeLayerControlPanel,
+  ControlForm,
+  ControlSection,
+  type KaleidoscopeControls,
+} from '../../../src/components/preset-control-panel';
+import { CLOUDS_CONTROLS } from '../../shaders/clouds/clouds';
+import { FIREFLIES_CONTROLS } from '../../shaders/fireflies/fireflies';
+
+export function FairyCaveControls({ uniforms, onPatch, disabled }: KaleidoscopeControls) {
+  return (
+    <>
+      <ControlForm id="sky" uniforms={uniforms.sky ?? {}} onPatch={onPatch} disabled={disabled}>
+        <ControlSection title="sky">
+          <CompositeLayerControlPanel controls={CLOUDS_CONTROLS} />
+        </ControlSection>
+      </ControlForm>
+      <ControlForm
+        id="fireflies"
+        uniforms={uniforms.fireflies ?? {}}
+        onPatch={onPatch}
+        disabled={disabled}
+      >
+        <ControlSection title="fireflies">
+          <CompositeLayerControlPanel controls={FIREFLIES_CONTROLS} />
+        </ControlSection>
+      </ControlForm>
+    </>
+  );
+}

package/catalog/composites/fairy-cave/fairy-cave.ts

@@ -0,0 +1,53 @@
+// Fairy cave: a moonlit night sky through the round opening, the cave image, and
+// fireflies drifting on top, you in the cave.
+//
+// A packaged composite: within the library it imports its image layers
+// relatively; a consumer would import from
+// `react-native-webrtc-kaleidoscope/images/<category>/<leaf>` instead.
+
+import type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';
+// Native variant. The thumbnail is the string id the prebuild plugin bundles
+// `fairy-cave.thumb.webp` as into the native app target; `resolveImageUri`
+// looks it up in Bundle.main. The web sibling (fairy-cave.web.ts) keeps the
+// `Asset.fromModule(...).uri` pattern; mirrors images/<id>/{<id>.ts,<id>.web.ts}.
+import { treehouse } from '../../images/fairy-caves/treehouse';
+
+export const fairyCave = {
+  name: 'Fairy Cave',
+  taxonomy: ['Worlds', 'Fairy Cave'],
+  thumbnail: 'fairy-cave-thumb',
+  layers: [
+    {
+      id: 'sky',
+      shader: 'clouds',
+      uniforms: {
+        uSkyLowColor: [0.05, 0.01, 0.04],
+        uSkyHighColor: [0.02, 0.02, 0.04],
+        uCloudLightColor: [0.72, 0.39, 0.1],
+        uCloudDarkColor: [0.18, 0.14, 0.07],
+        uExposure: 0.93,
+        uStepSize: 0.38,
+        uCloudSpeed: 0.37,
+        uCloudScale: 1.26,
+        uDensity: 0.035,
+        uCoverage: 0.44,
+        uSoftness: 0.18,
+      },
+    },
+    { id: 'treehouse', shader: 'image', source: treehouse },
+    {
+      id: 'fireflies',
+      shader: 'fireflies',
+      blend: 'additive',
+      uniforms: {
+        uGlowSize: 0.025,
+        uDotSize: 0.004,
+        uSpeed: 0.18,
+        uTwinkle: 1.6,
+        uColor: [1.0, 0.82, 0.32],
+      },
+    },
+    // You, in the cave (fireflies drifting behind you).
+    { id: 'you', shader: 'direct', target: 'subject' },
+  ],
+} as const satisfies KaleidoscopePreset;

package/catalog/composites/fairy-cave/fairy-cave.web.ts

@@ -0,0 +1,47 @@
+// Web variant. Resolves the thumbnail URI via expo-asset at module-load time.
+// Native is fairy-cave.ts (no thumbnail). Mirrors images/<id>/{<id>.ts,<id>.web.ts}.
+
+import { Asset } from 'expo-asset';
+import type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';
+import { treehouse } from '../../images/fairy-caves/treehouse';
+import fairyCaveThumb from './fairy-cave.thumb.webp';
+
+export const fairyCave = {
+  name: 'Fairy Cave',
+  taxonomy: ['Worlds', 'Fairy Cave'],
+  thumbnail: Asset.fromModule(fairyCaveThumb).uri,
+  layers: [
+    {
+      id: 'sky',
+      shader: 'clouds',
+      uniforms: {
+        uSkyLowColor: [0.05, 0.01, 0.04],
+        uSkyHighColor: [0.02, 0.02, 0.04],
+        uCloudLightColor: [0.72, 0.39, 0.1],
+        uCloudDarkColor: [0.18, 0.14, 0.07],
+        uExposure: 0.93,
+        uStepSize: 0.38,
+        uCloudSpeed: 0.37,
+        uCloudScale: 1.26,
+        uDensity: 0.035,
+        uCoverage: 0.44,
+        uSoftness: 0.18,
+      },
+    },
+    { id: 'treehouse', shader: 'image', source: treehouse },
+    {
+      id: 'fireflies',
+      shader: 'fireflies',
+      blend: 'additive',
+      uniforms: {
+        uGlowSize: 0.025,
+        uDotSize: 0.004,
+        uSpeed: 0.18,
+        uTwinkle: 1.6,
+        uColor: [1.0, 0.82, 0.32],
+      },
+    },
+    // You, in the cave (fireflies drifting behind you).
+    { id: 'you', shader: 'direct', target: 'subject' },
+  ],
+} as const satisfies KaleidoscopePreset;

package/catalog/composites/fairy-grotto/fairy-grotto.controls.tsx

@@ -0,0 +1,34 @@
+// Turnkey controls for the fairy-grotto composite: a clouds `sky` plus a
+// `fireflies` overlay, each its own ControlForm sharing the one onPatch. The
+// fireflies form now exposes uColor (the firefly tint).
+
+import {
+  CompositeLayerControlPanel,
+  ControlForm,
+  ControlSection,
+  type KaleidoscopeControls,
+} from '../../../src/components/preset-control-panel';
+import { CLOUDS_CONTROLS } from '../../shaders/clouds/clouds';
+import { FIREFLIES_CONTROLS } from '../../shaders/fireflies/fireflies';
+
+export function FairyGrottoControls({ uniforms, onPatch, disabled }: KaleidoscopeControls) {
+  return (
+    <>
+      <ControlForm id="sky" uniforms={uniforms.sky ?? {}} onPatch={onPatch} disabled={disabled}>
+        <ControlSection title="sky">
+          <CompositeLayerControlPanel controls={CLOUDS_CONTROLS} />
+        </ControlSection>
+      </ControlForm>
+      <ControlForm
+        id="fireflies"
+        uniforms={uniforms.fireflies ?? {}}
+        onPatch={onPatch}
+        disabled={disabled}
+      >
+        <ControlSection title="fireflies">
+          <CompositeLayerControlPanel controls={FIREFLIES_CONTROLS} />
+        </ControlSection>
+      </ControlForm>
+    </>
+  );
+}

package/catalog/composites/fairy-grotto/fairy-grotto.ts

@@ -0,0 +1,54 @@
+// Fairy grotto: a root-cave variant of fairy-cave. A bright sky through the round
+// opening, the grotto image, warm fire-orange fireflies drifting on top, you in
+// the cave. A variation of fairy-cave with the clouds `sky` brightened and the
+// fireflies color-shifted warmer to match the fire-lit alcoves.
+//
+// A packaged composite: within the library it imports its image layers
+// relatively; a consumer would import from
+// `react-native-webrtc-kaleidoscope/images/<category>/<leaf>` instead.
+
+import type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';
+// Native variant. The thumbnail is the string id the prebuild plugin bundles
+// `fairy-grotto.thumb.webp` as into the native app target; `resolveImageUri`
+// looks it up in Bundle.main. The web sibling keeps the `Asset.fromModule` path.
+import { grotto } from '../../images/fairy-caves/grotto';
+
+export const fairyGrotto = {
+  name: 'Grotto',
+  taxonomy: ['Worlds', 'Fairy Cave'],
+  thumbnail: 'fairy-grotto-thumb',
+  layers: [
+    {
+      id: 'sky',
+      shader: 'clouds',
+      uniforms: {
+        uSkyLowColor: [0.85, 0.8, 0.68],
+        uSkyHighColor: [0.55, 0.68, 0.85],
+        uCloudLightColor: [1.0, 0.98, 0.92],
+        uCloudDarkColor: [0.65, 0.68, 0.72],
+        uExposure: 1.25,
+        uStepSize: 0.38,
+        uCloudSpeed: 0.4,
+        uCloudScale: 1.2,
+        uDensity: 0.05,
+        uCoverage: 0.6,
+        uSoftness: 0.2,
+      },
+    },
+    { id: 'grotto', shader: 'image', source: grotto },
+    {
+      id: 'fireflies',
+      shader: 'fireflies',
+      blend: 'additive',
+      uniforms: {
+        uGlowSize: 0.025,
+        uDotSize: 0.004,
+        uSpeed: 0.18,
+        uTwinkle: 1.6,
+        uColor: [1.0, 0.55, 0.2],
+      },
+    },
+    // You, in the cave (fireflies drifting behind you).
+    { id: 'you', shader: 'direct', target: 'subject' },
+  ],
+} as const satisfies KaleidoscopePreset;

package/catalog/composites/fairy-grotto/fairy-grotto.web.ts

@@ -0,0 +1,47 @@
+// Web variant. Resolves the thumbnail URI via expo-asset at module-load time.
+// Native is fairy-grotto.ts (no thumbnail).
+
+import { Asset } from 'expo-asset';
+import type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';
+import { grotto } from '../../images/fairy-caves/grotto';
+import fairyGrottoThumb from './fairy-grotto.thumb.webp';
+
+export const fairyGrotto = {
+  name: 'Grotto',
+  taxonomy: ['Worlds', 'Fairy Cave'],
+  thumbnail: Asset.fromModule(fairyGrottoThumb).uri,
+  layers: [
+    {
+      id: 'sky',
+      shader: 'clouds',
+      uniforms: {
+        uSkyLowColor: [0.85, 0.8, 0.68],
+        uSkyHighColor: [0.55, 0.68, 0.85],
+        uCloudLightColor: [1.0, 0.98, 0.92],
+        uCloudDarkColor: [0.65, 0.68, 0.72],
+        uExposure: 1.25,
+        uStepSize: 0.38,
+        uCloudSpeed: 0.4,
+        uCloudScale: 1.2,
+        uDensity: 0.05,
+        uCoverage: 0.6,
+        uSoftness: 0.2,
+      },
+    },
+    { id: 'grotto', shader: 'image', source: grotto },
+    {
+      id: 'fireflies',
+      shader: 'fireflies',
+      blend: 'additive',
+      uniforms: {
+        uGlowSize: 0.025,
+        uDotSize: 0.004,
+        uSpeed: 0.18,
+        uTwinkle: 1.6,
+        uColor: [1.0, 0.55, 0.2],
+      },
+    },
+    // You, in the cave (fireflies drifting behind you).
+    { id: 'you', shader: 'direct', target: 'subject' },
+  ],
+} as const satisfies KaleidoscopePreset;

package/catalog/composites/fairy-hollow/fairy-hollow.controls.tsx

@@ -0,0 +1,34 @@
+// Turnkey controls for the fairy-hollow composite: a clouds `sky` plus a
+// `fireflies` overlay, each its own ControlForm sharing the one onPatch. The
+// fireflies form now exposes uColor (the firefly tint).
+
+import {
+  CompositeLayerControlPanel,
+  ControlForm,
+  ControlSection,
+  type KaleidoscopeControls,
+} from '../../../src/components/preset-control-panel';
+import { CLOUDS_CONTROLS } from '../../shaders/clouds/clouds';
+import { FIREFLIES_CONTROLS } from '../../shaders/fireflies/fireflies';
+
+export function FairyHollowControls({ uniforms, onPatch, disabled }: KaleidoscopeControls) {
+  return (
+    <>
+      <ControlForm id="sky" uniforms={uniforms.sky ?? {}} onPatch={onPatch} disabled={disabled}>
+        <ControlSection title="sky">
+          <CompositeLayerControlPanel controls={CLOUDS_CONTROLS} />
+        </ControlSection>
+      </ControlForm>
+      <ControlForm
+        id="fireflies"
+        uniforms={uniforms.fireflies ?? {}}
+        onPatch={onPatch}
+        disabled={disabled}
+      >
+        <ControlSection title="fireflies">
+          <CompositeLayerControlPanel controls={FIREFLIES_CONTROLS} />
+        </ControlSection>
+      </ControlForm>
+    </>
+  );
+}

package/catalog/composites/fairy-hollow/fairy-hollow.ts

@@ -0,0 +1,55 @@
+// Fairy hollow: a grand-portal root-cave variant of fairy-cave. A bright sky
+// through the large round opening, the hollow image, cool fireflies drifting on
+// top, you in the cave. A variation of fairy-cave with the clouds `sky`
+// brightened further and the fireflies color-shifted cool to read against the
+// near-white portal.
+//
+// A packaged composite: within the library it imports its image layers
+// relatively; a consumer would import from
+// `react-native-webrtc-kaleidoscope/images/<category>/<leaf>` instead.
+
+import type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';
+// Native variant. The thumbnail is the string id the prebuild plugin bundles
+// `fairy-hollow.thumb.webp` as into the native app target; `resolveImageUri`
+// looks it up in Bundle.main. The web sibling keeps the `Asset.fromModule` path.
+import { hollow } from '../../images/fairy-caves/hollow';
+
+export const fairyHollow = {
+  name: 'Hollow',
+  taxonomy: ['Worlds', 'Fairy Cave'],
+  thumbnail: 'fairy-hollow-thumb',
+  layers: [
+    {
+      id: 'sky',
+      shader: 'clouds',
+      uniforms: {
+        uSkyLowColor: [0.92, 0.9, 0.85],
+        uSkyHighColor: [0.7, 0.8, 0.92],
+        uCloudLightColor: [1.0, 1.0, 0.98],
+        uCloudDarkColor: [0.78, 0.8, 0.85],
+        uExposure: 1.4,
+        uStepSize: 0.38,
+        uCloudSpeed: 0.35,
+        uCloudScale: 1.3,
+        uDensity: 0.04,
+        uCoverage: 0.7,
+        uSoftness: 0.2,
+      },
+    },
+    { id: 'hollow', shader: 'image', source: hollow },
+    {
+      id: 'fireflies',
+      shader: 'fireflies',
+      blend: 'additive',
+      uniforms: {
+        uGlowSize: 0.025,
+        uDotSize: 0.004,
+        uSpeed: 0.18,
+        uTwinkle: 1.6,
+        uColor: [0.65, 0.85, 1.0],
+      },
+    },
+    // You, in the cave (fireflies drifting behind you).
+    { id: 'you', shader: 'direct', target: 'subject' },
+  ],
+} as const satisfies KaleidoscopePreset;

package/catalog/composites/fairy-hollow/fairy-hollow.web.ts

@@ -0,0 +1,47 @@
+// Web variant. Resolves the thumbnail URI via expo-asset at module-load time.
+// Native is fairy-hollow.ts (no thumbnail).
+
+import { Asset } from 'expo-asset';
+import type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';
+import { hollow } from '../../images/fairy-caves/hollow';
+import fairyHollowThumb from './fairy-hollow.thumb.webp';
+
+export const fairyHollow = {
+  name: 'Hollow',
+  taxonomy: ['Worlds', 'Fairy Cave'],
+  thumbnail: Asset.fromModule(fairyHollowThumb).uri,
+  layers: [
+    {
+      id: 'sky',
+      shader: 'clouds',
+      uniforms: {
+        uSkyLowColor: [0.92, 0.9, 0.85],
+        uSkyHighColor: [0.7, 0.8, 0.92],
+        uCloudLightColor: [1.0, 1.0, 0.98],
+        uCloudDarkColor: [0.78, 0.8, 0.85],
+        uExposure: 1.4,
+        uStepSize: 0.38,
+        uCloudSpeed: 0.35,
+        uCloudScale: 1.3,
+        uDensity: 0.04,
+        uCoverage: 0.7,
+        uSoftness: 0.2,
+      },
+    },
+    { id: 'hollow', shader: 'image', source: hollow },
+    {
+      id: 'fireflies',
+      shader: 'fireflies',
+      blend: 'additive',
+      uniforms: {
+        uGlowSize: 0.025,
+        uDotSize: 0.004,
+        uSpeed: 0.18,
+        uTwinkle: 1.6,
+        uColor: [0.65, 0.85, 1.0],
+      },
+    },
+    // You, in the cave (fireflies drifting behind you).
+    { id: 'you', shader: 'direct', target: 'subject' },
+  ],
+} as const satisfies KaleidoscopePreset;

package/catalog/composites/nebula/nebula.controls.tsx

@@ -0,0 +1,19 @@
+// Turnkey controls for the nebula composite (a single `nebula` layer).
+
+import {
+  CompositeLayerControlPanel,
+  ControlForm,
+  ControlSection,
+  type KaleidoscopeControls,
+} from '../../../src/components/preset-control-panel';
+import { NEBULA_CONTROLS } from '../../shaders/nebula/nebula';
+
+export function NebulaControls({ uniforms, onPatch, disabled }: KaleidoscopeControls) {
+  return (
+    <ControlForm id="nebula" uniforms={uniforms.nebula ?? {}} onPatch={onPatch} disabled={disabled}>
+      <ControlSection title="nebula">
+        <CompositeLayerControlPanel controls={NEBULA_CONTROLS} />
+      </ControlSection>
+    </ControlForm>
+  );
+}

package/catalog/composites/nebula/nebula.ts

@@ -0,0 +1,37 @@
+// Deep space: the procedural nebula as a full-frame backdrop, you composited
+// over it. Fully procedural; no image layer.
+//
+// A packaged composite consumers can list by importing this module.
+//
+// Native variant. The thumbnail is the string id the prebuild plugin
+// (app.plugin.js) bundles `nebula.thumb.webp` as into the native app target;
+// `resolveImageUri` looks it up by that id in Bundle.main. Metro's
+// require()-based asset path is not used here because the symlinked-library
+// bundling registers only the first few thumb webps in the asset registry
+// (the rest get module ids that `Image.resolveAssetSource` cannot resolve).
+// The web sibling (nebula.web.ts) keeps the `Asset.fromModule(...).uri`
+// pattern; mirrors images/<id>/{<id>.ts,<id>.web.ts}.
+
+import type { KaleidoscopePreset } from '../../../src/kaleidoscope.preset-book.types';
+
+export const nebula = {
+  name: 'Nebula',
+  taxonomy: ['Shaders', 'Nebula'],
+  thumbnail: 'nebula-thumb',
+  layers: [
+    {
+      id: 'nebula',
+      shader: 'nebula',
+      uniforms: {
+        uColor: [0.53, 0.55, 0.84],
+        uBrightness: 0.87,
+        uSpeed: 0.22,
+        uTwinkleSpeed: 1.94,
+        uScale: 0.88,
+        uStarGlow: 0.38,
+      },
+    },
+    // You, drifting in the field.
+    { id: 'you', shader: 'direct', target: 'subject' },
+  ],
+} as const satisfies KaleidoscopePreset;