@paper-design/shaders-react 0.0.58-next.4 → 0.0.58-next.6
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.
|
@@ -8,9 +8,9 @@ export interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParam
|
|
|
8
8
|
}
|
|
9
9
|
type LiquidMetalPreset = ImageShaderPreset<LiquidMetalParams>;
|
|
10
10
|
export declare const defaultPreset: LiquidMetalPreset;
|
|
11
|
-
export declare const
|
|
12
|
-
export declare const
|
|
13
|
-
export declare const
|
|
11
|
+
export declare const noirPreset: LiquidMetalPreset;
|
|
12
|
+
export declare const fullScreenPreset: LiquidMetalPreset;
|
|
13
|
+
export declare const stripesPreset: LiquidMetalPreset;
|
|
14
14
|
export declare const liquidMetalPresets: LiquidMetalPreset[];
|
|
15
15
|
export declare const LiquidMetal: React.FC<LiquidMetalProps>;
|
|
16
16
|
export {};
|
|
@@ -20,10 +20,10 @@ const defaultPreset = {
|
|
|
20
20
|
name: "Default",
|
|
21
21
|
params: {
|
|
22
22
|
...defaultObjectSizing,
|
|
23
|
-
scale:
|
|
23
|
+
scale: 0.6,
|
|
24
24
|
speed: 1,
|
|
25
25
|
frame: 0,
|
|
26
|
-
colorBack: "#
|
|
26
|
+
colorBack: "#AAAAAC",
|
|
27
27
|
colorTint: "#ffffff",
|
|
28
28
|
distortion: 0.07,
|
|
29
29
|
repetition: 2,
|
|
@@ -32,35 +32,36 @@ const defaultPreset = {
|
|
|
32
32
|
contour: 0.4,
|
|
33
33
|
softness: 0.1,
|
|
34
34
|
angle: 70,
|
|
35
|
-
shape: "
|
|
35
|
+
shape: "diamond"
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
|
-
const
|
|
39
|
-
name: "
|
|
38
|
+
const noirPreset = {
|
|
39
|
+
name: "Noir",
|
|
40
40
|
params: {
|
|
41
41
|
...defaultObjectSizing,
|
|
42
|
-
scale:
|
|
42
|
+
scale: 0.6,
|
|
43
43
|
speed: 1,
|
|
44
44
|
frame: 0,
|
|
45
|
-
colorBack: "#
|
|
46
|
-
colorTint: "#
|
|
45
|
+
colorBack: "#000000",
|
|
46
|
+
colorTint: "#606060",
|
|
47
47
|
softness: 0.45,
|
|
48
48
|
repetition: 1.5,
|
|
49
|
-
shiftRed:
|
|
50
|
-
shiftBlue:
|
|
51
|
-
distortion: 0
|
|
52
|
-
contour: 0
|
|
53
|
-
angle:
|
|
54
|
-
shape: "
|
|
49
|
+
shiftRed: 0,
|
|
50
|
+
shiftBlue: 0,
|
|
51
|
+
distortion: 0,
|
|
52
|
+
contour: 0,
|
|
53
|
+
angle: 90,
|
|
54
|
+
shape: "diamond"
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
|
-
const
|
|
58
|
-
name: "
|
|
57
|
+
const fullScreenPreset = {
|
|
58
|
+
name: "Backdrop",
|
|
59
59
|
params: {
|
|
60
60
|
...defaultObjectSizing,
|
|
61
61
|
speed: 1,
|
|
62
62
|
frame: 0,
|
|
63
|
-
|
|
63
|
+
scale: 1.5,
|
|
64
|
+
colorBack: "#AAAAAC",
|
|
64
65
|
colorTint: "#ffffff",
|
|
65
66
|
softness: 0.05,
|
|
66
67
|
repetition: 1.5,
|
|
@@ -69,31 +70,31 @@ const containedPreset = {
|
|
|
69
70
|
distortion: 0.1,
|
|
70
71
|
contour: 0.4,
|
|
71
72
|
shape: "none",
|
|
72
|
-
angle:
|
|
73
|
+
angle: 90,
|
|
73
74
|
worldWidth: 0,
|
|
74
75
|
worldHeight: 0
|
|
75
76
|
}
|
|
76
77
|
};
|
|
77
|
-
const
|
|
78
|
-
name: "
|
|
78
|
+
const stripesPreset = {
|
|
79
|
+
name: "Stripes",
|
|
79
80
|
params: {
|
|
80
81
|
...defaultObjectSizing,
|
|
81
82
|
speed: 1,
|
|
82
83
|
frame: 0,
|
|
83
|
-
scale: 0.
|
|
84
|
-
colorBack: "#
|
|
85
|
-
colorTint: "#
|
|
86
|
-
softness: 0.
|
|
87
|
-
repetition:
|
|
84
|
+
scale: 0.6,
|
|
85
|
+
colorBack: "#000000",
|
|
86
|
+
colorTint: "#2c5d72",
|
|
87
|
+
softness: 0.8,
|
|
88
|
+
repetition: 6,
|
|
88
89
|
shiftRed: 1,
|
|
89
|
-
shiftBlue:
|
|
90
|
+
shiftBlue: -1,
|
|
90
91
|
distortion: 0.4,
|
|
91
92
|
contour: 0.4,
|
|
92
93
|
shape: "circle",
|
|
93
|
-
angle:
|
|
94
|
+
angle: 0
|
|
94
95
|
}
|
|
95
96
|
};
|
|
96
|
-
const liquidMetalPresets = [defaultPreset,
|
|
97
|
+
const liquidMetalPresets = [defaultPreset, noirPreset, fullScreenPreset, stripesPreset];
|
|
97
98
|
const LiquidMetal = memo(function LiquidMetalImpl({
|
|
98
99
|
// Own props
|
|
99
100
|
colorBack = defaultPreset.params.colorBack,
|
|
@@ -191,10 +192,10 @@ const LiquidMetal = memo(function LiquidMetalImpl({
|
|
|
191
192
|
});
|
|
192
193
|
export {
|
|
193
194
|
LiquidMetal,
|
|
194
|
-
bluePreset,
|
|
195
|
-
containedPreset,
|
|
196
195
|
defaultPreset,
|
|
196
|
+
fullScreenPreset,
|
|
197
197
|
liquidMetalPresets,
|
|
198
|
-
|
|
198
|
+
noirPreset,
|
|
199
|
+
stripesPreset
|
|
199
200
|
};
|
|
200
201
|
//# sourceMappingURL=liquid-metal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/liquid-metal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo, useLayoutEffect, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n liquidMetalFragmentShader,\n ShaderFitOptions,\n defaultObjectSizing,\n type LiquidMetalUniforms,\n type LiquidMetalParams,\n toProcessedLiquidMetal,\n type ImageShaderPreset,\n getShaderColorFromString,\n LiquidMetalShapes,\n} from '@paper-design/shaders';\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\n\nexport interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {\n /**\n * Suspends the component when the image is being processed.\n */\n suspendWhenProcessingImage?: boolean;\n}\n\ntype LiquidMetalPreset = ImageShaderPreset<LiquidMetalParams>;\n\nexport const defaultPreset: LiquidMetalPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale:
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,MAAM,iBAAiB,gBAAgB;AAChD,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,eAAe;AAiMpB;AAtLG,MAAM,gBAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEO,MAAM,aAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEO,MAAM,
|
|
4
|
+
"sourcesContent": ["import { memo, useLayoutEffect, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n liquidMetalFragmentShader,\n ShaderFitOptions,\n defaultObjectSizing,\n type LiquidMetalUniforms,\n type LiquidMetalParams,\n toProcessedLiquidMetal,\n type ImageShaderPreset,\n getShaderColorFromString,\n LiquidMetalShapes,\n} from '@paper-design/shaders';\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\n\nexport interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {\n /**\n * Suspends the component when the image is being processed.\n */\n suspendWhenProcessingImage?: boolean;\n}\n\ntype LiquidMetalPreset = ImageShaderPreset<LiquidMetalParams>;\n\nexport const defaultPreset: LiquidMetalPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#AAAAAC',\n colorTint: '#ffffff',\n distortion: 0.07,\n repetition: 2.0,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n contour: 0.4,\n softness: 0.1,\n angle: 70,\n shape: 'diamond',\n },\n};\n\nexport const noirPreset: LiquidMetalPreset = {\n name: 'Noir',\n params: {\n ...defaultObjectSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colorTint: '#606060',\n softness: 0.45,\n repetition: 1.5,\n shiftRed: 0,\n shiftBlue: 0,\n distortion: 0,\n contour: 0,\n angle: 90,\n shape: 'diamond',\n },\n};\n\nexport const fullScreenPreset: LiquidMetalPreset = {\n name: 'Backdrop',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n scale: 1.5,\n colorBack: '#AAAAAC',\n colorTint: '#ffffff',\n softness: 0.05,\n repetition: 1.5,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.1,\n contour: 0.4,\n shape: 'none',\n angle: 90,\n worldWidth: 0,\n worldHeight: 0,\n },\n};\n\nexport const stripesPreset: LiquidMetalPreset = {\n name: 'Stripes',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n scale: 0.6,\n colorBack: '#000000',\n colorTint: '#2c5d72',\n softness: 0.8,\n repetition: 6,\n shiftRed: 1,\n shiftBlue: -1,\n distortion: 0.4,\n contour: 0.4,\n shape: 'circle',\n angle: 0,\n },\n};\n\nexport const liquidMetalPresets: LiquidMetalPreset[] = [defaultPreset, noirPreset, fullScreenPreset, stripesPreset];\n\nexport const LiquidMetal: React.FC<LiquidMetalProps> = memo(function LiquidMetalImpl({\n // Own props\n colorBack = defaultPreset.params.colorBack,\n colorTint = defaultPreset.params.colorTint,\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '',\n contour = defaultPreset.params.contour,\n distortion = defaultPreset.params.distortion,\n softness = defaultPreset.params.softness,\n repetition = defaultPreset.params.repetition,\n shiftRed = defaultPreset.params.shiftRed,\n shiftBlue = defaultPreset.params.shiftBlue,\n angle = defaultPreset.params.angle,\n shape = defaultPreset.params.shape,\n suspendWhenProcessingImage = false,\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}: LiquidMetalProps) {\n const imageUrl = typeof image === 'string' ? image : image.src;\n const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);\n\n let processedImage: string;\n\n if (suspendWhenProcessingImage && typeof window !== 'undefined' && imageUrl) {\n processedImage = suspend(\n (): Promise<string> => toProcessedLiquidMetal(imageUrl).then((result) => URL.createObjectURL(result.pngBlob)),\n [imageUrl, 'liquid-metal']\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 toProcessedLiquidMetal(imageUrl).then((result) => {\n if (current) {\n url = URL.createObjectURL(result.pngBlob);\n setProcessedStateImage(url);\n }\n });\n\n return () => {\n current = false;\n };\n }, [imageUrl, suspendWhenProcessingImage]);\n\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorTint: getShaderColorFromString(colorTint),\n\n u_image: processedImage,\n u_contour: contour,\n u_distortion: distortion,\n u_softness: softness,\n u_repetition: repetition,\n u_shiftRed: shiftRed,\n u_shiftBlue: shiftBlue,\n u_angle: angle,\n u_isImage: Boolean(image),\n u_shape: LiquidMetalShapes[shape],\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 LiquidMetalUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={liquidMetalFragmentShader}\n uniforms={uniforms}\n />\n );\n});\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.58-next.
|
|
3
|
+
"version": "0.0.58-next.6",
|
|
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.58-next.
|
|
27
|
+
"@paper-design/shaders": "0.0.58-next.6"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "19.1.0"
|