@wave3d/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Wave Studio contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,52 @@
+# @wave3d/react
+
+A drop-in, self-optimizing animated **3D gradient wave** for React — the `<Wave3D>` component.
+
+Poster-first and lazy: it renders a server-safe `<div>`, then on the client mounts the wave — showing a poster immediately and upgrading to live WebGL only when the browser can run it (falling back to the poster on no-WebGL, Save-Data, reduced-motion, or context loss), with `three.js` code-split out of the initial load.
+
+## Install
+
+```sh
+pnpm add @wave3d/react @wave3d/core three   # + @types/three for TypeScript
+```
+
+`react` (`>=18`), `@wave3d/core`, and `three` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Wave3D } from "@wave3d/react";
+
+<Wave3D preset="Hero" poster="/wave.png" style={{ width: 480, height: 270 }} />;
+```
+
+Server-render your own poster by passing it as a child — the shell adopts it:
+
+```tsx
+<Wave3D poster="/wave.png">
+  <img data-wave3d-poster src="/wave.png" alt="" />
+</Wave3D>
+```
+
+## Props
+
+| Prop                     | Type                                      | Notes                                                                       |
+| ------------------------ | ----------------------------------------- | --------------------------------------------------------------------------- |
+| `preset`                 | `string \| () => Partial<StudioConfig>`   | a name (lazy-loads the presets chunk) or a function preset (tree-shakeable) |
+| `config`                 | `Partial<StudioConfig>`                   | escape hatch, applied last                                                  |
+| `poster`                 | `string`                                  | poster image shown before / instead of WebGL                                |
+| `lazy`                   | `boolean`                                 | defer the upgrade until visible                                             |
+| `webgl`                  | `"auto" \| "force" \| "off"`              | force or disable the WebGL upgrade                                          |
+| `respectReducedMotion`   | `boolean`                                 | freeze on the poster for reduced-motion users                               |
+| `onReady` / `onFallback` | `(renderer) => void` / `(reason) => void` | lifecycle callbacks                                                         |
+| `className`, `style`     | —                                         | forwarded to the container `<div>`                                          |
+
+Plus flat shortcuts mapped onto the first wave / scene: `palette`, `sheen`, `iridescence`, `speed`, `opacity`, `blendMode`, `theme`, `background`, `transparentBackground`, `quality`, `dprMax`, `loopSeconds`, `paused`, and more. Precedence: **default ← preset ← flat props ← `config`**.
+
+## Credits
+
+Created by [Amir Abushanab](https://github.com/Amir-Abushanab).
+
+## License
+
+[MIT](https://github.com/Amir-Abushanab/wave3d/blob/main/LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,52 @@
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { BlendMode, ColorStop, FallbackReason, FallbackReason as FallbackReason$1, StudioConfig, StudioConfig as StudioConfig$1, WaveHandle, WaveRenderer, WaveRenderer as WaveRenderer$1 } from "@wave3d/core";
+
+//#region src/index.d.ts
+/** Flat props mapped onto the first wave. */
+interface FlatWaveProps {
+  palette?: string[] | ColorStop[];
+  fiberCount?: number;
+  fiberStrength?: number;
+  sheen?: number;
+  iridescence?: number;
+  displaceAmount?: number;
+  speed?: number;
+  opacity?: number;
+  blendMode?: BlendMode;
+  theme?: "solid" | "wireframe";
+}
+/** Flat props mapped onto the scene. */
+interface FlatSceneProps {
+  background?: string;
+  transparentBackground?: boolean;
+  quality?: number;
+  dprMax?: number;
+  loopSeconds?: number;
+  introRamp?: boolean;
+  paused?: boolean;
+}
+interface Wave3DProps extends FlatWaveProps, FlatSceneProps {
+  /** A preset: a function (tree-shakeable) or a name string (lazy-imports the presets chunk). */
+  preset?: string | (() => Partial<StudioConfig$1>);
+  /** Escape hatch: a full/partial config, applied last. Precedence: default ← preset ← flat props ← config. */
+  config?: Partial<StudioConfig$1>;
+  poster?: string;
+  lazy?: boolean;
+  webgl?: "auto" | "force" | "off";
+  respectReducedMotion?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  /** Custom SSR poster markup, e.g. `<img data-wave3d-poster src="…" />` — the shell adopts it. */
+  children?: ReactNode;
+  onReady?: (renderer: WaveRenderer$1) => void;
+  onFallback?: (reason: FallbackReason$1) => void;
+}
+/**
+ * A drop-in, self-optimizing gradient wave. Renders a `<div>` (SSR-safe; pass an
+ * `<img data-wave3d-poster>` child for a server-rendered poster) and, on the client, mounts the
+ * shell — poster-first, lazy, WebGL/reduced-motion/save-data aware, with the engine code-split out.
+ */
+declare function Wave3D(props: Wave3DProps): ReactElement;
+//#endregion
+export { type FallbackReason, type StudioConfig, Wave3D, Wave3D as default, Wave3DProps, type WaveHandle, type WaveRenderer };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,136 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { createDefaultConfig, createWave, makeStops } from "@wave3d/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/index.tsx
+function normalizePalette(p) {
+	return p.length > 0 && typeof p[0] === "string" ? makeStops(p) : p;
+}
+/** Resolve the base config: function preset (sync) → its config; string preset → lazy-load presets. */
+async function resolveBase(preset) {
+	if (typeof preset === "function") return {
+		...createDefaultConfig(),
+		...preset()
+	};
+	if (typeof preset === "string") {
+		const { PRESETS } = await import("@wave3d/core/presets");
+		const make = PRESETS[preset];
+		if (make) return make();
+	}
+	return createDefaultConfig();
+}
+/** Base config we can build synchronously (function preset / default) — a string preset resolves later. */
+function syncBase(preset) {
+	return typeof preset === "function" ? {
+		...createDefaultConfig(),
+		...preset()
+	} : createDefaultConfig();
+}
+/** Apply the flat props (and the config escape hatch) onto a full base config. */
+function buildConfig(base, props) {
+	const w = base.waves[0];
+	if (props.palette !== void 0) w.palette = normalizePalette(props.palette);
+	if (props.fiberCount !== void 0) w.fiberCount = props.fiberCount;
+	if (props.fiberStrength !== void 0) w.fiberStrength = props.fiberStrength;
+	if (props.sheen !== void 0) w.sheen = props.sheen;
+	if (props.iridescence !== void 0) w.iridescence = props.iridescence;
+	if (props.displaceAmount !== void 0) w.displaceAmount = props.displaceAmount;
+	if (props.speed !== void 0) w.speed = props.speed;
+	if (props.opacity !== void 0) w.opacity = props.opacity;
+	if (props.blendMode !== void 0) w.blendMode = props.blendMode;
+	if (props.theme !== void 0) w.theme = props.theme;
+	if (props.background !== void 0) base.background = props.background;
+	if (props.transparentBackground !== void 0) base.transparentBackground = props.transparentBackground;
+	if (props.quality !== void 0) base.quality = props.quality;
+	if (props.dprMax !== void 0) base.dprMax = props.dprMax;
+	if (props.loopSeconds !== void 0) base.loopSeconds = props.loopSeconds;
+	if (props.introRamp !== void 0) base.introRamp = props.introRamp;
+	if (props.paused !== void 0) base.paused = props.paused;
+	return {
+		...base,
+		...props.config
+	};
+}
+/** A stable string that changes whenever the resolved config would — keys the update effect. */
+function configKey(props) {
+	const flat = {};
+	for (const k of [
+		"palette",
+		"fiberCount",
+		"fiberStrength",
+		"sheen",
+		"iridescence",
+		"displaceAmount",
+		"speed",
+		"opacity",
+		"blendMode",
+		"theme",
+		"background",
+		"transparentBackground",
+		"quality",
+		"dprMax",
+		"loopSeconds",
+		"introRamp",
+		"paused"
+	]) if (props[k] !== void 0) flat[k] = props[k];
+	return JSON.stringify({
+		preset: typeof props.preset === "function" ? "fn" : props.preset,
+		flat,
+		config: props.config
+	});
+}
+/**
+* A drop-in, self-optimizing gradient wave. Renders a `<div>` (SSR-safe; pass an
+* `<img data-wave3d-poster>` child for a server-rendered poster) and, on the client, mounts the
+* shell — poster-first, lazy, WebGL/reduced-motion/save-data aware, with the engine code-split out.
+*/
+function Wave3D(props) {
+	const { className, style, children } = props;
+	const containerRef = useRef(null);
+	const handleRef = useRef(null);
+	const cbRef = useRef({});
+	cbRef.current.onReady = props.onReady;
+	cbRef.current.onFallback = props.onFallback;
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		let cancelled = false;
+		const options = {
+			poster: props.poster,
+			lazy: props.lazy,
+			webgl: props.webgl,
+			respectReducedMotion: props.respectReducedMotion,
+			onReady: (r) => cbRef.current.onReady?.(r),
+			onFallback: (reason) => cbRef.current.onFallback?.(reason)
+		};
+		const handle = createWave(container, buildConfig(syncBase(props.preset), props), options);
+		handleRef.current = handle;
+		if (typeof props.preset === "string") resolveBase(props.preset).then((base) => {
+			if (!cancelled && handleRef.current === handle) handle.set(buildConfig(base, props));
+		});
+		return () => {
+			cancelled = true;
+			handle.destroy();
+			handleRef.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		const handle = handleRef.current;
+		if (!handle) return;
+		const apply = (base) => {
+			if (handleRef.current === handle) handle.set(buildConfig(base, props));
+		};
+		if (typeof props.preset === "string") resolveBase(props.preset).then(apply);
+		else apply(syncBase(props.preset));
+	}, [configKey(props)]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className,
+		style,
+		children
+	});
+}
+//#endregion
+export { Wave3D, Wave3D as default };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport type { CSSProperties, ReactNode, ReactElement } from \"react\";\nimport { createWave, createDefaultConfig, makeStops } from \"@wave3d/core\";\nimport type {\n  StudioConfig,\n  WaveConfig,\n  ColorStop,\n  BlendMode,\n  WaveHandle,\n  WaveOptions,\n  WaveRenderer,\n  FallbackReason,\n} from \"@wave3d/core\";\n\n/** Flat props mapped onto the first wave. */\ninterface FlatWaveProps {\n  palette?: string[] | ColorStop[];\n  fiberCount?: number;\n  fiberStrength?: number;\n  sheen?: number;\n  iridescence?: number;\n  displaceAmount?: number;\n  speed?: number;\n  opacity?: number;\n  blendMode?: BlendMode;\n  theme?: \"solid\" | \"wireframe\";\n}\n\n/** Flat props mapped onto the scene. */\ninterface FlatSceneProps {\n  background?: string;\n  transparentBackground?: boolean;\n  quality?: number;\n  dprMax?: number;\n  loopSeconds?: number;\n  introRamp?: boolean;\n  paused?: boolean;\n}\n\nexport interface Wave3DProps extends FlatWaveProps, FlatSceneProps {\n  /** A preset: a function (tree-shakeable) or a name string (lazy-imports the presets chunk). */\n  preset?: string | (() => Partial<StudioConfig>);\n  /** Escape hatch: a full/partial config, applied last. Precedence: default ← preset ← flat props ← config. */\n  config?: Partial<StudioConfig>;\n  poster?: string;\n  lazy?: boolean;\n  webgl?: \"auto\" | \"force\" | \"off\";\n  respectReducedMotion?: boolean;\n  className?: string;\n  style?: CSSProperties;\n  /** Custom SSR poster markup, e.g. `<img data-wave3d-poster src=\"…\" />` — the shell adopts it. */\n  children?: ReactNode;\n  onReady?: (renderer: WaveRenderer) => void;\n  onFallback?: (reason: FallbackReason) => void;\n}\n\nfunction normalizePalette(p: string[] | ColorStop[]): ColorStop[] {\n  return p.length > 0 && typeof p[0] === \"string\" ? makeStops(p as string[]) : (p as ColorStop[]);\n}\n\n/** Resolve the base config: function preset (sync) → its config; string preset → lazy-load presets. */\nasync function resolveBase(preset: Wave3DProps[\"preset\"]): Promise<StudioConfig> {\n  if (typeof preset === \"function\") return { ...createDefaultConfig(), ...preset() };\n  if (typeof preset === \"string\") {\n    const { PRESETS } = await import(\"@wave3d/core/presets\");\n    const make = PRESETS[preset];\n    if (make) return make();\n  }\n  return createDefaultConfig();\n}\n\n/** Base config we can build synchronously (function preset / default) — a string preset resolves later. */\nfunction syncBase(preset: Wave3DProps[\"preset\"]): StudioConfig {\n  return typeof preset === \"function\"\n    ? { ...createDefaultConfig(), ...preset() }\n    : createDefaultConfig();\n}\n\n/** Apply the flat props (and the config escape hatch) onto a full base config. */\nfunction buildConfig(base: StudioConfig, props: Wave3DProps): Partial<StudioConfig> {\n  const w: WaveConfig = base.waves[0];\n  if (props.palette !== undefined) w.palette = normalizePalette(props.palette);\n  if (props.fiberCount !== undefined) w.fiberCount = props.fiberCount;\n  if (props.fiberStrength !== undefined) w.fiberStrength = props.fiberStrength;\n  if (props.sheen !== undefined) w.sheen = props.sheen;\n  if (props.iridescence !== undefined) w.iridescence = props.iridescence;\n  if (props.displaceAmount !== undefined) w.displaceAmount = props.displaceAmount;\n  if (props.speed !== undefined) w.speed = props.speed;\n  if (props.opacity !== undefined) w.opacity = props.opacity;\n  if (props.blendMode !== undefined) w.blendMode = props.blendMode;\n  if (props.theme !== undefined) w.theme = props.theme;\n  if (props.background !== undefined) base.background = props.background;\n  if (props.transparentBackground !== undefined)\n    base.transparentBackground = props.transparentBackground;\n  if (props.quality !== undefined) base.quality = props.quality;\n  if (props.dprMax !== undefined) base.dprMax = props.dprMax;\n  if (props.loopSeconds !== undefined) base.loopSeconds = props.loopSeconds;\n  if (props.introRamp !== undefined) base.introRamp = props.introRamp;\n  if (props.paused !== undefined) base.paused = props.paused;\n  return { ...base, ...props.config };\n}\n\n/** A stable string that changes whenever the resolved config would — keys the update effect. */\nfunction configKey(props: Wave3DProps): string {\n  const flat: Record<string, unknown> = {};\n  const keys = [\n    \"palette\",\n    \"fiberCount\",\n    \"fiberStrength\",\n    \"sheen\",\n    \"iridescence\",\n    \"displaceAmount\",\n    \"speed\",\n    \"opacity\",\n    \"blendMode\",\n    \"theme\",\n    \"background\",\n    \"transparentBackground\",\n    \"quality\",\n    \"dprMax\",\n    \"loopSeconds\",\n    \"introRamp\",\n    \"paused\",\n  ] as const;\n  for (const k of keys) if (props[k] !== undefined) flat[k] = props[k];\n  return JSON.stringify({\n    preset: typeof props.preset === \"function\" ? \"fn\" : props.preset,\n    flat,\n    config: props.config,\n  });\n}\n\n/**\n * A drop-in, self-optimizing gradient wave. Renders a `<div>` (SSR-safe; pass an\n * `<img data-wave3d-poster>` child for a server-rendered poster) and, on the client, mounts the\n * shell — poster-first, lazy, WebGL/reduced-motion/save-data aware, with the engine code-split out.\n */\nexport function Wave3D(props: Wave3DProps): ReactElement {\n  const { className, style, children } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const handleRef = useRef<WaveHandle | null>(null);\n  // Keep the latest callbacks in a ref so they never force a remount.\n  const cbRef = useRef<Pick<Wave3DProps, \"onReady\" | \"onFallback\">>({});\n  cbRef.current.onReady = props.onReady;\n  cbRef.current.onFallback = props.onFallback;\n\n  // Mount once. StrictMode double-mount is safe: destroy() aborts a pending upgrade, and the\n  // pre-upgrade create/destroy is DOM-only (poster + IntersectionObserver).\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    let cancelled = false;\n    const options: WaveOptions = {\n      poster: props.poster,\n      lazy: props.lazy,\n      webgl: props.webgl,\n      respectReducedMotion: props.respectReducedMotion,\n      onReady: (r) => cbRef.current.onReady?.(r),\n      onFallback: (reason) => cbRef.current.onFallback?.(reason),\n    };\n    const handle = createWave(container, buildConfig(syncBase(props.preset), props), options);\n    handleRef.current = handle;\n    // A string preset resolves asynchronously; stage/set the real config once it loads.\n    if (typeof props.preset === \"string\") {\n      void resolveBase(props.preset).then((base) => {\n        if (!cancelled && handleRef.current === handle) handle.set(buildConfig(base, props));\n      });\n    }\n    return () => {\n      cancelled = true;\n      handle.destroy();\n      handleRef.current = null;\n    };\n    // Mount-time only (options are captured once; config changes flow through the effect below).\n  }, []);\n\n  // Push config changes (flat props / config / preset) to the live handle.\n  const key = configKey(props);\n  useEffect(() => {\n    const handle = handleRef.current;\n    if (!handle) return;\n    const apply = (base: StudioConfig): void => {\n      if (handleRef.current === handle) handle.set(buildConfig(base, props));\n    };\n    if (typeof props.preset === \"string\") void resolveBase(props.preset).then(apply);\n    else apply(syncBase(props.preset));\n    // Re-runs only when the serialized config (`key`) changes; `props` is read fresh inside.\n  }, [key]);\n\n  return (\n    <div ref={containerRef} className={className} style={style}>\n      {children}\n    </div>\n  );\n}\n\nexport default Wave3D;\nexport type { StudioConfig, WaveHandle, WaveRenderer, FallbackReason } from \"@wave3d/core\";\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@wave3d/react",
+  "version": "0.1.0",
+  "description": "React <Wave3D> component for @wave3d — a drop-in, self-optimizing animated gradient wave",
+  "keywords": [
+    "animation",
+    "background",
+    "component",
+    "gradient",
+    "react",
+    "three",
+    "threejs",
+    "wave",
+    "webgl"
+  ],
+  "homepage": "https://github.com/Amir-Abushanab/wave3d/tree/main/packages/react#readme",
+  "bugs": "https://github.com/Amir-Abushanab/wave3d/issues",
+  "license": "MIT",
+  "author": "Amir Abushanab (https://github.com/Amir-Abushanab)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Amir-Abushanab/wave3d.git",
+    "directory": "packages/react"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "@wave3d/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "@wave3d/core": "^0.1.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "tsdown"
+  }
+}