@paper-design/shaders-react 0.0.58-next.3 → 0.0.58-next.5
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,7 +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
|
|
11
|
+
export declare const noirPreset: LiquidMetalPreset;
|
|
12
|
+
export declare const fullScreenPreset: LiquidMetalPreset;
|
|
13
|
+
export declare const stripesPreset: LiquidMetalPreset;
|
|
12
14
|
export declare const liquidMetalPresets: LiquidMetalPreset[];
|
|
13
15
|
export declare const LiquidMetal: React.FC<LiquidMetalProps>;
|
|
14
16
|
export {};
|
|
@@ -20,7 +20,7 @@ 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
26
|
colorBack: "#00000000",
|
|
@@ -31,28 +31,70 @@ const defaultPreset = {
|
|
|
31
31
|
shiftBlue: 0.3,
|
|
32
32
|
contour: 0.4,
|
|
33
33
|
softness: 0.1,
|
|
34
|
-
|
|
34
|
+
angle: 70,
|
|
35
|
+
shape: "diamond"
|
|
35
36
|
}
|
|
36
37
|
};
|
|
37
|
-
const
|
|
38
|
-
name: "
|
|
38
|
+
const noirPreset = {
|
|
39
|
+
name: "Noir",
|
|
39
40
|
params: {
|
|
40
41
|
...defaultObjectSizing,
|
|
41
42
|
scale: 0.6,
|
|
42
43
|
speed: 1,
|
|
43
|
-
frame:
|
|
44
|
+
frame: 0,
|
|
44
45
|
colorBack: "#000000",
|
|
46
|
+
colorTint: "#606060",
|
|
47
|
+
softness: 0.45,
|
|
48
|
+
repetition: 1.5,
|
|
49
|
+
shiftRed: 0,
|
|
50
|
+
shiftBlue: 0,
|
|
51
|
+
distortion: 0,
|
|
52
|
+
contour: 0,
|
|
53
|
+
angle: 90,
|
|
54
|
+
shape: "diamond"
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
const fullScreenPreset = {
|
|
58
|
+
name: "Backdrop",
|
|
59
|
+
params: {
|
|
60
|
+
...defaultObjectSizing,
|
|
61
|
+
speed: 1,
|
|
62
|
+
frame: 0,
|
|
63
|
+
scale: 1.5,
|
|
64
|
+
colorBack: "#00000000",
|
|
45
65
|
colorTint: "#ffffff",
|
|
46
|
-
softness: 0.
|
|
47
|
-
repetition:
|
|
66
|
+
softness: 0.05,
|
|
67
|
+
repetition: 1.5,
|
|
48
68
|
shiftRed: 0.3,
|
|
49
69
|
shiftBlue: 0.3,
|
|
50
70
|
distortion: 0.1,
|
|
51
|
-
contour:
|
|
52
|
-
shape: "
|
|
71
|
+
contour: 0.4,
|
|
72
|
+
shape: "none",
|
|
73
|
+
angle: 90,
|
|
74
|
+
worldWidth: 0,
|
|
75
|
+
worldHeight: 0
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
const stripesPreset = {
|
|
79
|
+
name: "Stripes",
|
|
80
|
+
params: {
|
|
81
|
+
...defaultObjectSizing,
|
|
82
|
+
speed: 1,
|
|
83
|
+
frame: 0,
|
|
84
|
+
scale: 0.6,
|
|
85
|
+
colorBack: "#000000",
|
|
86
|
+
colorTint: "#2c5d72",
|
|
87
|
+
softness: 0.8,
|
|
88
|
+
repetition: 6,
|
|
89
|
+
shiftRed: 1,
|
|
90
|
+
shiftBlue: -1,
|
|
91
|
+
distortion: 0.4,
|
|
92
|
+
contour: 0.4,
|
|
93
|
+
shape: "circle",
|
|
94
|
+
angle: 0
|
|
53
95
|
}
|
|
54
96
|
};
|
|
55
|
-
const liquidMetalPresets = [defaultPreset,
|
|
97
|
+
const liquidMetalPresets = [defaultPreset, noirPreset, fullScreenPreset, stripesPreset];
|
|
56
98
|
const LiquidMetal = memo(function LiquidMetalImpl({
|
|
57
99
|
// Own props
|
|
58
100
|
colorBack = defaultPreset.params.colorBack,
|
|
@@ -66,6 +108,7 @@ const LiquidMetal = memo(function LiquidMetalImpl({
|
|
|
66
108
|
repetition = defaultPreset.params.repetition,
|
|
67
109
|
shiftRed = defaultPreset.params.shiftRed,
|
|
68
110
|
shiftBlue = defaultPreset.params.shiftBlue,
|
|
111
|
+
angle = defaultPreset.params.angle,
|
|
69
112
|
shape = defaultPreset.params.shape,
|
|
70
113
|
suspendWhenProcessingImage = false,
|
|
71
114
|
// Sizing props
|
|
@@ -122,6 +165,7 @@ const LiquidMetal = memo(function LiquidMetalImpl({
|
|
|
122
165
|
u_repetition: repetition,
|
|
123
166
|
u_shiftRed: shiftRed,
|
|
124
167
|
u_shiftBlue: shiftBlue,
|
|
168
|
+
u_angle: angle,
|
|
125
169
|
u_isImage: Boolean(image),
|
|
126
170
|
u_shape: LiquidMetalShapes[shape],
|
|
127
171
|
// Sizing uniforms
|
|
@@ -149,7 +193,9 @@ const LiquidMetal = memo(function LiquidMetalImpl({
|
|
|
149
193
|
export {
|
|
150
194
|
LiquidMetal,
|
|
151
195
|
defaultPreset,
|
|
196
|
+
fullScreenPreset,
|
|
152
197
|
liquidMetalPresets,
|
|
153
|
-
|
|
198
|
+
noirPreset,
|
|
199
|
+
stripesPreset
|
|
154
200
|
};
|
|
155
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;
|
|
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: '#00000000',\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: '#00000000',\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.5",
|
|
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.5"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "19.1.0"
|