@paper-design/shaders-react 0.0.0-canary.a9965bd0 → 0.0.0-canary.b7acb21
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/LICENSE +201 -164
- package/NOTICE +5 -0
- package/dist/color-props-are-equal.js +3 -0
- package/dist/color-props-are-equal.js.map +2 -2
- package/dist/index.d.ts +4 -1
- package/dist/index.js +7 -0
- package/dist/index.js.map +2 -2
- package/dist/shader-mount.js +5 -2
- package/dist/shader-mount.js.map +2 -2
- package/dist/shaders/gem-smoke.js +21 -13
- package/dist/shaders/gem-smoke.js.map +2 -2
- package/dist/shaders/lens-distortion.d.ts +12 -0
- package/dist/shaders/lens-distortion.js +231 -0
- package/dist/shaders/lens-distortion.js.map +7 -0
- package/dist/shaders/liquid-metal.js +1 -1
- package/dist/shaders/liquid-metal.js.map +1 -1
- package/dist/shaders/paper-texture.d.ts +4 -8
- package/dist/shaders/paper-texture.js +149 -91
- package/dist/shaders/paper-texture.js.map +2 -2
- package/dist/shaders/pulsing-border.js +1 -1
- package/dist/shaders/pulsing-border.js.map +1 -1
- package/package.json +6 -4
|
@@ -11,7 +11,8 @@ import {
|
|
|
11
11
|
ShaderFitOptions,
|
|
12
12
|
defaultObjectSizing,
|
|
13
13
|
toProcessedGemSmoke,
|
|
14
|
-
getShaderColorFromString
|
|
14
|
+
getShaderColorFromString,
|
|
15
|
+
GemSmokeShapes
|
|
15
16
|
} from "@paper-design/shaders";
|
|
16
17
|
import { transparentPixel } from "../transparent-pixel.js";
|
|
17
18
|
import { suspend } from "../suspend.js";
|
|
@@ -20,30 +21,31 @@ const defaultPreset = {
|
|
|
20
21
|
name: "Default",
|
|
21
22
|
params: {
|
|
22
23
|
...defaultObjectSizing,
|
|
23
|
-
scale: 0.
|
|
24
|
+
scale: 0.6,
|
|
24
25
|
speed: 1,
|
|
25
26
|
frame: 0,
|
|
26
27
|
colorBack: "#f0efea",
|
|
27
28
|
colorInner: "#fafaf5",
|
|
28
29
|
colors: ["#333333", "#e7e6df"],
|
|
29
|
-
outerGlow: 0.
|
|
30
|
+
outerGlow: 0.55,
|
|
30
31
|
innerGlow: 1,
|
|
31
32
|
innerDistortion: 0.8,
|
|
32
33
|
outerDistortion: 0.6,
|
|
33
34
|
offset: 0,
|
|
34
35
|
angle: 0,
|
|
35
|
-
size: 0.
|
|
36
|
+
size: 0.8,
|
|
37
|
+
shape: "diamond"
|
|
36
38
|
}
|
|
37
39
|
};
|
|
38
40
|
const fluorescentPreset = {
|
|
39
41
|
name: "Fluorescent",
|
|
40
42
|
params: {
|
|
41
43
|
...defaultObjectSizing,
|
|
42
|
-
scale: 0.
|
|
44
|
+
scale: 0.6,
|
|
43
45
|
speed: 1,
|
|
44
46
|
frame: 0,
|
|
45
47
|
colorBack: "#000000",
|
|
46
|
-
colorInner: "#
|
|
48
|
+
colorInner: "#000000",
|
|
47
49
|
colors: ["#2fb64c", "#cdff61", "#ffffff"],
|
|
48
50
|
outerGlow: 0,
|
|
49
51
|
innerGlow: 1,
|
|
@@ -51,18 +53,19 @@ const fluorescentPreset = {
|
|
|
51
53
|
outerDistortion: 0.8,
|
|
52
54
|
offset: 0,
|
|
53
55
|
angle: 0,
|
|
54
|
-
size: 0.
|
|
56
|
+
size: 0.8,
|
|
57
|
+
shape: "diamond"
|
|
55
58
|
}
|
|
56
59
|
};
|
|
57
60
|
const firePreset = {
|
|
58
61
|
name: "Fire",
|
|
59
62
|
params: {
|
|
60
63
|
...defaultObjectSizing,
|
|
61
|
-
scale: 0.
|
|
64
|
+
scale: 0.6,
|
|
62
65
|
speed: 1,
|
|
63
66
|
frame: 0,
|
|
64
67
|
colorBack: "#000000",
|
|
65
|
-
colorInner: "#
|
|
68
|
+
colorInner: "#000000",
|
|
66
69
|
colors: ["#fe5b16", "#f7ff61", "#ffffff"],
|
|
67
70
|
outerGlow: 1,
|
|
68
71
|
innerGlow: 0.65,
|
|
@@ -70,26 +73,28 @@ const firePreset = {
|
|
|
70
73
|
outerDistortion: 0.8,
|
|
71
74
|
offset: 0,
|
|
72
75
|
angle: 0,
|
|
73
|
-
size: 0.
|
|
76
|
+
size: 0.8,
|
|
77
|
+
shape: "diamond"
|
|
74
78
|
}
|
|
75
79
|
};
|
|
76
80
|
const infraredPreset = {
|
|
77
81
|
name: "Infrared",
|
|
78
82
|
params: {
|
|
79
83
|
...defaultObjectSizing,
|
|
80
|
-
scale: 0.
|
|
84
|
+
scale: 0.6,
|
|
81
85
|
speed: 0.5,
|
|
82
86
|
frame: 0,
|
|
83
87
|
colorBack: "#cd28dc",
|
|
84
88
|
colorInner: "#00000000",
|
|
85
89
|
colors: ["#ff9900", "#fff67a", "#dcff52", "#00ffbb", "#0077ff"],
|
|
86
|
-
outerGlow:
|
|
90
|
+
outerGlow: 1,
|
|
87
91
|
innerGlow: 1,
|
|
88
92
|
innerDistortion: 1,
|
|
89
93
|
outerDistortion: 1,
|
|
90
94
|
offset: 0.2,
|
|
91
95
|
angle: 0,
|
|
92
|
-
size: 1
|
|
96
|
+
size: 1,
|
|
97
|
+
shape: "diamond"
|
|
93
98
|
}
|
|
94
99
|
};
|
|
95
100
|
const gemSmokePresets = [defaultPreset, firePreset, fluorescentPreset, infraredPreset];
|
|
@@ -108,6 +113,7 @@ const GemSmoke = memo(function GemSmokeImpl({
|
|
|
108
113
|
offset = defaultPreset.params.offset,
|
|
109
114
|
angle = defaultPreset.params.angle,
|
|
110
115
|
size = defaultPreset.params.size,
|
|
116
|
+
shape = defaultPreset.params.shape,
|
|
111
117
|
suspendWhenProcessingImage = false,
|
|
112
118
|
// Sizing props
|
|
113
119
|
fit = defaultPreset.params.fit,
|
|
@@ -166,6 +172,8 @@ const GemSmoke = memo(function GemSmokeImpl({
|
|
|
166
172
|
u_offset: offset,
|
|
167
173
|
u_angle: angle,
|
|
168
174
|
u_size: size,
|
|
175
|
+
u_isImage: Boolean(image),
|
|
176
|
+
u_shape: GemSmokeShapes[shape],
|
|
169
177
|
// Sizing uniforms
|
|
170
178
|
u_fit: ShaderFitOptions[fit],
|
|
171
179
|
u_scale: scale,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/gem-smoke.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo, useLayoutEffect, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n gemSmokeFragmentShader,\n ShaderFitOptions,\n defaultObjectSizing,\n type GemSmokeUniforms,\n type GemSmokeParams,\n toProcessedGemSmoke,\n type ImageShaderPreset,\n getShaderColorFromString,\n} from '@paper-design/shaders';\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\n\nexport interface GemSmokeProps extends ShaderComponentProps, GemSmokeParams {\n /**\n * Suspends the component when the image is being processed.\n */\n suspendWhenProcessingImage?: boolean;\n}\n\ntype GemSmokePreset = ImageShaderPreset<GemSmokeParams>;\n\nexport const defaultPreset: GemSmokePreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,MAAM,iBAAiB,gBAAgB;AAChD,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EAEA;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 { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n gemSmokeFragmentShader,\n ShaderFitOptions,\n defaultObjectSizing,\n type GemSmokeUniforms,\n type GemSmokeParams,\n toProcessedGemSmoke,\n type ImageShaderPreset,\n getShaderColorFromString,\n GemSmokeShapes,\n} from '@paper-design/shaders';\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\n\nexport interface GemSmokeProps extends ShaderComponentProps, GemSmokeParams {\n /**\n * Suspends the component when the image is being processed.\n */\n suspendWhenProcessingImage?: boolean;\n}\n\ntype GemSmokePreset = ImageShaderPreset<GemSmokeParams>;\n\nexport const defaultPreset: GemSmokePreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#f0efea',\n colorInner: '#fafaf5',\n colors: ['#333333', '#e7e6df'],\n outerGlow: 0.55,\n innerGlow: 1,\n innerDistortion: 0.8,\n outerDistortion: 0.6,\n offset: 0,\n angle: 0,\n size: 0.8,\n shape: 'diamond',\n },\n};\n\nexport const fluorescentPreset: GemSmokePreset = {\n name: 'Fluorescent',\n params: {\n ...defaultObjectSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colorInner: '#000000',\n colors: ['#2fb64c', '#cdff61', '#ffffff'],\n outerGlow: 0,\n innerGlow: 1,\n innerDistortion: 1,\n outerDistortion: 0.8,\n offset: 0,\n angle: 0,\n size: 0.8,\n shape: 'diamond',\n },\n};\n\nexport const firePreset: GemSmokePreset = {\n name: 'Fire',\n params: {\n ...defaultObjectSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colorInner: '#000000',\n colors: ['#fe5b16', '#f7ff61', '#ffffff'],\n outerGlow: 1,\n innerGlow: 0.65,\n innerDistortion: 0.6,\n outerDistortion: 0.8,\n offset: 0,\n angle: 0,\n size: 0.8,\n shape: 'diamond',\n },\n};\n\nexport const infraredPreset: GemSmokePreset = {\n name: 'Infrared',\n params: {\n ...defaultObjectSizing,\n scale: 0.6,\n speed: 0.5,\n frame: 0,\n colorBack: '#cd28dc',\n colorInner: '#00000000',\n colors: ['#ff9900', '#fff67a', '#dcff52', '#00ffbb', '#0077ff'],\n outerGlow: 1,\n innerGlow: 1,\n innerDistortion: 1,\n outerDistortion: 1,\n offset: 0.2,\n angle: 0,\n size: 1,\n shape: 'diamond',\n },\n};\n\nexport const gemSmokePresets: GemSmokePreset[] = [defaultPreset, firePreset, fluorescentPreset, infraredPreset];\n\nexport const GemSmoke: React.FC<GemSmokeProps> = memo(function GemSmokeImpl({\n // Own props\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '',\n innerDistortion = defaultPreset.params.innerDistortion,\n outerDistortion = defaultPreset.params.outerDistortion,\n outerGlow = defaultPreset.params.outerGlow,\n innerGlow = defaultPreset.params.innerGlow,\n colorInner = defaultPreset.params.colorInner,\n offset = defaultPreset.params.offset,\n angle = defaultPreset.params.angle,\n size = defaultPreset.params.size,\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}: GemSmokeProps) {\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> => toProcessedGemSmoke(imageUrl).then((result) => URL.createObjectURL(result.pngBlob)),\n [imageUrl, 'gemSmoke']\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 toProcessedGemSmoke(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_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_colorBack: getShaderColorFromString(colorBack),\n u_image: processedImage,\n u_innerDistortion: innerDistortion,\n u_outerDistortion: outerDistortion,\n u_outerGlow: outerGlow,\n u_innerGlow: innerGlow,\n u_colorInner: getShaderColorFromString(colorInner),\n u_offset: offset,\n u_angle: angle,\n u_size: size,\n u_isImage: Boolean(image),\n u_shape: GemSmokeShapes[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 GemSmokeUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={gemSmokeFragmentShader}\n mipmaps={['u_image']}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
|
+
import { type LensDistortionParams, type ImageShaderPreset } from '@paper-design/shaders';
|
|
3
|
+
export interface LensDistortionProps extends ShaderComponentProps, LensDistortionParams {
|
|
4
|
+
}
|
|
5
|
+
type LensDistortionPreset = ImageShaderPreset<LensDistortionParams>;
|
|
6
|
+
export declare const defaultPreset: LensDistortionPreset;
|
|
7
|
+
export declare const fisheyePreset: LensDistortionPreset;
|
|
8
|
+
export declare const duotonePreset: LensDistortionPreset;
|
|
9
|
+
export declare const smokePreset: LensDistortionPreset;
|
|
10
|
+
export declare const lensDistortionPresets: LensDistortionPreset[];
|
|
11
|
+
export declare const LensDistortion: React.FC<LensDistortionProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
import { memo } from "react";
|
|
7
|
+
import { ShaderMount } from "../shader-mount.js";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
9
|
+
import {
|
|
10
|
+
lensDistortionFragmentShader,
|
|
11
|
+
ShaderFitOptions,
|
|
12
|
+
defaultObjectSizing
|
|
13
|
+
} from "@paper-design/shaders";
|
|
14
|
+
import { jsx } from "react/jsx-runtime";
|
|
15
|
+
const defaultPreset = {
|
|
16
|
+
name: "Default",
|
|
17
|
+
params: {
|
|
18
|
+
...defaultObjectSizing,
|
|
19
|
+
scale: 1,
|
|
20
|
+
fit: "contain",
|
|
21
|
+
speed: 0,
|
|
22
|
+
frame: 0,
|
|
23
|
+
spread: 0.6,
|
|
24
|
+
bias: 1,
|
|
25
|
+
angle: 0,
|
|
26
|
+
perspective: 0.1,
|
|
27
|
+
count: 35,
|
|
28
|
+
dispersion: 1,
|
|
29
|
+
dispersionShift: 0,
|
|
30
|
+
dispersionColor: 0.6,
|
|
31
|
+
focusCenter: 0.8,
|
|
32
|
+
focusEdges: 1,
|
|
33
|
+
swirl: 0.35,
|
|
34
|
+
noise: 0,
|
|
35
|
+
noiseFrequency: 0.25,
|
|
36
|
+
noiseOffset: 0,
|
|
37
|
+
lensBulge: 0,
|
|
38
|
+
lensCircle: 0,
|
|
39
|
+
grainMixer: 0,
|
|
40
|
+
grainOverlay: 0,
|
|
41
|
+
imageX: 0,
|
|
42
|
+
imageY: 0
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
const fisheyePreset = {
|
|
46
|
+
name: "Fisheye",
|
|
47
|
+
params: {
|
|
48
|
+
...defaultObjectSizing,
|
|
49
|
+
scale: 1,
|
|
50
|
+
fit: "contain",
|
|
51
|
+
speed: 0,
|
|
52
|
+
frame: 0,
|
|
53
|
+
spread: 0.7,
|
|
54
|
+
bias: 1,
|
|
55
|
+
angle: 0,
|
|
56
|
+
perspective: 0.75,
|
|
57
|
+
count: 15,
|
|
58
|
+
dispersion: 1,
|
|
59
|
+
dispersionShift: 0,
|
|
60
|
+
dispersionColor: 0.7,
|
|
61
|
+
focusCenter: 0.9,
|
|
62
|
+
focusEdges: 1,
|
|
63
|
+
swirl: 1,
|
|
64
|
+
noise: 0,
|
|
65
|
+
noiseFrequency: 0.25,
|
|
66
|
+
noiseOffset: 0,
|
|
67
|
+
lensBulge: 0.95,
|
|
68
|
+
lensCircle: 1,
|
|
69
|
+
grainMixer: 0.5,
|
|
70
|
+
grainOverlay: 0,
|
|
71
|
+
imageX: 0,
|
|
72
|
+
imageY: 0
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
const duotonePreset = {
|
|
76
|
+
name: "Duotone",
|
|
77
|
+
params: {
|
|
78
|
+
...defaultObjectSizing,
|
|
79
|
+
fit: "contain",
|
|
80
|
+
speed: 0,
|
|
81
|
+
frame: 0,
|
|
82
|
+
spread: 0.1,
|
|
83
|
+
bias: 0,
|
|
84
|
+
angle: 0,
|
|
85
|
+
perspective: 0,
|
|
86
|
+
count: 2,
|
|
87
|
+
dispersion: 1,
|
|
88
|
+
dispersionShift: 0,
|
|
89
|
+
dispersionColor: 0.1,
|
|
90
|
+
focusCenter: 0,
|
|
91
|
+
focusEdges: 0,
|
|
92
|
+
swirl: 0,
|
|
93
|
+
noise: 0,
|
|
94
|
+
noiseFrequency: 0.25,
|
|
95
|
+
noiseOffset: 0,
|
|
96
|
+
lensBulge: 0,
|
|
97
|
+
lensCircle: 0,
|
|
98
|
+
grainMixer: 0.1,
|
|
99
|
+
grainOverlay: 0.3,
|
|
100
|
+
imageX: 0,
|
|
101
|
+
imageY: 0
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
const smokePreset = {
|
|
105
|
+
name: "Smoke",
|
|
106
|
+
params: {
|
|
107
|
+
...defaultObjectSizing,
|
|
108
|
+
scale: 1,
|
|
109
|
+
fit: "contain",
|
|
110
|
+
speed: 0,
|
|
111
|
+
frame: 0,
|
|
112
|
+
spread: 0.65,
|
|
113
|
+
bias: -1,
|
|
114
|
+
angle: 0,
|
|
115
|
+
perspective: 0.4,
|
|
116
|
+
count: 50,
|
|
117
|
+
dispersion: 0,
|
|
118
|
+
dispersionShift: 0,
|
|
119
|
+
dispersionColor: 0.31,
|
|
120
|
+
focusCenter: 0,
|
|
121
|
+
focusEdges: 0.6,
|
|
122
|
+
swirl: 0,
|
|
123
|
+
noise: 1,
|
|
124
|
+
noiseFrequency: 0.35,
|
|
125
|
+
noiseOffset: 0.3,
|
|
126
|
+
lensBulge: 0,
|
|
127
|
+
lensCircle: 0,
|
|
128
|
+
grainMixer: 0,
|
|
129
|
+
grainOverlay: 0,
|
|
130
|
+
imageX: 0,
|
|
131
|
+
imageY: 0
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
const lensDistortionPresets = [
|
|
135
|
+
defaultPreset,
|
|
136
|
+
fisheyePreset,
|
|
137
|
+
duotonePreset,
|
|
138
|
+
smokePreset
|
|
139
|
+
];
|
|
140
|
+
const LensDistortion = memo(function LensDistortionImpl({
|
|
141
|
+
// Own props
|
|
142
|
+
speed = defaultPreset.params.speed,
|
|
143
|
+
frame = defaultPreset.params.frame,
|
|
144
|
+
image = "",
|
|
145
|
+
spread = defaultPreset.params.spread,
|
|
146
|
+
bias = defaultPreset.params.bias,
|
|
147
|
+
angle = defaultPreset.params.angle,
|
|
148
|
+
perspective = defaultPreset.params.perspective,
|
|
149
|
+
count = defaultPreset.params.count,
|
|
150
|
+
dispersion = defaultPreset.params.dispersion,
|
|
151
|
+
dispersionShift = defaultPreset.params.dispersionShift,
|
|
152
|
+
dispersionColor = defaultPreset.params.dispersionColor,
|
|
153
|
+
focusCenter = defaultPreset.params.focusCenter,
|
|
154
|
+
focusEdges = defaultPreset.params.focusEdges,
|
|
155
|
+
swirl = defaultPreset.params.swirl,
|
|
156
|
+
noise = defaultPreset.params.noise,
|
|
157
|
+
noiseFrequency = defaultPreset.params.noiseFrequency,
|
|
158
|
+
noiseOffset = defaultPreset.params.noiseOffset,
|
|
159
|
+
lensBulge = defaultPreset.params.lensBulge,
|
|
160
|
+
lensCircle = defaultPreset.params.lensCircle,
|
|
161
|
+
grainMixer = defaultPreset.params.grainMixer,
|
|
162
|
+
grainOverlay = defaultPreset.params.grainOverlay,
|
|
163
|
+
imageX = defaultPreset.params.imageX,
|
|
164
|
+
imageY = defaultPreset.params.imageY,
|
|
165
|
+
// Sizing props
|
|
166
|
+
fit = defaultPreset.params.fit,
|
|
167
|
+
scale = defaultPreset.params.scale,
|
|
168
|
+
rotation = defaultPreset.params.rotation,
|
|
169
|
+
originX = defaultPreset.params.originX,
|
|
170
|
+
originY = defaultPreset.params.originY,
|
|
171
|
+
offsetX = defaultPreset.params.offsetX,
|
|
172
|
+
offsetY = defaultPreset.params.offsetY,
|
|
173
|
+
worldWidth = defaultPreset.params.worldWidth,
|
|
174
|
+
worldHeight = defaultPreset.params.worldHeight,
|
|
175
|
+
...props
|
|
176
|
+
}) {
|
|
177
|
+
const uniforms = {
|
|
178
|
+
// Own uniforms
|
|
179
|
+
u_image: image,
|
|
180
|
+
u_spread: spread,
|
|
181
|
+
u_bias: bias,
|
|
182
|
+
u_angle: angle,
|
|
183
|
+
u_perspective: perspective,
|
|
184
|
+
u_count: count,
|
|
185
|
+
u_dispersion: dispersion,
|
|
186
|
+
u_dispersionShift: dispersionShift,
|
|
187
|
+
u_dispersionColor: dispersionColor,
|
|
188
|
+
u_focusCenter: focusCenter,
|
|
189
|
+
u_focusEdges: focusEdges,
|
|
190
|
+
u_swirl: swirl,
|
|
191
|
+
u_noise: noise,
|
|
192
|
+
u_noiseFrequency: noiseFrequency,
|
|
193
|
+
u_noiseOffset: noiseOffset,
|
|
194
|
+
u_lensBulge: lensBulge,
|
|
195
|
+
u_lensCircle: lensCircle,
|
|
196
|
+
u_grainMixer: grainMixer,
|
|
197
|
+
u_grainOverlay: grainOverlay,
|
|
198
|
+
u_imageX: imageX,
|
|
199
|
+
u_imageY: imageY,
|
|
200
|
+
// Sizing uniforms
|
|
201
|
+
u_fit: ShaderFitOptions[fit],
|
|
202
|
+
u_rotation: rotation,
|
|
203
|
+
u_scale: scale,
|
|
204
|
+
u_offsetX: offsetX,
|
|
205
|
+
u_offsetY: offsetY,
|
|
206
|
+
u_originX: originX,
|
|
207
|
+
u_originY: originY,
|
|
208
|
+
u_worldWidth: worldWidth,
|
|
209
|
+
u_worldHeight: worldHeight
|
|
210
|
+
};
|
|
211
|
+
return /* @__PURE__ */ jsx(
|
|
212
|
+
ShaderMount,
|
|
213
|
+
{
|
|
214
|
+
...props,
|
|
215
|
+
speed,
|
|
216
|
+
frame,
|
|
217
|
+
fragmentShader: lensDistortionFragmentShader,
|
|
218
|
+
mipmaps: ["u_image"],
|
|
219
|
+
uniforms
|
|
220
|
+
}
|
|
221
|
+
);
|
|
222
|
+
}, colorPropsAreEqual);
|
|
223
|
+
export {
|
|
224
|
+
LensDistortion,
|
|
225
|
+
defaultPreset,
|
|
226
|
+
duotonePreset,
|
|
227
|
+
fisheyePreset,
|
|
228
|
+
lensDistortionPresets,
|
|
229
|
+
smokePreset
|
|
230
|
+
};
|
|
231
|
+
//# sourceMappingURL=lens-distortion.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/shaders/lens-distortion.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 lensDistortionFragmentShader,\n ShaderFitOptions,\n type LensDistortionUniforms,\n type LensDistortionParams,\n defaultObjectSizing,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface LensDistortionProps extends ShaderComponentProps, LensDistortionParams {}\n\ntype LensDistortionPreset = ImageShaderPreset<LensDistortionParams>;\n\nexport const defaultPreset: LensDistortionPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n fit: 'contain',\n speed: 0,\n frame: 0,\n spread: 0.6,\n bias: 1,\n angle: 0,\n perspective: 0.1,\n count: 35,\n dispersion: 1,\n dispersionShift: 0,\n dispersionColor: 0.6,\n focusCenter: 0.8,\n focusEdges: 1,\n swirl: 0.35,\n noise: 0,\n noiseFrequency: 0.25,\n noiseOffset: 0,\n lensBulge: 0,\n lensCircle: 0,\n grainMixer: 0,\n grainOverlay: 0,\n imageX: 0,\n imageY: 0,\n },\n} as const;\n\nexport const fisheyePreset: LensDistortionPreset = {\n name: 'Fisheye',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n fit: 'contain',\n speed: 0,\n frame: 0,\n spread: 0.7,\n bias: 1,\n angle: 0,\n perspective: 0.75,\n count: 15,\n dispersion: 1,\n dispersionShift: 0,\n dispersionColor: 0.7,\n focusCenter: 0.9,\n focusEdges: 1,\n swirl: 1,\n noise: 0,\n noiseFrequency: 0.25,\n noiseOffset: 0,\n lensBulge: 0.95,\n lensCircle: 1,\n grainMixer: 0.5,\n grainOverlay: 0,\n imageX: 0,\n imageY: 0,\n },\n} as const;\n\nexport const duotonePreset: LensDistortionPreset = {\n name: 'Duotone',\n params: {\n ...defaultObjectSizing,\n fit: 'contain',\n speed: 0,\n frame: 0,\n spread: 0.1,\n bias: 0,\n angle: 0,\n perspective: 0,\n count: 2,\n dispersion: 1,\n dispersionShift: 0,\n dispersionColor: 0.1,\n focusCenter: 0,\n focusEdges: 0,\n swirl: 0,\n noise: 0,\n noiseFrequency: 0.25,\n noiseOffset: 0,\n lensBulge: 0,\n lensCircle: 0,\n grainMixer: 0.1,\n grainOverlay: 0.3,\n imageX: 0,\n imageY: 0,\n },\n} as const;\n\nexport const smokePreset: LensDistortionPreset = {\n name: 'Smoke',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n fit: 'contain',\n speed: 0,\n frame: 0,\n spread: 0.65,\n bias: -1,\n angle: 0,\n perspective: 0.4,\n count: 50,\n dispersion: 0,\n dispersionShift: 0,\n dispersionColor: 0.31,\n focusCenter: 0,\n focusEdges: 0.6,\n swirl: 0,\n noise: 1,\n noiseFrequency: 0.35,\n noiseOffset: 0.3,\n lensBulge: 0,\n lensCircle: 0,\n grainMixer: 0,\n grainOverlay: 0,\n imageX: 0,\n imageY: 0,\n },\n} as const;\n\nexport const lensDistortionPresets: LensDistortionPreset[] = [\n defaultPreset,\n fisheyePreset,\n duotonePreset,\n smokePreset,\n];\n\nexport const LensDistortion: React.FC<LensDistortionProps> = memo(function LensDistortionImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '',\n spread = defaultPreset.params.spread,\n bias = defaultPreset.params.bias,\n angle = defaultPreset.params.angle,\n perspective = defaultPreset.params.perspective,\n count = defaultPreset.params.count,\n dispersion = defaultPreset.params.dispersion,\n dispersionShift = defaultPreset.params.dispersionShift,\n dispersionColor = defaultPreset.params.dispersionColor,\n focusCenter = defaultPreset.params.focusCenter,\n focusEdges = defaultPreset.params.focusEdges,\n swirl = defaultPreset.params.swirl,\n noise = defaultPreset.params.noise,\n noiseFrequency = defaultPreset.params.noiseFrequency,\n noiseOffset = defaultPreset.params.noiseOffset,\n lensBulge = defaultPreset.params.lensBulge,\n lensCircle = defaultPreset.params.lensCircle,\n grainMixer = defaultPreset.params.grainMixer,\n grainOverlay = defaultPreset.params.grainOverlay,\n imageX = defaultPreset.params.imageX,\n imageY = defaultPreset.params.imageY,\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}: LensDistortionProps) {\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_spread: spread,\n u_bias: bias,\n u_angle: angle,\n u_perspective: perspective,\n u_count: count,\n u_dispersion: dispersion,\n u_dispersionShift: dispersionShift,\n u_dispersionColor: dispersionColor,\n u_focusCenter: focusCenter,\n u_focusEdges: focusEdges,\n u_swirl: swirl,\n u_noise: noise,\n u_noiseFrequency: noiseFrequency,\n u_noiseOffset: noiseOffset,\n u_lensBulge: lensBulge,\n u_lensCircle: lensCircle,\n u_grainMixer: grainMixer,\n u_grainOverlay: grainOverlay,\n u_imageX: imageX,\n u_imageY: imageY,\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 LensDistortionUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={lensDistortionFragmentShader}\n mipmaps={['u_image']}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -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: 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
|
|
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,\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 mipmaps={['u_image']}\n uniforms={uniforms}\n />\n );\n});\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,18 +3,14 @@ import { type ImageShaderPreset, type PaperTextureParams } from '@paper-design/s
|
|
|
3
3
|
export interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {
|
|
4
4
|
/** @deprecated use `fiberSize` instead */
|
|
5
5
|
fiberScale?: number;
|
|
6
|
-
/** @deprecated use `
|
|
7
|
-
crumplesScale?: number;
|
|
8
|
-
/** @deprecated use `foldCount` instead */
|
|
6
|
+
/** @deprecated use `crumpleCount` instead */
|
|
9
7
|
foldsNumber?: number;
|
|
10
|
-
/** @deprecated use `fade` instead */
|
|
11
|
-
blur?: number;
|
|
12
8
|
}
|
|
13
9
|
type PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;
|
|
14
10
|
export declare const defaultPreset: PaperTexturePreset;
|
|
15
|
-
export declare const
|
|
16
|
-
export declare const
|
|
17
|
-
export declare const
|
|
11
|
+
export declare const creasedPreset: PaperTexturePreset;
|
|
12
|
+
export declare const spreadPreset: PaperTexturePreset;
|
|
13
|
+
export declare const flatPreset: PaperTexturePreset;
|
|
18
14
|
export declare const paperTexturePresets: PaperTexturePreset[];
|
|
19
15
|
export declare const PaperTexture: React.FC<PaperTextureProps>;
|
|
20
16
|
export {};
|