@paper-design/shaders-react 0.0.69 → 0.0.71
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/set-min-image-size.d.ts +5 -0
- package/dist/set-min-image-size.js +19 -0
- package/dist/set-min-image-size.js.map +7 -0
- package/dist/shader-mount.js +5 -0
- package/dist/shader-mount.js.map +2 -2
- package/dist/shaders/halftone-cmyk.d.ts +1 -1
- package/dist/shaders/halftone-cmyk.js +22 -27
- package/dist/shaders/halftone-cmyk.js.map +2 -2
- package/dist/shaders/image-dithering.js +10 -4
- package/dist/shaders/image-dithering.js.map +2 -2
- package/package.json +2 -2
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
function setMinImageSize(img) {
|
|
7
|
+
if (img.naturalWidth < 1024 && img.naturalHeight < 1024) {
|
|
8
|
+
if (img.naturalWidth < 1 || img.naturalHeight < 1) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
const aspect = img.naturalWidth / img.naturalHeight;
|
|
12
|
+
img.width = Math.round(aspect > 1 ? 1024 * aspect : 1024);
|
|
13
|
+
img.height = Math.round(aspect > 1 ? 1024 : 1024 / aspect);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
export {
|
|
17
|
+
setMinImageSize
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=set-min-image-size.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/set-min-image-size.tsx"],
|
|
4
|
+
"sourcesContent": ["/**\n * Resize the image to at least 1024px on the shorter side.\n * Makes sure that vector images are converted to bitmaps at an acceptable resolution.\n */\nexport function setMinImageSize(img: HTMLImageElement): void {\n if (img.naturalWidth < 1024 && img.naturalHeight < 1024) {\n if (img.naturalWidth < 1 || img.naturalHeight < 1) {\n // Skip weird sizes\n return;\n }\n\n const aspect = img.naturalWidth / img.naturalHeight;\n img.width = Math.round(aspect > 1 ? 1024 * aspect : 1024);\n img.height = Math.round(aspect > 1 ? 1024 : 1024 / aspect);\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;AAIO,SAAS,gBAAgB,KAA6B;AAC3D,MAAI,IAAI,eAAe,QAAQ,IAAI,gBAAgB,MAAM;AACvD,QAAI,IAAI,eAAe,KAAK,IAAI,gBAAgB,GAAG;AAEjD;AAAA,IACF;AAEA,UAAM,SAAS,IAAI,eAAe,IAAI;AACtC,QAAI,QAAQ,KAAK,MAAM,SAAS,IAAI,OAAO,SAAS,IAAI;AACxD,QAAI,SAAS,KAAK,MAAM,SAAS,IAAI,OAAO,OAAO,MAAM;AAAA,EAC3D;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/shader-mount.js
CHANGED
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
getEmptyPixel
|
|
11
11
|
} from "@paper-design/shaders";
|
|
12
12
|
import { useMergeRefs } from "./use-merge-refs.js";
|
|
13
|
+
import { setMinImageSize } from "./set-min-image-size.js";
|
|
13
14
|
import { jsx } from "react/jsx-runtime";
|
|
14
15
|
async function processUniforms(uniformsProp) {
|
|
15
16
|
const processedUniforms = {};
|
|
@@ -48,6 +49,7 @@ async function processUniforms(uniformsProp) {
|
|
|
48
49
|
img.crossOrigin = "anonymous";
|
|
49
50
|
}
|
|
50
51
|
img.onload = () => {
|
|
52
|
+
setMinImageSize(img);
|
|
51
53
|
processedUniforms[key] = img;
|
|
52
54
|
resolve();
|
|
53
55
|
};
|
|
@@ -58,6 +60,9 @@ async function processUniforms(uniformsProp) {
|
|
|
58
60
|
img.src = value;
|
|
59
61
|
});
|
|
60
62
|
imageLoadPromises.push(imagePromise);
|
|
63
|
+
} else if (value instanceof HTMLImageElement) {
|
|
64
|
+
setMinImageSize(value);
|
|
65
|
+
processedUniforms[key] = value;
|
|
61
66
|
} else {
|
|
62
67
|
processedUniforms[key] = value;
|
|
63
68
|
}
|
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 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 mipmaps?: string[];\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 mipmaps,\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 const webGlContextAttributesRef = useRef(webGlContextAttributes);\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 webGlContextAttributesRef.current,\n speed,\n frame,\n minPixelRatio,\n maxPixelCount,\n mipmaps\n );\n\n setIsInitialized(true);\n }\n };\n\n initShader();\n\n return () => {\n shaderMountRef.current?.dispose();\n shaderMountRef.current = null;\n };\n }, [fragmentShader]);\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={\n width !== undefined || height !== undefined\n ? {\n width: typeof width === 'string' && isNaN(+width) === false ? +width : width,\n height: typeof height === 'string' && isNaN(+height) === false ? +height : height,\n ...style,\n }\n : style\n }\n {...divProps}\n />\n );\n }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
|
|
5
|
-
"mappings": ";;;;;;AAEA,SAAS,WAAW,QAAQ,YAAY,gBAAgB;AACxD;AAAA,EACE,eAAe;AAAA,EACf;AAAA,OAIK;AACP,SAAS,oBAAoB;
|
|
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';\nimport { setMinImageSize } from './set-min-image-size.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 mipmaps?: string[];\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 setMinImageSize(img);\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\n imageLoadPromises.push(imagePromise);\n } else if (value instanceof HTMLImageElement) {\n setMinImageSize(value);\n processedUniforms[key] = value;\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 mipmaps,\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 const webGlContextAttributesRef = useRef(webGlContextAttributes);\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 webGlContextAttributesRef.current,\n speed,\n frame,\n minPixelRatio,\n maxPixelCount,\n mipmaps\n );\n\n setIsInitialized(true);\n }\n };\n\n initShader();\n\n return () => {\n shaderMountRef.current?.dispose();\n shaderMountRef.current = null;\n };\n }, [fragmentShader]);\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={\n width !== undefined || height !== undefined\n ? {\n width: typeof width === 'string' && isNaN(+width) === false ? +width : width,\n height: typeof height === 'string' && isNaN(+height) === false ? +height : height,\n ...style,\n }\n : style\n }\n {...divProps}\n />\n );\n }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,7 @@ export interface HalftoneCmykProps extends ShaderComponentProps, HalftoneCmykPar
|
|
|
5
5
|
type HalftoneCmykPreset = ImageShaderPreset<HalftoneCmykParams>;
|
|
6
6
|
export declare const defaultPreset: HalftoneCmykPreset;
|
|
7
7
|
export declare const dropsPreset: HalftoneCmykPreset;
|
|
8
|
-
export declare const
|
|
8
|
+
export declare const newspaper: HalftoneCmykPreset;
|
|
9
9
|
export declare const vintagePreset: HalftoneCmykPreset;
|
|
10
10
|
export declare const halftoneCmykPresets: HalftoneCmykPreset[];
|
|
11
11
|
export declare const HalftoneCmyk: React.FC<HalftoneCmykProps>;
|
|
@@ -28,9 +28,9 @@ const defaultPreset = {
|
|
|
28
28
|
colorM: "#fc519f",
|
|
29
29
|
colorY: "#ffd800",
|
|
30
30
|
colorK: "#231f20",
|
|
31
|
-
size: 0.
|
|
31
|
+
size: 0.2,
|
|
32
32
|
contrast: 1,
|
|
33
|
-
softness:
|
|
33
|
+
softness: 1,
|
|
34
34
|
grainSize: 0.5,
|
|
35
35
|
grainMixer: 0,
|
|
36
36
|
grainOverlay: 0,
|
|
@@ -62,9 +62,9 @@ const dropsPreset = {
|
|
|
62
62
|
size: 0.88,
|
|
63
63
|
contrast: 1.15,
|
|
64
64
|
softness: 0,
|
|
65
|
-
grainSize: 0.
|
|
66
|
-
grainMixer: 0,
|
|
67
|
-
grainOverlay: 0,
|
|
65
|
+
grainSize: 0.01,
|
|
66
|
+
grainMixer: 0.05,
|
|
67
|
+
grainOverlay: 0.25,
|
|
68
68
|
gridNoise: 0.5,
|
|
69
69
|
floodC: 0.15,
|
|
70
70
|
floodM: 0,
|
|
@@ -77,26 +77,26 @@ const dropsPreset = {
|
|
|
77
77
|
type: "ink"
|
|
78
78
|
}
|
|
79
79
|
};
|
|
80
|
-
const
|
|
81
|
-
name: "
|
|
80
|
+
const newspaper = {
|
|
81
|
+
name: "Newspaper",
|
|
82
82
|
params: {
|
|
83
83
|
...defaultObjectSizing,
|
|
84
84
|
scale: 1,
|
|
85
85
|
fit: "cover",
|
|
86
86
|
speed: 0,
|
|
87
87
|
frame: 0,
|
|
88
|
-
colorBack: "#
|
|
89
|
-
colorC: "#
|
|
90
|
-
colorM: "#
|
|
91
|
-
colorY: "#
|
|
92
|
-
colorK: "#
|
|
93
|
-
size: 0.
|
|
88
|
+
colorBack: "#f2f1e8",
|
|
89
|
+
colorC: "#7a7a75",
|
|
90
|
+
colorM: "#7a7a75",
|
|
91
|
+
colorY: "#7a7a75",
|
|
92
|
+
colorK: "#231f20",
|
|
93
|
+
size: 0.01,
|
|
94
94
|
contrast: 2,
|
|
95
|
-
softness: 0,
|
|
96
|
-
grainSize: 0
|
|
95
|
+
softness: 0.2,
|
|
96
|
+
grainSize: 0,
|
|
97
97
|
grainMixer: 0,
|
|
98
98
|
grainOverlay: 0.2,
|
|
99
|
-
gridNoise: 0,
|
|
99
|
+
gridNoise: 0.6,
|
|
100
100
|
floodC: 0,
|
|
101
101
|
floodM: 0,
|
|
102
102
|
floodY: 0,
|
|
@@ -121,13 +121,13 @@ const vintagePreset = {
|
|
|
121
121
|
colorM: "#d8697c",
|
|
122
122
|
colorY: "#fad85c",
|
|
123
123
|
colorK: "#2d2824",
|
|
124
|
-
size: 0.
|
|
125
|
-
contrast: 1,
|
|
126
|
-
softness: 0.
|
|
124
|
+
size: 0.2,
|
|
125
|
+
contrast: 1.25,
|
|
126
|
+
softness: 0.4,
|
|
127
127
|
grainSize: 0.5,
|
|
128
128
|
grainMixer: 0.15,
|
|
129
129
|
grainOverlay: 0.1,
|
|
130
|
-
gridNoise:
|
|
130
|
+
gridNoise: 0.45,
|
|
131
131
|
floodC: 0.15,
|
|
132
132
|
floodM: 0,
|
|
133
133
|
floodY: 0,
|
|
@@ -139,12 +139,7 @@ const vintagePreset = {
|
|
|
139
139
|
type: "sharp"
|
|
140
140
|
}
|
|
141
141
|
};
|
|
142
|
-
const halftoneCmykPresets = [
|
|
143
|
-
defaultPreset,
|
|
144
|
-
dropsPreset,
|
|
145
|
-
blackAndWhite,
|
|
146
|
-
vintagePreset
|
|
147
|
-
];
|
|
142
|
+
const halftoneCmykPresets = [defaultPreset, dropsPreset, newspaper, vintagePreset];
|
|
148
143
|
const HalftoneCmyk = memo(function HalftoneCmykImpl({
|
|
149
144
|
// Own props
|
|
150
145
|
speed = defaultPreset.params.speed,
|
|
@@ -232,10 +227,10 @@ const HalftoneCmyk = memo(function HalftoneCmykImpl({
|
|
|
232
227
|
}, colorPropsAreEqual);
|
|
233
228
|
export {
|
|
234
229
|
HalftoneCmyk,
|
|
235
|
-
blackAndWhite,
|
|
236
230
|
defaultPreset,
|
|
237
231
|
dropsPreset,
|
|
238
232
|
halftoneCmykPresets,
|
|
233
|
+
newspaper,
|
|
239
234
|
vintagePreset
|
|
240
235
|
};
|
|
241
236
|
//# sourceMappingURL=halftone-cmyk.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/halftone-cmyk.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 halftoneCmykFragmentShader,\n getShaderColorFromString,\n getShaderNoiseTexture,\n ShaderFitOptions,\n type HalftoneCmykUniforms,\n type HalftoneCmykParams,\n defaultObjectSizing,\n type ImageShaderPreset,\n HalftoneCmykTypes,\n} from '@paper-design/shaders';\n\nexport interface HalftoneCmykProps extends ShaderComponentProps, HalftoneCmykParams {}\n\ntype HalftoneCmykPreset = ImageShaderPreset<HalftoneCmykParams>;\n\nexport const defaultPreset: HalftoneCmykPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n fit: 'cover',\n speed: 0,\n frame: 0,\n colorBack: '#fbfaf5',\n colorC: '#00b4ff',\n colorM: '#fc519f',\n colorY: '#ffd800',\n colorK: '#231f20',\n size: 0.
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EAEA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n halftoneCmykFragmentShader,\n getShaderColorFromString,\n getShaderNoiseTexture,\n ShaderFitOptions,\n type HalftoneCmykUniforms,\n type HalftoneCmykParams,\n defaultObjectSizing,\n type ImageShaderPreset,\n HalftoneCmykTypes,\n} from '@paper-design/shaders';\n\nexport interface HalftoneCmykProps extends ShaderComponentProps, HalftoneCmykParams {}\n\ntype HalftoneCmykPreset = ImageShaderPreset<HalftoneCmykParams>;\n\nexport const defaultPreset: HalftoneCmykPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n fit: 'cover',\n speed: 0,\n frame: 0,\n colorBack: '#fbfaf5',\n colorC: '#00b4ff',\n colorM: '#fc519f',\n colorY: '#ffd800',\n colorK: '#231f20',\n size: 0.2,\n contrast: 1,\n softness: 1,\n grainSize: 0.5,\n grainMixer: 0,\n grainOverlay: 0,\n gridNoise: 0.2,\n floodC: 0.15,\n floodM: 0,\n floodY: 0,\n floodK: 0,\n gainC: 0.3,\n gainM: 0,\n gainY: 0.2,\n gainK: 0,\n type: 'ink',\n },\n};\n\nexport const dropsPreset: HalftoneCmykPreset = {\n name: 'Drops',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n fit: 'cover',\n speed: 0,\n frame: 0,\n colorBack: '#eeefd7',\n colorC: '#00b2ff',\n colorM: '#fc4f4f',\n colorY: '#ffd900',\n colorK: '#231f20',\n size: 0.88,\n contrast: 1.15,\n softness: 0,\n grainSize: 0.01,\n grainMixer: 0.05,\n grainOverlay: 0.25,\n gridNoise: 0.5,\n floodC: 0.15,\n floodM: 0,\n floodY: 0,\n floodK: 0,\n gainC: 1.0,\n gainM: 0.44,\n gainY: -1.0,\n gainK: 0,\n type: 'ink',\n },\n};\n\nexport const newspaper: HalftoneCmykPreset = {\n name: 'Newspaper',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n fit: 'cover',\n speed: 0,\n frame: 0,\n colorBack: '#f2f1e8',\n colorC: '#7a7a75',\n colorM: '#7a7a75',\n colorY: '#7a7a75',\n colorK: '#231f20',\n size: 0.01,\n contrast: 2,\n softness: 0.2,\n grainSize: 0,\n grainMixer: 0,\n grainOverlay: 0.2,\n gridNoise: 0.6,\n floodC: 0,\n floodM: 0,\n floodY: 0,\n floodK: 0.1,\n gainC: -0.17,\n gainM: -0.45,\n gainY: -0.45,\n gainK: 0,\n type: 'dots',\n },\n};\n\nexport const vintagePreset: HalftoneCmykPreset = {\n name: 'Vintage',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n fit: 'cover',\n speed: 0,\n frame: 0,\n colorBack: '#fffaf0',\n colorC: '#59afc5',\n colorM: '#d8697c',\n colorY: '#fad85c',\n colorK: '#2d2824',\n size: 0.2,\n contrast: 1.25,\n softness: 0.4,\n grainSize: 0.5,\n grainMixer: 0.15,\n grainOverlay: 0.1,\n gridNoise: 0.45,\n floodC: 0.15,\n floodM: 0,\n floodY: 0,\n floodK: 0,\n gainC: 0.3,\n gainM: 0,\n gainY: 0.2,\n gainK: 0,\n type: 'sharp',\n },\n};\n\nexport const halftoneCmykPresets: HalftoneCmykPreset[] = [defaultPreset, dropsPreset, newspaper, vintagePreset];\n\nexport const HalftoneCmyk: React.FC<HalftoneCmykProps> = memo(function HalftoneCmykImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colorC = defaultPreset.params.colorC,\n colorM = defaultPreset.params.colorM,\n colorY = defaultPreset.params.colorY,\n colorK = defaultPreset.params.colorK,\n image = '',\n size = defaultPreset.params.size,\n contrast = defaultPreset.params.contrast,\n softness = defaultPreset.params.softness,\n grainSize = defaultPreset.params.grainSize,\n grainMixer = defaultPreset.params.grainMixer,\n grainOverlay = defaultPreset.params.grainOverlay,\n gridNoise = defaultPreset.params.gridNoise,\n floodC = defaultPreset.params.floodC,\n floodM = defaultPreset.params.floodM,\n floodY = defaultPreset.params.floodY,\n floodK = defaultPreset.params.floodK,\n gainC = defaultPreset.params.gainC,\n gainM = defaultPreset.params.gainM,\n gainY = defaultPreset.params.gainY,\n gainK = defaultPreset.params.gainK,\n type = defaultPreset.params.type,\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}: HalftoneCmykProps) {\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_noiseTexture: getShaderNoiseTexture(),\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorC: getShaderColorFromString(colorC),\n u_colorM: getShaderColorFromString(colorM),\n u_colorY: getShaderColorFromString(colorY),\n u_colorK: getShaderColorFromString(colorK),\n u_size: size,\n u_contrast: contrast,\n u_softness: softness,\n u_grainSize: grainSize,\n u_grainMixer: grainMixer,\n u_grainOverlay: grainOverlay,\n u_gridNoise: gridNoise,\n u_floodC: floodC,\n u_floodM: floodM,\n u_floodY: floodY,\n u_floodK: floodK,\n u_gainC: gainC,\n u_gainM: gainM,\n u_gainY: gainY,\n u_gainK: gainK,\n u_type: HalftoneCmykTypes[type],\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 HalftoneCmykUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={halftoneCmykFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,7 +28,8 @@ const defaultPreset = {
|
|
|
28
28
|
type: "8x8",
|
|
29
29
|
size: 2,
|
|
30
30
|
colorSteps: 2,
|
|
31
|
-
originalColors: false
|
|
31
|
+
originalColors: false,
|
|
32
|
+
inverted: false
|
|
32
33
|
}
|
|
33
34
|
};
|
|
34
35
|
const retroPreset = {
|
|
@@ -44,7 +45,8 @@ const retroPreset = {
|
|
|
44
45
|
type: "2x2",
|
|
45
46
|
size: 3,
|
|
46
47
|
colorSteps: 1,
|
|
47
|
-
originalColors: true
|
|
48
|
+
originalColors: true,
|
|
49
|
+
inverted: false
|
|
48
50
|
}
|
|
49
51
|
};
|
|
50
52
|
const noisePreset = {
|
|
@@ -60,7 +62,8 @@ const noisePreset = {
|
|
|
60
62
|
type: "random",
|
|
61
63
|
size: 1,
|
|
62
64
|
colorSteps: 1,
|
|
63
|
-
originalColors: false
|
|
65
|
+
originalColors: false,
|
|
66
|
+
inverted: false
|
|
64
67
|
}
|
|
65
68
|
};
|
|
66
69
|
const naturalPreset = {
|
|
@@ -76,7 +79,8 @@ const naturalPreset = {
|
|
|
76
79
|
type: "8x8",
|
|
77
80
|
size: 2,
|
|
78
81
|
colorSteps: 5,
|
|
79
|
-
originalColors: true
|
|
82
|
+
originalColors: true,
|
|
83
|
+
inverted: false
|
|
80
84
|
}
|
|
81
85
|
};
|
|
82
86
|
const imageDitheringPresets = [defaultPreset, noisePreset, retroPreset, naturalPreset];
|
|
@@ -91,6 +95,7 @@ const ImageDithering = memo(function ImageDitheringImpl({
|
|
|
91
95
|
type = defaultPreset.params.type,
|
|
92
96
|
colorSteps = defaultPreset.params.colorSteps,
|
|
93
97
|
originalColors = defaultPreset.params.originalColors,
|
|
98
|
+
inverted = defaultPreset.params.inverted,
|
|
94
99
|
pxSize,
|
|
95
100
|
size = pxSize === void 0 ? defaultPreset.params.size : pxSize,
|
|
96
101
|
// Sizing props
|
|
@@ -115,6 +120,7 @@ const ImageDithering = memo(function ImageDitheringImpl({
|
|
|
115
120
|
u_pxSize: size,
|
|
116
121
|
u_colorSteps: colorSteps,
|
|
117
122
|
u_originalColors: originalColors,
|
|
123
|
+
u_inverted: inverted,
|
|
118
124
|
// Sizing uniforms
|
|
119
125
|
u_fit: ShaderFitOptions[fit],
|
|
120
126
|
u_rotation: rotation,
|
|
@@ -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 /** @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 fit: 'cover',\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 fit: 'cover',\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 fit: 'cover',\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;
|
|
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 inverted: false,\n },\n} as const;\n\nexport const retroPreset: ImageDitheringPreset = {\n name: 'Retro',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\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 inverted: false,\n },\n} as const;\n\nexport const noisePreset: ImageDitheringPreset = {\n name: 'Noise',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\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 inverted: false,\n },\n} as const;\n\nexport const naturalPreset: ImageDitheringPreset = {\n name: 'Natural',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\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 inverted: false,\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 inverted = defaultPreset.params.inverted,\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 u_inverted: inverted,\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paper-design/shaders-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.71",
|
|
4
4
|
"license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"type-check": "tsc --project tsconfig.json"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@paper-design/shaders": "0.0.
|
|
27
|
+
"@paper-design/shaders": "0.0.71"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "19.1.0"
|