@paper-design/shaders-react 0.0.75 → 0.0.76
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.
|
@@ -41,7 +41,7 @@ const fluorescentPreset = {
|
|
|
41
41
|
name: "Fluorescent",
|
|
42
42
|
params: {
|
|
43
43
|
...defaultObjectSizing,
|
|
44
|
-
scale: 0.
|
|
44
|
+
scale: 0.6,
|
|
45
45
|
speed: 1,
|
|
46
46
|
frame: 0,
|
|
47
47
|
colorBack: "#000000",
|
|
@@ -53,7 +53,7 @@ const fluorescentPreset = {
|
|
|
53
53
|
outerDistortion: 0.8,
|
|
54
54
|
offset: 0,
|
|
55
55
|
angle: 0,
|
|
56
|
-
size: 0.
|
|
56
|
+
size: 0.8,
|
|
57
57
|
shape: "diamond"
|
|
58
58
|
}
|
|
59
59
|
};
|
|
@@ -61,7 +61,7 @@ const firePreset = {
|
|
|
61
61
|
name: "Fire",
|
|
62
62
|
params: {
|
|
63
63
|
...defaultObjectSizing,
|
|
64
|
-
scale: 0.
|
|
64
|
+
scale: 0.6,
|
|
65
65
|
speed: 1,
|
|
66
66
|
frame: 0,
|
|
67
67
|
colorBack: "#000000",
|
|
@@ -73,7 +73,7 @@ const firePreset = {
|
|
|
73
73
|
outerDistortion: 0.8,
|
|
74
74
|
offset: 0,
|
|
75
75
|
angle: 0,
|
|
76
|
-
size: 0.
|
|
76
|
+
size: 0.8,
|
|
77
77
|
shape: "diamond"
|
|
78
78
|
}
|
|
79
79
|
};
|
|
@@ -81,20 +81,20 @@ const infraredPreset = {
|
|
|
81
81
|
name: "Infrared",
|
|
82
82
|
params: {
|
|
83
83
|
...defaultObjectSizing,
|
|
84
|
-
scale: 0.
|
|
84
|
+
scale: 0.6,
|
|
85
85
|
speed: 0.5,
|
|
86
86
|
frame: 0,
|
|
87
87
|
colorBack: "#cd28dc",
|
|
88
88
|
colorInner: "#00000000",
|
|
89
89
|
colors: ["#ff9900", "#fff67a", "#dcff52", "#00ffbb", "#0077ff"],
|
|
90
|
-
outerGlow:
|
|
90
|
+
outerGlow: 1,
|
|
91
91
|
innerGlow: 1,
|
|
92
92
|
innerDistortion: 1,
|
|
93
93
|
outerDistortion: 1,
|
|
94
94
|
offset: 0.2,
|
|
95
95
|
angle: 0,
|
|
96
96
|
size: 1,
|
|
97
|
-
shape: "
|
|
97
|
+
shape: "diamond"
|
|
98
98
|
}
|
|
99
99
|
};
|
|
100
100
|
const gemSmokePresets = [defaultPreset, firePreset, fluorescentPreset, infraredPreset];
|
|
@@ -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 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.
|
|
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
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.76",
|
|
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.76"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "19.1.0"
|