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