@paper-design/shaders-react 0.0.62 → 0.0.63
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.
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type FlutedGlassParams, type ImageShaderPreset } from '@paper-design/shaders';
|
|
3
3
|
export interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {
|
|
4
|
-
/** @deprecated use `stretch` instead */
|
|
5
|
-
edges?: number;
|
|
6
4
|
/** @deprecated use `size` instead */
|
|
7
5
|
count?: number;
|
|
8
6
|
}
|
|
@@ -34,6 +34,7 @@ const defaultPreset = {
|
|
|
34
34
|
distortion: 0.5,
|
|
35
35
|
shift: 0,
|
|
36
36
|
blur: 0,
|
|
37
|
+
edges: 0.25,
|
|
37
38
|
stretch: 0,
|
|
38
39
|
margin: 0,
|
|
39
40
|
marginLeft: 0,
|
|
@@ -64,6 +65,7 @@ const wavesPreset = {
|
|
|
64
65
|
distortion: 0.5,
|
|
65
66
|
shift: 0,
|
|
66
67
|
blur: 0.1,
|
|
68
|
+
edges: 0.5,
|
|
67
69
|
stretch: 1,
|
|
68
70
|
margin: 0,
|
|
69
71
|
marginLeft: 0,
|
|
@@ -94,6 +96,7 @@ const abstractPreset = {
|
|
|
94
96
|
distortion: 1,
|
|
95
97
|
shift: 0,
|
|
96
98
|
blur: 1,
|
|
99
|
+
edges: 0.5,
|
|
97
100
|
stretch: 1,
|
|
98
101
|
margin: 0,
|
|
99
102
|
marginLeft: 0,
|
|
@@ -123,6 +126,7 @@ const foldsPreset = {
|
|
|
123
126
|
distortion: 0.75,
|
|
124
127
|
shift: 0,
|
|
125
128
|
blur: 0.25,
|
|
129
|
+
edges: 0.5,
|
|
126
130
|
stretch: 0,
|
|
127
131
|
margin: 0.2,
|
|
128
132
|
marginLeft: 0.2,
|
|
@@ -150,6 +154,7 @@ const FlutedGlass = memo(function FlutedGlassImpl({
|
|
|
150
154
|
shape = defaultPreset.params.shape,
|
|
151
155
|
shift = defaultPreset.params.shift,
|
|
152
156
|
blur = defaultPreset.params.blur,
|
|
157
|
+
edges = defaultPreset.params.edges,
|
|
153
158
|
margin,
|
|
154
159
|
marginLeft = margin ?? defaultPreset.params.marginLeft,
|
|
155
160
|
marginRight = margin ?? defaultPreset.params.marginRight,
|
|
@@ -157,9 +162,7 @@ const FlutedGlass = memo(function FlutedGlassImpl({
|
|
|
157
162
|
marginBottom = margin ?? defaultPreset.params.marginBottom,
|
|
158
163
|
grainMixer = defaultPreset.params.grainMixer,
|
|
159
164
|
grainOverlay = defaultPreset.params.grainOverlay,
|
|
160
|
-
|
|
161
|
-
edges,
|
|
162
|
-
stretch = edges === void 0 ? defaultPreset.params.stretch : edges,
|
|
165
|
+
stretch = defaultPreset.params.stretch,
|
|
163
166
|
// integer `count` was deprecated in favor of the normalized `size` param
|
|
164
167
|
count,
|
|
165
168
|
size = count === void 0 ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,
|
|
@@ -187,6 +190,7 @@ const FlutedGlass = memo(function FlutedGlassImpl({
|
|
|
187
190
|
u_distortion: distortion,
|
|
188
191
|
u_shift: shift,
|
|
189
192
|
u_blur: blur,
|
|
193
|
+
u_edges: edges,
|
|
190
194
|
u_stretch: stretch,
|
|
191
195
|
u_distortionShape: GlassDistortionShapes[distortionShape],
|
|
192
196
|
u_highlights: highlights,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/fluted-glass.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n flutedGlassFragmentShader,\n ShaderFitOptions,\n type FlutedGlassUniforms,\n type FlutedGlassParams,\n defaultObjectSizing,\n GlassDistortionShapes,\n GlassGridShapes,\n type ImageShaderPreset,\n getShaderColorFromString,\n} from '@paper-design/shaders';\n\nexport interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {\n /** @deprecated use `
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n flutedGlassFragmentShader,\n ShaderFitOptions,\n type FlutedGlassUniforms,\n type FlutedGlassParams,\n defaultObjectSizing,\n GlassDistortionShapes,\n GlassGridShapes,\n type ImageShaderPreset,\n getShaderColorFromString,\n} from '@paper-design/shaders';\n\nexport interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {\n /** @deprecated use `size` instead */\n count?: number;\n}\n\ntype FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;\n\nexport const defaultPreset: FlutedGlassPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n scale: 1.1,\n speed: 0,\n frame: 0,\n colorBack: '#00000000',\n colorShadow: '#000000',\n colorHighlight: '#ffffff',\n shadows: 0.25,\n size: 0.5,\n angle: 0,\n distortionShape: 'prism',\n highlights: 0.1,\n shape: 'lines',\n distortion: 0.5,\n shift: 0,\n blur: 0,\n edges: 0.25,\n stretch: 0,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n grainMixer: 0,\n grainOverlay: 0,\n },\n};\n\nexport const wavesPreset: FlutedGlassPreset = {\n name: 'Waves',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n scale: 1.2,\n speed: 0,\n frame: 0,\n colorBack: '#00000000',\n colorShadow: '#000000',\n colorHighlight: '#ffffff',\n shadows: 0,\n size: 0.9,\n angle: 0,\n distortionShape: 'contour',\n highlights: 0,\n shape: 'wave',\n distortion: 0.5,\n shift: 0,\n blur: 0.1,\n edges: 0.5,\n stretch: 1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n grainMixer: 0,\n grainOverlay: 0.05,\n },\n};\n\nexport const abstractPreset: FlutedGlassPreset = {\n name: 'Abstract',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n scale: 4,\n speed: 0,\n frame: 0,\n colorBack: '#00000000',\n colorShadow: '#000000',\n colorHighlight: '#ffffff',\n shadows: 0,\n size: 0.7,\n angle: 30,\n distortionShape: 'flat',\n highlights: 0,\n shape: 'linesIrregular',\n distortion: 1,\n shift: 0,\n blur: 1,\n edges: 0.5,\n stretch: 1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n grainMixer: 0.1,\n grainOverlay: 0.1,\n },\n};\n\nexport const foldsPreset: FlutedGlassPreset = {\n name: 'Folds',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n colorBack: '#00000000',\n colorShadow: '#000000',\n colorHighlight: '#ffffff',\n shadows: 0.4,\n size: 0.4,\n angle: 0,\n distortionShape: 'cascade',\n highlights: 0,\n shape: 'lines',\n distortion: 0.75,\n shift: 0,\n blur: 0.25,\n edges: 0.5,\n stretch: 0,\n margin: 0.2,\n marginLeft: 0.2,\n marginRight: 0.2,\n marginTop: 0.2,\n marginBottom: 0.2,\n grainMixer: 0,\n grainOverlay: 0,\n },\n};\n\nexport const flutedGlassPresets: FlutedGlassPreset[] = [defaultPreset, abstractPreset, wavesPreset, foldsPreset];\n\nexport const FlutedGlass: React.FC<FlutedGlassProps> = memo(function FlutedGlassImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colorShadow = defaultPreset.params.colorShadow,\n colorHighlight = defaultPreset.params.colorHighlight,\n image = '',\n shadows = defaultPreset.params.shadows,\n angle = defaultPreset.params.angle,\n distortion = defaultPreset.params.distortion,\n distortionShape = defaultPreset.params.distortionShape,\n highlights = defaultPreset.params.highlights,\n shape = defaultPreset.params.shape,\n shift = defaultPreset.params.shift,\n blur = defaultPreset.params.blur,\n edges = defaultPreset.params.edges,\n margin,\n marginLeft = margin ?? defaultPreset.params.marginLeft,\n marginRight = margin ?? defaultPreset.params.marginRight,\n marginTop = margin ?? defaultPreset.params.marginTop,\n marginBottom = margin ?? defaultPreset.params.marginBottom,\n grainMixer = defaultPreset.params.grainMixer,\n grainOverlay = defaultPreset.params.grainOverlay,\n stretch = defaultPreset.params.stretch,\n\n // integer `count` was deprecated in favor of the normalized `size` param\n count,\n size = count === undefined ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,\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}: FlutedGlassProps) {\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorShadow: getShaderColorFromString(colorShadow),\n u_colorHighlight: getShaderColorFromString(colorHighlight),\n u_shadows: shadows,\n u_size: size,\n u_angle: angle,\n u_distortion: distortion,\n u_shift: shift,\n u_blur: blur,\n u_edges: edges,\n u_stretch: stretch,\n u_distortionShape: GlassDistortionShapes[distortionShape],\n u_highlights: highlights,\n u_shape: GlassGridShapes[shape],\n u_marginLeft: marginLeft,\n u_marginRight: marginRight,\n u_marginTop: marginTop,\n u_marginBottom: marginBottom,\n u_grainMixer: grainMixer,\n u_grainOverlay: grainOverlay,\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 FlutedGlassUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={flutedGlassFragmentShader}\n mipmaps={['u_image']}\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.
|
|
3
|
+
"version": "0.0.63",
|
|
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.63"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "19.1.0"
|