@paper-design/shaders-react 0.0.53 → 0.0.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/shader-mount.js +6 -1
- package/dist/shader-mount.js.map +2 -2
- package/dist/shaders/dithering.d.ts +2 -0
- package/dist/shaders/dithering.js +9 -8
- package/dist/shaders/dithering.js.map +2 -2
- package/dist/shaders/fluted-glass.d.ts +2 -0
- package/dist/shaders/fluted-glass.js +26 -19
- package/dist/shaders/fluted-glass.js.map +2 -2
- package/dist/shaders/heatmap.js +4 -3
- package/dist/shaders/heatmap.js.map +2 -2
- package/dist/shaders/image-dithering.d.ts +2 -0
- package/dist/shaders/image-dithering.js +8 -7
- package/dist/shaders/image-dithering.js.map +2 -2
- package/dist/shaders/mesh-gradient.js +16 -4
- package/dist/shaders/mesh-gradient.js.map +2 -2
- package/dist/shaders/paper-texture.d.ts +8 -0
- package/dist/shaders/paper-texture.js +30 -25
- package/dist/shaders/paper-texture.js.map +2 -2
- package/dist/shaders/pulsing-border.js +56 -21
- package/dist/shaders/pulsing-border.js.map +2 -2
- package/dist/shaders/static-mesh-gradient.js +0 -2
- package/dist/shaders/static-mesh-gradient.js.map +2 -2
- package/dist/shaders/static-radial-gradient.js +0 -2
- package/dist/shaders/static-radial-gradient.js.map +2 -2
- package/dist/shaders/water.d.ts +2 -0
- package/dist/shaders/water.js +10 -7
- package/dist/shaders/water.js.map +2 -2
- package/package.json +2 -2
package/dist/shader-mount.js
CHANGED
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
"use client";
|
|
7
7
|
import { useEffect, useRef, forwardRef, useState } from "react";
|
|
8
8
|
import {
|
|
9
|
-
ShaderMount as ShaderMountVanilla
|
|
9
|
+
ShaderMount as ShaderMountVanilla,
|
|
10
|
+
getEmptyPixel
|
|
10
11
|
} from "@paper-design/shaders";
|
|
11
12
|
import { useMergeRefs } from "./use-merge-refs.js";
|
|
12
13
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -33,6 +34,10 @@ async function processUniforms(uniformsProp) {
|
|
|
33
34
|
};
|
|
34
35
|
Object.entries(uniformsProp).forEach(([key, value]) => {
|
|
35
36
|
if (typeof value === "string") {
|
|
37
|
+
if (!value) {
|
|
38
|
+
processedUniforms[key] = getEmptyPixel();
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
36
41
|
if (!isValidUrl(value)) {
|
|
37
42
|
console.warn(`Uniform "${key}" has invalid URL "${value}". Skipping image loading.`);
|
|
38
43
|
return;
|
package/dist/shader-mount.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/shader-mount.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState } from 'react';\nimport {\n ShaderMount as ShaderMountVanilla,\n type PaperShaderElement,\n type ShaderMotionParams,\n type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\n\n/**\n * React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images\n *\n * We accept undefined as a convenience for server rendering, when some things may be undefined\n * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering\n */\ninterface ShaderMountUniformsReact {\n [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | undefined;\n}\n\nexport interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {\n ref?: React.Ref<PaperShaderElement>;\n fragmentShader: string;\n uniforms: ShaderMountUniformsReact;\n minPixelRatio?: number;\n maxPixelCount?: number;\n webGlContextAttributes?: WebGLContextAttributes;\n\n /** Inline CSS width style */\n width?: string | number;\n /** Inline CSS height style */\n height?: string | number;\n}\n\nexport interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'> {\n ref?: React.Ref<PaperShaderElement>;\n minPixelRatio?: number;\n maxPixelCount?: number;\n webGlContextAttributes?: WebGLContextAttributes;\n\n /** Inline CSS width style */\n width?: string | number;\n /** Inline CSS height style */\n height?: string | number;\n}\n\n/** Parse the provided uniforms, turning URL strings into loaded images */\nasync function processUniforms(uniformsProp: ShaderMountUniformsReact): Promise<ShaderMountUniforms> {\n const processedUniforms = {} as ShaderMountUniforms;\n const imageLoadPromises: Promise<void>[] = [];\n\n const isValidUrl = (url: string): boolean => {\n try {\n // Handle absolute paths\n if (url.startsWith('/')) return true;\n // Check if it's a valid URL\n new URL(url);\n return true;\n } catch {\n return false;\n }\n };\n\n const isExternalUrl = (url: string): boolean => {\n try {\n if (url.startsWith('/')) return false;\n const urlObject = new URL(url, window.location.origin);\n return urlObject.origin !== window.location.origin;\n } catch {\n return false;\n }\n };\n\n Object.entries(uniformsProp).forEach(([key, value]) => {\n if (typeof value === 'string') {\n // Make sure the provided string is a valid URL or just skip trying to set this uniform entirely\n if (!isValidUrl(value)) {\n console.warn(`Uniform \"${key}\" has invalid URL \"${value}\". Skipping image loading.`);\n return;\n }\n\n const imagePromise = new Promise<void>((resolve, reject) => {\n const img = new Image();\n if (isExternalUrl(value)) {\n img.crossOrigin = 'anonymous';\n }\n img.onload = () => {\n processedUniforms[key] = img;\n resolve();\n };\n img.onerror = () => {\n console.error(`Could not set uniforms. Failed to load image at ${value}`);\n reject();\n };\n img.src = value;\n });\n imageLoadPromises.push(imagePromise);\n } else {\n processedUniforms[key] = value;\n }\n });\n\n await Promise.all(imageLoadPromises);\n return processedUniforms;\n}\n\n/**\n * A React component that mounts a shader and updates its uniforms as the component's props change\n * If you pass a string as a uniform value, it will be assumed to be a URL and attempted to be loaded as an image\n */\nexport const ShaderMount: React.FC<ShaderMountProps> = forwardRef<PaperShaderElement, ShaderMountProps>(\n function ShaderMountImpl(\n {\n fragmentShader,\n uniforms: uniformsProp,\n webGlContextAttributes,\n speed = 0,\n frame = 0,\n width,\n height,\n minPixelRatio,\n maxPixelCount,\n style,\n ...divProps\n },\n forwardedRef\n ) {\n const [isInitialized, setIsInitialized] = useState(false);\n const divRef = useRef<PaperShaderElement>(null);\n const shaderMountRef: React.RefObject<ShaderMountVanilla | null> = useRef<ShaderMountVanilla>(null);\n\n // Initialize the ShaderMountVanilla\n useEffect(() => {\n const initShader = async () => {\n const uniforms = await processUniforms(uniformsProp);\n\n if (divRef.current && !shaderMountRef.current) {\n shaderMountRef.current = new ShaderMountVanilla(\n divRef.current,\n fragmentShader,\n uniforms,\n webGlContextAttributes,\n speed,\n frame,\n minPixelRatio,\n maxPixelCount\n );\n\n setIsInitialized(true);\n }\n };\n\n initShader();\n\n return () => {\n shaderMountRef.current?.dispose();\n shaderMountRef.current = null;\n };\n }, [fragmentShader, webGlContextAttributes]);\n\n // Uniforms\n useEffect(() => {\n let isStale = false;\n\n const updateUniforms = async () => {\n const uniforms = await processUniforms(uniformsProp);\n\n if (!isStale) {\n // We only use the freshest uniforms otherwise we can get into race conditions\n // if some uniforms (images!) take longer to load in subsequent effect runs.\n shaderMountRef.current?.setUniforms(uniforms);\n }\n };\n\n updateUniforms();\n\n return () => {\n isStale = true;\n };\n }, [uniformsProp, isInitialized]);\n\n // Speed\n useEffect(() => {\n shaderMountRef.current?.setSpeed(speed);\n }, [speed, isInitialized]);\n\n // Max Pixel Count\n useEffect(() => {\n shaderMountRef.current?.setMaxPixelCount(maxPixelCount);\n }, [maxPixelCount, isInitialized]);\n\n // Min Pixel Ratio\n useEffect(() => {\n shaderMountRef.current?.setMinPixelRatio(minPixelRatio);\n }, [minPixelRatio, isInitialized]);\n\n // Frame\n useEffect(() => {\n shaderMountRef.current?.setFrame(frame);\n }, [frame, isInitialized]);\n\n const mergedRef = useMergeRefs([divRef, forwardedRef]) as unknown as React.RefObject<HTMLDivElement>;\n return (\n <div\n ref={mergedRef}\n style={width !== undefined || height !== undefined ? { width, height, ...style } : style}\n {...divProps}\n />\n );\n }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
|
|
5
|
-
"mappings": ";;;;;;AAEA,SAAS,WAAW,QAAQ,YAAY,gBAAgB;AACxD;AAAA,EACE,eAAe;AAAA,
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState } from 'react';\nimport {\n ShaderMount as ShaderMountVanilla,\n getEmptyPixel,\n type PaperShaderElement,\n type ShaderMotionParams,\n type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\n\n/**\n * React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images\n *\n * We accept undefined as a convenience for server rendering, when some things may be undefined\n * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering\n */\ninterface ShaderMountUniformsReact {\n [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | undefined;\n}\n\nexport interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {\n ref?: React.Ref<PaperShaderElement>;\n fragmentShader: string;\n uniforms: ShaderMountUniformsReact;\n minPixelRatio?: number;\n maxPixelCount?: number;\n webGlContextAttributes?: WebGLContextAttributes;\n\n /** Inline CSS width style */\n width?: string | number;\n /** Inline CSS height style */\n height?: string | number;\n}\n\nexport interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'> {\n ref?: React.Ref<PaperShaderElement>;\n minPixelRatio?: number;\n maxPixelCount?: number;\n webGlContextAttributes?: WebGLContextAttributes;\n\n /** Inline CSS width style */\n width?: string | number;\n /** Inline CSS height style */\n height?: string | number;\n}\n\n/** Parse the provided uniforms, turning URL strings into loaded images */\nasync function processUniforms(uniformsProp: ShaderMountUniformsReact): Promise<ShaderMountUniforms> {\n const processedUniforms = {} as ShaderMountUniforms;\n const imageLoadPromises: Promise<void>[] = [];\n\n const isValidUrl = (url: string): boolean => {\n try {\n // Handle absolute paths\n if (url.startsWith('/')) return true;\n // Check if it's a valid URL\n new URL(url);\n return true;\n } catch {\n return false;\n }\n };\n\n const isExternalUrl = (url: string): boolean => {\n try {\n if (url.startsWith('/')) return false;\n const urlObject = new URL(url, window.location.origin);\n return urlObject.origin !== window.location.origin;\n } catch {\n return false;\n }\n };\n\n Object.entries(uniformsProp).forEach(([key, value]) => {\n if (typeof value === 'string') {\n // Use a transparent pixel for empty strings\n if (!value) {\n processedUniforms[key] = getEmptyPixel();\n return;\n }\n\n // Make sure the provided string is a valid URL or just skip trying to set this uniform entirely\n if (!isValidUrl(value)) {\n console.warn(`Uniform \"${key}\" has invalid URL \"${value}\". Skipping image loading.`);\n return;\n }\n\n const imagePromise = new Promise<void>((resolve, reject) => {\n const img = new Image();\n if (isExternalUrl(value)) {\n img.crossOrigin = 'anonymous';\n }\n img.onload = () => {\n processedUniforms[key] = img;\n resolve();\n };\n img.onerror = () => {\n console.error(`Could not set uniforms. Failed to load image at ${value}`);\n reject();\n };\n img.src = value;\n });\n imageLoadPromises.push(imagePromise);\n } else {\n processedUniforms[key] = value;\n }\n });\n\n await Promise.all(imageLoadPromises);\n return processedUniforms;\n}\n\n/**\n * A React component that mounts a shader and updates its uniforms as the component's props change\n * If you pass a string as a uniform value, it will be assumed to be a URL and attempted to be loaded as an image\n */\nexport const ShaderMount: React.FC<ShaderMountProps> = forwardRef<PaperShaderElement, ShaderMountProps>(\n function ShaderMountImpl(\n {\n fragmentShader,\n uniforms: uniformsProp,\n webGlContextAttributes,\n speed = 0,\n frame = 0,\n width,\n height,\n minPixelRatio,\n maxPixelCount,\n style,\n ...divProps\n },\n forwardedRef\n ) {\n const [isInitialized, setIsInitialized] = useState(false);\n const divRef = useRef<PaperShaderElement>(null);\n const shaderMountRef: React.RefObject<ShaderMountVanilla | null> = useRef<ShaderMountVanilla>(null);\n\n // Initialize the ShaderMountVanilla\n useEffect(() => {\n const initShader = async () => {\n const uniforms = await processUniforms(uniformsProp);\n\n if (divRef.current && !shaderMountRef.current) {\n shaderMountRef.current = new ShaderMountVanilla(\n divRef.current,\n fragmentShader,\n uniforms,\n webGlContextAttributes,\n speed,\n frame,\n minPixelRatio,\n maxPixelCount\n );\n\n setIsInitialized(true);\n }\n };\n\n initShader();\n\n return () => {\n shaderMountRef.current?.dispose();\n shaderMountRef.current = null;\n };\n }, [fragmentShader, webGlContextAttributes]);\n\n // Uniforms\n useEffect(() => {\n let isStale = false;\n\n const updateUniforms = async () => {\n const uniforms = await processUniforms(uniformsProp);\n\n if (!isStale) {\n // We only use the freshest uniforms otherwise we can get into race conditions\n // if some uniforms (images!) take longer to load in subsequent effect runs.\n shaderMountRef.current?.setUniforms(uniforms);\n }\n };\n\n updateUniforms();\n\n return () => {\n isStale = true;\n };\n }, [uniformsProp, isInitialized]);\n\n // Speed\n useEffect(() => {\n shaderMountRef.current?.setSpeed(speed);\n }, [speed, isInitialized]);\n\n // Max Pixel Count\n useEffect(() => {\n shaderMountRef.current?.setMaxPixelCount(maxPixelCount);\n }, [maxPixelCount, isInitialized]);\n\n // Min Pixel Ratio\n useEffect(() => {\n shaderMountRef.current?.setMinPixelRatio(minPixelRatio);\n }, [minPixelRatio, isInitialized]);\n\n // Frame\n useEffect(() => {\n shaderMountRef.current?.setFrame(frame);\n }, [frame, isInitialized]);\n\n const mergedRef = useMergeRefs([divRef, forwardedRef]) as unknown as React.RefObject<HTMLDivElement>;\n return (\n <div\n ref={mergedRef}\n style={width !== undefined || height !== undefined ? { width, height, ...style } : style}\n {...divProps}\n />\n );\n }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type DitheringParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
3
|
export interface DitheringProps extends ShaderComponentProps, DitheringParams {
|
|
4
|
+
/** @deprecated use `size` instead */
|
|
5
|
+
pxSize?: number;
|
|
4
6
|
}
|
|
5
7
|
type DitheringPreset = ShaderPreset<DitheringParams>;
|
|
6
8
|
export declare const defaultPreset: DitheringPreset;
|
|
@@ -26,7 +26,7 @@ const defaultPreset = {
|
|
|
26
26
|
colorFront: "#00b2ff",
|
|
27
27
|
shape: "sphere",
|
|
28
28
|
type: "4x4",
|
|
29
|
-
|
|
29
|
+
size: 2
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
32
|
const sinePreset = {
|
|
@@ -39,7 +39,7 @@ const sinePreset = {
|
|
|
39
39
|
colorFront: "#00becc",
|
|
40
40
|
shape: "wave",
|
|
41
41
|
type: "4x4",
|
|
42
|
-
|
|
42
|
+
size: 11,
|
|
43
43
|
scale: 1.2
|
|
44
44
|
}
|
|
45
45
|
};
|
|
@@ -53,7 +53,7 @@ const bugsPreset = {
|
|
|
53
53
|
colorFront: "#008000",
|
|
54
54
|
shape: "dots",
|
|
55
55
|
type: "random",
|
|
56
|
-
|
|
56
|
+
size: 9
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
59
|
const ripplePreset = {
|
|
@@ -66,7 +66,7 @@ const ripplePreset = {
|
|
|
66
66
|
colorFront: "#c67953",
|
|
67
67
|
shape: "ripple",
|
|
68
68
|
type: "2x2",
|
|
69
|
-
|
|
69
|
+
size: 3
|
|
70
70
|
}
|
|
71
71
|
};
|
|
72
72
|
const swirlPreset = {
|
|
@@ -79,7 +79,7 @@ const swirlPreset = {
|
|
|
79
79
|
colorFront: "#47a8e1",
|
|
80
80
|
shape: "swirl",
|
|
81
81
|
type: "8x8",
|
|
82
|
-
|
|
82
|
+
size: 2
|
|
83
83
|
}
|
|
84
84
|
};
|
|
85
85
|
const warpPreset = {
|
|
@@ -92,7 +92,7 @@ const warpPreset = {
|
|
|
92
92
|
colorFront: "#56ae6c",
|
|
93
93
|
shape: "warp",
|
|
94
94
|
type: "4x4",
|
|
95
|
-
|
|
95
|
+
size: 2.5
|
|
96
96
|
}
|
|
97
97
|
};
|
|
98
98
|
const ditheringPresets = [
|
|
@@ -111,7 +111,8 @@ const Dithering = memo(function DitheringImpl({
|
|
|
111
111
|
colorFront = defaultPreset.params.colorFront,
|
|
112
112
|
shape = defaultPreset.params.shape,
|
|
113
113
|
type = defaultPreset.params.type,
|
|
114
|
-
pxSize
|
|
114
|
+
pxSize,
|
|
115
|
+
size = pxSize === void 0 ? defaultPreset.params.size : pxSize,
|
|
115
116
|
// Sizing props
|
|
116
117
|
fit = defaultPreset.params.fit,
|
|
117
118
|
scale = defaultPreset.params.scale,
|
|
@@ -130,7 +131,7 @@ const Dithering = memo(function DitheringImpl({
|
|
|
130
131
|
u_colorFront: getShaderColorFromString(colorFront),
|
|
131
132
|
u_shape: DitheringShapes[shape],
|
|
132
133
|
u_type: DitheringTypes[type],
|
|
133
|
-
u_pxSize:
|
|
134
|
+
u_pxSize: size,
|
|
134
135
|
// Sizing uniforms
|
|
135
136
|
u_fit: ShaderFitOptions[fit],
|
|
136
137
|
u_scale: scale,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/dithering.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n ditheringFragmentShader,\n ShaderFitOptions,\n type DitheringUniforms,\n type DitheringParams,\n type ShaderPreset,\n defaultPatternSizing,\n defaultObjectSizing,\n DitheringTypes,\n} from '@paper-design/shaders';\nimport { DitheringShapes } from '@paper-design/shaders';\n\nexport interface DitheringProps extends ShaderComponentProps, DitheringParams {}\n\ntype DitheringPreset = ShaderPreset<DitheringParams>;\n\nexport const defaultPreset: DitheringPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n scale: 0.6,\n colorBack: '#000000',\n colorFront: '#00b2ff',\n shape: 'sphere',\n type: '4x4',\n
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n ditheringFragmentShader,\n ShaderFitOptions,\n type DitheringUniforms,\n type DitheringParams,\n type ShaderPreset,\n defaultPatternSizing,\n defaultObjectSizing,\n DitheringTypes,\n} from '@paper-design/shaders';\nimport { DitheringShapes } from '@paper-design/shaders';\n\nexport interface DitheringProps extends ShaderComponentProps, DitheringParams {\n /** @deprecated use `size` instead */\n pxSize?: number;\n}\n\ntype DitheringPreset = ShaderPreset<DitheringParams>;\n\nexport const defaultPreset: DitheringPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n scale: 0.6,\n colorBack: '#000000',\n colorFront: '#00b2ff',\n shape: 'sphere',\n type: '4x4',\n size: 2,\n },\n} as const;\n\nexport const sinePreset: DitheringPreset = {\n name: 'Sine Wave',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#730d54',\n colorFront: '#00becc',\n shape: 'wave',\n type: '4x4',\n size: 11,\n scale: 1.2,\n },\n} as const;\n\nexport const bugsPreset: DitheringPreset = {\n name: 'Bugs',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colorFront: '#008000',\n shape: 'dots',\n type: 'random',\n size: 9,\n },\n} as const;\n\nexport const ripplePreset: DitheringPreset = {\n name: 'Ripple',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#603520',\n colorFront: '#c67953',\n shape: 'ripple',\n type: '2x2',\n size: 3,\n },\n} as const;\n\nexport const swirlPreset: DitheringPreset = {\n name: 'Swirl',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#00000000',\n colorFront: '#47a8e1',\n shape: 'swirl',\n type: '8x8',\n size: 2,\n },\n} as const;\n\nexport const warpPreset: DitheringPreset = {\n name: 'Warp',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#301c2a',\n colorFront: '#56ae6c',\n shape: 'warp',\n type: '4x4',\n size: 2.5,\n },\n} as const;\n\nexport const ditheringPresets: DitheringPreset[] = [\n defaultPreset,\n warpPreset,\n sinePreset,\n ripplePreset,\n bugsPreset,\n swirlPreset,\n];\n\nexport const Dithering: React.FC<DitheringProps> = memo(function DitheringImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colorFront = defaultPreset.params.colorFront,\n shape = defaultPreset.params.shape,\n type = defaultPreset.params.type,\n pxSize,\n size = pxSize === undefined ? defaultPreset.params.size : pxSize,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorFront: getShaderColorFromString(colorFront),\n u_shape: DitheringShapes[shape],\n u_type: DitheringTypes[type],\n u_pxSize: size,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies DitheringUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={ditheringFragmentShader} uniforms={uniforms} />\n );\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type FlutedGlassParams, type ImageShaderPreset } from '@paper-design/shaders';
|
|
3
3
|
export interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {
|
|
4
|
+
/** @deprecated use `size` instead */
|
|
5
|
+
count?: number;
|
|
4
6
|
}
|
|
5
7
|
type FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;
|
|
6
8
|
export declare const defaultPreset: FlutedGlassPreset;
|
|
@@ -20,14 +20,15 @@ const defaultPreset = {
|
|
|
20
20
|
fit: "cover",
|
|
21
21
|
speed: 0,
|
|
22
22
|
frame: 0,
|
|
23
|
-
|
|
23
|
+
size: 0.15,
|
|
24
24
|
angle: 0,
|
|
25
25
|
distortionShape: "lens",
|
|
26
26
|
shape: "lines",
|
|
27
27
|
distortion: 0.5,
|
|
28
28
|
shift: 0,
|
|
29
29
|
blur: 3,
|
|
30
|
-
|
|
30
|
+
edges: 0,
|
|
31
|
+
margin: 0,
|
|
31
32
|
marginLeft: 0,
|
|
32
33
|
marginRight: 0,
|
|
33
34
|
marginTop: 0,
|
|
@@ -41,14 +42,15 @@ const wavesPreset = {
|
|
|
41
42
|
fit: "cover",
|
|
42
43
|
speed: 0,
|
|
43
44
|
frame: 0,
|
|
44
|
-
|
|
45
|
+
size: 0.3,
|
|
45
46
|
angle: 0,
|
|
46
47
|
distortionShape: "contour",
|
|
47
48
|
shape: "wave",
|
|
48
49
|
distortion: 0.3,
|
|
49
50
|
shift: 0,
|
|
50
51
|
blur: 0,
|
|
51
|
-
|
|
52
|
+
edges: 0,
|
|
53
|
+
margin: 0,
|
|
52
54
|
marginLeft: 0,
|
|
53
55
|
marginRight: 0,
|
|
54
56
|
marginTop: 0,
|
|
@@ -63,14 +65,15 @@ const irregularPreset = {
|
|
|
63
65
|
scale: 4,
|
|
64
66
|
speed: 0,
|
|
65
67
|
frame: 0,
|
|
66
|
-
|
|
68
|
+
size: 0.3,
|
|
67
69
|
angle: 150,
|
|
68
70
|
distortionShape: "facete",
|
|
69
71
|
shape: "linesIrregular",
|
|
70
72
|
distortion: 1,
|
|
71
73
|
shift: 0,
|
|
72
74
|
blur: 25,
|
|
73
|
-
|
|
75
|
+
edges: 1,
|
|
76
|
+
margin: 0,
|
|
74
77
|
marginLeft: 0,
|
|
75
78
|
marginRight: 0,
|
|
76
79
|
marginTop: 0,
|
|
@@ -84,16 +87,17 @@ const foldsPreset = {
|
|
|
84
87
|
fit: "cover",
|
|
85
88
|
speed: 0,
|
|
86
89
|
frame: 0,
|
|
87
|
-
|
|
90
|
+
size: 0.25,
|
|
88
91
|
angle: 0,
|
|
89
92
|
distortionShape: "cascade",
|
|
90
93
|
shape: "lines",
|
|
91
94
|
distortion: 0.75,
|
|
92
95
|
shift: 0,
|
|
93
96
|
blur: 0,
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
+
edges: 0,
|
|
98
|
+
margin: 0.2,
|
|
99
|
+
marginLeft: 0.2,
|
|
100
|
+
marginRight: 0.2,
|
|
97
101
|
marginTop: 0.2,
|
|
98
102
|
marginBottom: 0.2
|
|
99
103
|
}
|
|
@@ -103,19 +107,22 @@ const FlutedGlass = memo(function FlutedGlassImpl({
|
|
|
103
107
|
// Own props
|
|
104
108
|
speed = defaultPreset.params.speed,
|
|
105
109
|
frame = defaultPreset.params.frame,
|
|
106
|
-
image = "
|
|
107
|
-
count = defaultPreset.params.count,
|
|
110
|
+
image = "",
|
|
108
111
|
angle = defaultPreset.params.angle,
|
|
109
112
|
distortion = defaultPreset.params.distortion,
|
|
110
113
|
distortionShape = defaultPreset.params.distortionShape,
|
|
111
114
|
shape = defaultPreset.params.shape,
|
|
112
115
|
shift = defaultPreset.params.shift,
|
|
113
116
|
blur = defaultPreset.params.blur,
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
margin,
|
|
118
|
+
marginLeft = margin ?? defaultPreset.params.marginLeft,
|
|
119
|
+
marginRight = margin ?? defaultPreset.params.marginRight,
|
|
120
|
+
marginTop = margin ?? defaultPreset.params.marginTop,
|
|
121
|
+
marginBottom = margin ?? defaultPreset.params.marginBottom,
|
|
122
|
+
edges = defaultPreset.params.edges,
|
|
123
|
+
// integer `count` was deprecated in favor of the normalized `size` param
|
|
124
|
+
count,
|
|
125
|
+
size = count === void 0 ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,
|
|
119
126
|
// Sizing props
|
|
120
127
|
fit = defaultPreset.params.fit,
|
|
121
128
|
scale = defaultPreset.params.scale,
|
|
@@ -131,12 +138,12 @@ const FlutedGlass = memo(function FlutedGlassImpl({
|
|
|
131
138
|
const uniforms = {
|
|
132
139
|
// Own uniforms
|
|
133
140
|
u_image: image,
|
|
134
|
-
|
|
141
|
+
u_size: size,
|
|
135
142
|
u_angle: angle,
|
|
136
143
|
u_distortion: distortion,
|
|
137
144
|
u_shift: shift,
|
|
138
145
|
u_blur: blur,
|
|
139
|
-
|
|
146
|
+
u_edges: edges,
|
|
140
147
|
u_distortionShape: GlassDistortionShapes[distortionShape],
|
|
141
148
|
u_shape: GlassGridShapes[shape],
|
|
142
149
|
u_marginLeft: marginLeft,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/fluted-glass.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n flutedGlassFragmentShader,\n ShaderFitOptions,\n type FlutedGlassUniforms,\n type FlutedGlassParams,\n defaultObjectSizing,\n GlassDistortionShapes,\n GlassGridShapes,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {}\n\ntype FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;\n\nexport const defaultPreset: FlutedGlassPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n flutedGlassFragmentShader,\n ShaderFitOptions,\n type FlutedGlassUniforms,\n type FlutedGlassParams,\n defaultObjectSizing,\n GlassDistortionShapes,\n GlassGridShapes,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {\n /** @deprecated use `size` instead */\n count?: number;\n}\n\ntype FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;\n\nexport const defaultPreset: FlutedGlassPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n size: 0.15,\n angle: 0,\n distortionShape: 'lens',\n shape: 'lines',\n distortion: 0.5,\n shift: 0,\n blur: 3,\n edges: 0,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n },\n};\n\nexport const wavesPreset: FlutedGlassPreset = {\n name: 'Waves',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n size: 0.3,\n angle: 0,\n distortionShape: 'contour',\n shape: 'wave',\n distortion: 0.3,\n shift: 0,\n blur: 0,\n edges: 0,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n },\n};\n\nexport const irregularPreset: FlutedGlassPreset = {\n name: 'Irregular lines',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n scale: 4,\n speed: 0,\n frame: 0,\n size: 0.3,\n angle: 150,\n distortionShape: 'facete',\n shape: 'linesIrregular',\n distortion: 1,\n shift: 0,\n blur: 25,\n edges: 1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n },\n};\n\nexport const foldsPreset: FlutedGlassPreset = {\n name: 'Folds',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n size: 0.25,\n angle: 0,\n distortionShape: 'cascade',\n shape: 'lines',\n distortion: 0.75,\n shift: 0,\n blur: 0,\n edges: 0,\n margin: 0.2,\n marginLeft: 0.2,\n marginRight: 0.2,\n marginTop: 0.2,\n marginBottom: 0.2,\n },\n};\n\nexport const flutedGlassPresets: FlutedGlassPreset[] = [defaultPreset, irregularPreset, wavesPreset, foldsPreset];\n\nexport const FlutedGlass: React.FC<FlutedGlassProps> = memo(function FlutedGlassImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '',\n angle = defaultPreset.params.angle,\n distortion = defaultPreset.params.distortion,\n distortionShape = defaultPreset.params.distortionShape,\n shape = defaultPreset.params.shape,\n shift = defaultPreset.params.shift,\n blur = defaultPreset.params.blur,\n margin,\n marginLeft = margin ?? defaultPreset.params.marginLeft,\n marginRight = margin ?? defaultPreset.params.marginRight,\n marginTop = margin ?? defaultPreset.params.marginTop,\n marginBottom = margin ?? defaultPreset.params.marginBottom,\n edges = defaultPreset.params.edges,\n\n // integer `count` was deprecated in favor of the normalized `size` param\n count,\n size = count === undefined ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: FlutedGlassProps) {\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_size: size,\n u_angle: angle,\n u_distortion: distortion,\n u_shift: shift,\n u_blur: blur,\n u_edges: edges,\n u_distortionShape: GlassDistortionShapes[distortionShape],\n u_shape: GlassGridShapes[shape],\n u_marginLeft: marginLeft,\n u_marginRight: marginRight,\n u_marginTop: marginTop,\n u_marginBottom: marginBottom,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies FlutedGlassUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={flutedGlassFragmentShader}\n uniforms={uniforms}\n />\n );\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/shaders/heatmap.js
CHANGED
|
@@ -14,6 +14,7 @@ import {
|
|
|
14
14
|
} from "@paper-design/shaders";
|
|
15
15
|
import { transparentPixel } from "../transparent-pixel.js";
|
|
16
16
|
import { suspend } from "../suspend.js";
|
|
17
|
+
import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
17
18
|
import { jsx } from "react/jsx-runtime";
|
|
18
19
|
const defaultPreset = {
|
|
19
20
|
name: "Default",
|
|
@@ -52,7 +53,7 @@ const Heatmap = memo(function HeatmapImpl({
|
|
|
52
53
|
// Own props
|
|
53
54
|
speed = defaultPreset.params.speed,
|
|
54
55
|
frame = defaultPreset.params.frame,
|
|
55
|
-
image = "
|
|
56
|
+
image = "",
|
|
56
57
|
contour = defaultPreset.params.contour,
|
|
57
58
|
angle = defaultPreset.params.angle,
|
|
58
59
|
noise = defaultPreset.params.noise,
|
|
@@ -76,7 +77,7 @@ const Heatmap = memo(function HeatmapImpl({
|
|
|
76
77
|
const imageUrl = typeof image === "string" ? image : image.src;
|
|
77
78
|
const [processedStateImage, setProcessedStateImage] = useState(transparentPixel);
|
|
78
79
|
let processedImage;
|
|
79
|
-
if (suspendWhenProcessingImage) {
|
|
80
|
+
if (suspendWhenProcessingImage && typeof window !== "undefined") {
|
|
80
81
|
processedImage = suspend(
|
|
81
82
|
() => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),
|
|
82
83
|
[imageUrl]
|
|
@@ -151,7 +152,7 @@ const Heatmap = memo(function HeatmapImpl({
|
|
|
151
152
|
]
|
|
152
153
|
);
|
|
153
154
|
return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: heatmapFragmentShader, uniforms });
|
|
154
|
-
});
|
|
155
|
+
}, colorPropsAreEqual);
|
|
155
156
|
export {
|
|
156
157
|
Heatmap,
|
|
157
158
|
defaultPreset,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/heatmap.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { memo, useLayoutEffect, useMemo, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n heatmapFragmentShader,\n ShaderFitOptions,\n type HeatmapUniforms,\n type HeatmapParams,\n defaultObjectSizing,\n toProcessedHeatmap,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\n\nexport interface HeatmapProps extends ShaderComponentProps, HeatmapParams {\n /**\n * Suspends the component when the image is being processed.\n */\n suspendWhenProcessingImage?: boolean;\n}\n\nexport type HeatmapPreset = ImageShaderPreset<HeatmapParams>;\n\nexport const defaultPreset: HeatmapPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 1,\n frame: 0,\n contour: 0.5,\n angle: 0,\n noise: 0,\n innerGlow: 0.5,\n outerGlow: 0.5,\n colorBack: '#000000',\n colors: ['#11206a', '#1f3ba2', '#2f63e7', '#6bd7ff', '#ffe679', '#ff991e', '#ff4c00'],\n },\n} as const satisfies HeatmapPreset;\n\nexport const sepiaPreset: HeatmapPreset = {\n name: 'Sepia',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 0.5,\n frame: 0,\n contour: 0.5,\n angle: 0,\n noise: 0.75,\n innerGlow: 0.5,\n outerGlow: 0.5,\n colorBack: '#000000',\n colors: ['#997F45', '#ffffff'],\n },\n} as const satisfies HeatmapPreset;\n\nexport const heatmapPresets: HeatmapPreset[] = [defaultPreset, sepiaPreset];\n\nexport const Heatmap: React.FC<HeatmapProps> = memo(function HeatmapImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '
|
|
5
|
-
"mappings": ";;;;;AAAA,OAAO,SAAS,MAAM,iBAAiB,SAAS,gBAAgB;AAChE,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,wBAAwB;AACjC,SAAS,eAAe;
|
|
4
|
+
"sourcesContent": ["import React, { memo, useLayoutEffect, useMemo, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n heatmapFragmentShader,\n ShaderFitOptions,\n type HeatmapUniforms,\n type HeatmapParams,\n defaultObjectSizing,\n toProcessedHeatmap,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\n\nexport interface HeatmapProps extends ShaderComponentProps, HeatmapParams {\n /**\n * Suspends the component when the image is being processed.\n */\n suspendWhenProcessingImage?: boolean;\n}\n\nexport type HeatmapPreset = ImageShaderPreset<HeatmapParams>;\n\nexport const defaultPreset: HeatmapPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 1,\n frame: 0,\n contour: 0.5,\n angle: 0,\n noise: 0,\n innerGlow: 0.5,\n outerGlow: 0.5,\n colorBack: '#000000',\n colors: ['#11206a', '#1f3ba2', '#2f63e7', '#6bd7ff', '#ffe679', '#ff991e', '#ff4c00'],\n },\n} as const satisfies HeatmapPreset;\n\nexport const sepiaPreset: HeatmapPreset = {\n name: 'Sepia',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 0.5,\n frame: 0,\n contour: 0.5,\n angle: 0,\n noise: 0.75,\n innerGlow: 0.5,\n outerGlow: 0.5,\n colorBack: '#000000',\n colors: ['#997F45', '#ffffff'],\n },\n} as const satisfies HeatmapPreset;\n\nexport const heatmapPresets: HeatmapPreset[] = [defaultPreset, sepiaPreset];\n\nexport const Heatmap: React.FC<HeatmapProps> = memo(function HeatmapImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '',\n contour = defaultPreset.params.contour,\n angle = defaultPreset.params.angle,\n noise = defaultPreset.params.noise,\n innerGlow = defaultPreset.params.innerGlow,\n outerGlow = defaultPreset.params.outerGlow,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n suspendWhenProcessingImage = false,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n worldHeight = defaultPreset.params.worldHeight,\n worldWidth = defaultPreset.params.worldWidth,\n ...props\n}: HeatmapProps) {\n const imageUrl = typeof image === 'string' ? image : image.src;\n const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);\n\n let processedImage: string;\n\n // toProcessedHeatmap expects the document object to exist. This prevents SSR issues during builds.\n if (suspendWhenProcessingImage && typeof window !== 'undefined') {\n processedImage = suspend(\n (): Promise<string> => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),\n [imageUrl]\n );\n } else {\n processedImage = processedStateImage;\n }\n\n useLayoutEffect(() => {\n if (suspendWhenProcessingImage) {\n // Skip doing work in the effect as it's been handled by suspense.\n return;\n }\n\n if (!imageUrl) {\n setProcessedStateImage(transparentPixel);\n return;\n }\n\n let url: string;\n let current = true;\n\n toProcessedHeatmap(imageUrl).then((result) => {\n if (current) {\n url = URL.createObjectURL(result.blob);\n setProcessedStateImage(url);\n }\n });\n\n return () => {\n current = false;\n URL.revokeObjectURL(url);\n };\n }, [imageUrl, suspendWhenProcessingImage]);\n\n const uniforms = useMemo(\n () => ({\n // Own uniforms\n u_image: processedImage,\n u_contour: contour,\n u_angle: angle,\n u_noise: noise,\n u_innerGlow: innerGlow,\n u_outerGlow: outerGlow,\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_rotation: rotation,\n u_scale: scale,\n u_worldHeight: worldHeight,\n u_worldWidth: worldWidth,\n }),\n [\n speed,\n frame,\n contour,\n angle,\n noise,\n innerGlow,\n outerGlow,\n colors,\n colorBack,\n processedImage,\n fit,\n offsetX,\n offsetY,\n originX,\n originY,\n rotation,\n scale,\n worldHeight,\n worldWidth,\n ]\n ) satisfies HeatmapUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={heatmapFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type ImageDitheringParams, type ImageShaderPreset } from '@paper-design/shaders';
|
|
3
3
|
export interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {
|
|
4
|
+
/** @deprecated use `size` instead */
|
|
5
|
+
pxSize?: number;
|
|
4
6
|
}
|
|
5
7
|
type ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;
|
|
6
8
|
export declare const defaultPreset: ImageDitheringPreset;
|
|
@@ -26,7 +26,7 @@ const defaultPreset = {
|
|
|
26
26
|
colorBack: "#000c38",
|
|
27
27
|
colorHighlight: "#eaff94",
|
|
28
28
|
type: "8x8",
|
|
29
|
-
|
|
29
|
+
size: 2,
|
|
30
30
|
colorSteps: 2,
|
|
31
31
|
originalColors: false
|
|
32
32
|
}
|
|
@@ -41,7 +41,7 @@ const retroPreset = {
|
|
|
41
41
|
colorBack: "#5452ff",
|
|
42
42
|
colorHighlight: "#eeeeee",
|
|
43
43
|
type: "2x2",
|
|
44
|
-
|
|
44
|
+
size: 3,
|
|
45
45
|
colorSteps: 1,
|
|
46
46
|
originalColors: true
|
|
47
47
|
}
|
|
@@ -56,7 +56,7 @@ const noisePreset = {
|
|
|
56
56
|
colorBack: "#000000",
|
|
57
57
|
colorHighlight: "#ededed",
|
|
58
58
|
type: "random",
|
|
59
|
-
|
|
59
|
+
size: 1,
|
|
60
60
|
colorSteps: 1,
|
|
61
61
|
originalColors: false
|
|
62
62
|
}
|
|
@@ -71,7 +71,7 @@ const naturalPreset = {
|
|
|
71
71
|
colorBack: "#000000",
|
|
72
72
|
colorHighlight: "#ffffff",
|
|
73
73
|
type: "8x8",
|
|
74
|
-
|
|
74
|
+
size: 2,
|
|
75
75
|
colorSteps: 5,
|
|
76
76
|
originalColors: true
|
|
77
77
|
}
|
|
@@ -84,11 +84,12 @@ const ImageDithering = memo(function ImageDitheringImpl({
|
|
|
84
84
|
colorFront = defaultPreset.params.colorFront,
|
|
85
85
|
colorBack = defaultPreset.params.colorBack,
|
|
86
86
|
colorHighlight = defaultPreset.params.colorHighlight,
|
|
87
|
-
image = "
|
|
87
|
+
image = "",
|
|
88
88
|
type = defaultPreset.params.type,
|
|
89
|
-
pxSize = defaultPreset.params.pxSize,
|
|
90
89
|
colorSteps = defaultPreset.params.colorSteps,
|
|
91
90
|
originalColors = defaultPreset.params.originalColors,
|
|
91
|
+
pxSize,
|
|
92
|
+
size = pxSize === void 0 ? defaultPreset.params.size : pxSize,
|
|
92
93
|
// Sizing props
|
|
93
94
|
fit = defaultPreset.params.fit,
|
|
94
95
|
scale = defaultPreset.params.scale,
|
|
@@ -108,7 +109,7 @@ const ImageDithering = memo(function ImageDitheringImpl({
|
|
|
108
109
|
u_colorBack: getShaderColorFromString(colorBack),
|
|
109
110
|
u_colorHighlight: getShaderColorFromString(colorHighlight),
|
|
110
111
|
u_type: DitheringTypes[type],
|
|
111
|
-
u_pxSize:
|
|
112
|
+
u_pxSize: size,
|
|
112
113
|
u_colorSteps: colorSteps,
|
|
113
114
|
u_originalColors: originalColors,
|
|
114
115
|
// Sizing uniforms
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/image-dithering.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n imageDitheringFragmentShader,\n getShaderColorFromString,\n ShaderFitOptions,\n type ImageDitheringUniforms,\n type ImageDitheringParams,\n defaultObjectSizing,\n DitheringTypes,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {}\n\ntype ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;\n\nexport const defaultPreset: ImageDitheringPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n // scale: 0.95,\n speed: 0,\n frame: 0,\n colorFront: '#94ffaf',\n colorBack: '#000c38',\n colorHighlight: '#eaff94',\n type: '8x8',\n
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OAEK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n imageDitheringFragmentShader,\n getShaderColorFromString,\n ShaderFitOptions,\n type ImageDitheringUniforms,\n type ImageDitheringParams,\n defaultObjectSizing,\n DitheringTypes,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {\n /** @deprecated use `size` instead */\n pxSize?: number;\n}\n\ntype ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;\n\nexport const defaultPreset: ImageDitheringPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n // scale: 0.95,\n speed: 0,\n frame: 0,\n colorFront: '#94ffaf',\n colorBack: '#000c38',\n colorHighlight: '#eaff94',\n type: '8x8',\n size: 2,\n colorSteps: 2,\n originalColors: false,\n },\n} as const;\n\nexport const retroPreset: ImageDitheringPreset = {\n name: 'Retro',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n colorFront: '#eeeeee',\n colorBack: '#5452ff',\n colorHighlight: '#eeeeee',\n type: '2x2',\n size: 3,\n colorSteps: 1,\n originalColors: true,\n },\n} as const;\n\nexport const noisePreset: ImageDitheringPreset = {\n name: 'Noise',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n colorFront: '#a2997c',\n colorBack: '#000000',\n colorHighlight: '#ededed',\n type: 'random',\n size: 1,\n colorSteps: 1,\n originalColors: false,\n },\n} as const;\n\nexport const naturalPreset: ImageDitheringPreset = {\n name: 'Natural',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n colorFront: '#ffffff',\n colorBack: '#000000',\n colorHighlight: '#ffffff',\n type: '8x8',\n size: 2,\n colorSteps: 5,\n originalColors: true,\n },\n} as const;\n\nexport const imageDitheringPresets: ImageDitheringPreset[] = [defaultPreset, noisePreset, retroPreset, naturalPreset];\n\nexport const ImageDithering: React.FC<ImageDitheringProps> = memo(function ImageDitheringImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorBack = defaultPreset.params.colorBack,\n colorHighlight = defaultPreset.params.colorHighlight,\n image = '',\n type = defaultPreset.params.type,\n colorSteps = defaultPreset.params.colorSteps,\n originalColors = defaultPreset.params.originalColors,\n pxSize,\n size = pxSize === undefined ? defaultPreset.params.size : pxSize,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: ImageDitheringProps) {\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_colorFront: getShaderColorFromString(colorFront),\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorHighlight: getShaderColorFromString(colorHighlight),\n u_type: DitheringTypes[type],\n u_pxSize: size,\n u_colorSteps: colorSteps,\n u_originalColors: originalColors,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_rotation: rotation,\n u_scale: scale,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies ImageDitheringUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={imageDitheringFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OAEK;AA+HH;AAtHG,MAAM,gBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA;AAAA,IAEL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF;AAEO,MAAM,cAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF;AAEO,MAAM,cAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF;AAEO,MAAM,gBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF;AAEO,MAAM,wBAAgD,CAAC,eAAe,aAAa,aAAa,aAAa;AAE7G,MAAM,iBAAgD,KAAK,SAAS,mBAAmB;AAAA;AAAA,EAE5F,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,aAAa,cAAc,OAAO;AAAA,EAClC,YAAY,cAAc,OAAO;AAAA,EACjC,iBAAiB,cAAc,OAAO;AAAA,EACtC,QAAQ;AAAA,EACR,OAAO,cAAc,OAAO;AAAA,EAC5B,aAAa,cAAc,OAAO;AAAA,EAClC,iBAAiB,cAAc,OAAO;AAAA,EACtC;AAAA,EACA,OAAO,WAAW,SAAY,cAAc,OAAO,OAAO;AAAA;AAAA,EAG1D,MAAM,cAAc,OAAO;AAAA,EAC3B,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAwB;AACtB,QAAM,WAAW;AAAA;AAAA,IAEf,SAAS;AAAA,IACT,cAAc,yBAAyB,UAAU;AAAA,IACjD,aAAa,yBAAyB,SAAS;AAAA,IAC/C,kBAAkB,yBAAyB,cAAc;AAAA,IACzD,QAAQ,eAAe,IAAI;AAAA,IAC3B,UAAU;AAAA,IACV,cAAc;AAAA,IACd,kBAAkB;AAAA;AAAA,IAGlB,OAAO,iBAAiB,GAAG;AAAA,IAC3B,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -21,7 +21,9 @@ const defaultPreset = {
|
|
|
21
21
|
frame: 0,
|
|
22
22
|
colors: ["#e0eaff", "#241d9a", "#f75092", "#9f50d3"],
|
|
23
23
|
distortion: 0.8,
|
|
24
|
-
swirl: 0.1
|
|
24
|
+
swirl: 0.1,
|
|
25
|
+
grainMixer: 0,
|
|
26
|
+
grainOverlay: 0
|
|
25
27
|
}
|
|
26
28
|
};
|
|
27
29
|
const purplePreset = {
|
|
@@ -32,7 +34,9 @@ const purplePreset = {
|
|
|
32
34
|
frame: 0,
|
|
33
35
|
colors: ["#aaa7d7", "#3c2b8e"],
|
|
34
36
|
distortion: 1,
|
|
35
|
-
swirl: 1
|
|
37
|
+
swirl: 1,
|
|
38
|
+
grainMixer: 0,
|
|
39
|
+
grainOverlay: 0
|
|
36
40
|
}
|
|
37
41
|
};
|
|
38
42
|
const beachPreset = {
|
|
@@ -43,7 +47,9 @@ const beachPreset = {
|
|
|
43
47
|
frame: 0,
|
|
44
48
|
colors: ["#bcecf6", "#00aaff", "#00f7ff", "#ffd447"],
|
|
45
49
|
distortion: 0.8,
|
|
46
|
-
swirl: 0.35
|
|
50
|
+
swirl: 0.35,
|
|
51
|
+
grainMixer: 0,
|
|
52
|
+
grainOverlay: 0
|
|
47
53
|
}
|
|
48
54
|
};
|
|
49
55
|
const inkPreset = {
|
|
@@ -55,7 +61,9 @@ const inkPreset = {
|
|
|
55
61
|
colors: ["#ffffff", "#000000"],
|
|
56
62
|
distortion: 1,
|
|
57
63
|
swirl: 0.2,
|
|
58
|
-
rotation: 90
|
|
64
|
+
rotation: 90,
|
|
65
|
+
grainMixer: 0,
|
|
66
|
+
grainOverlay: 0
|
|
59
67
|
}
|
|
60
68
|
};
|
|
61
69
|
const meshGradientPresets = [defaultPreset, inkPreset, purplePreset, beachPreset];
|
|
@@ -66,6 +74,8 @@ const MeshGradient = memo(function MeshGradientImpl({
|
|
|
66
74
|
colors = defaultPreset.params.colors,
|
|
67
75
|
distortion = defaultPreset.params.distortion,
|
|
68
76
|
swirl = defaultPreset.params.swirl,
|
|
77
|
+
grainMixer = defaultPreset.params.grainMixer,
|
|
78
|
+
grainOverlay = defaultPreset.params.grainOverlay,
|
|
69
79
|
// Sizing props
|
|
70
80
|
fit = defaultPreset.params.fit,
|
|
71
81
|
rotation = defaultPreset.params.rotation,
|
|
@@ -84,6 +94,8 @@ const MeshGradient = memo(function MeshGradientImpl({
|
|
|
84
94
|
u_colorsCount: colors.length,
|
|
85
95
|
u_distortion: distortion,
|
|
86
96
|
u_swirl: swirl,
|
|
97
|
+
u_grainMixer: grainMixer,
|
|
98
|
+
u_grainOverlay: grainOverlay,
|
|
87
99
|
// Sizing uniforms
|
|
88
100
|
u_fit: ShaderFitOptions[fit],
|
|
89
101
|
u_rotation: rotation,
|