@paper-design/shaders-react 0.0.53 → 0.0.55
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/dist/shader-mount.js +6 -1
- package/dist/shader-mount.js.map +2 -2
- package/dist/shaders/dithering.d.ts +2 -0
- package/dist/shaders/dithering.js +9 -8
- package/dist/shaders/dithering.js.map +2 -2
- package/dist/shaders/fluted-glass.d.ts +2 -0
- package/dist/shaders/fluted-glass.js +26 -19
- package/dist/shaders/fluted-glass.js.map +2 -2
- package/dist/shaders/heatmap.js +4 -3
- package/dist/shaders/heatmap.js.map +2 -2
- package/dist/shaders/image-dithering.d.ts +2 -0
- package/dist/shaders/image-dithering.js +8 -7
- package/dist/shaders/image-dithering.js.map +2 -2
- package/dist/shaders/mesh-gradient.js +16 -4
- package/dist/shaders/mesh-gradient.js.map +2 -2
- package/dist/shaders/paper-texture.d.ts +8 -0
- package/dist/shaders/paper-texture.js +30 -25
- package/dist/shaders/paper-texture.js.map +2 -2
- package/dist/shaders/pulsing-border.js +56 -21
- package/dist/shaders/pulsing-border.js.map +2 -2
- package/dist/shaders/static-mesh-gradient.js +0 -2
- package/dist/shaders/static-mesh-gradient.js.map +2 -2
- package/dist/shaders/static-radial-gradient.js +0 -2
- package/dist/shaders/static-radial-gradient.js.map +2 -2
- package/dist/shaders/water.d.ts +2 -0
- package/dist/shaders/water.js +10 -7
- package/dist/shaders/water.js.map +2 -2
- package/package.json +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/mesh-gradient.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 defaultObjectSizing,\n getShaderColorFromString,\n meshGradientFragmentShader,\n ShaderFitOptions,\n type MeshGradientParams,\n type MeshGradientUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {}\n\ntype MeshGradientPreset = ShaderPreset<MeshGradientParams>;\n\nexport const defaultPreset: MeshGradientPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['#e0eaff', '#241d9a', '#f75092', '#9f50d3'],\n distortion: 0.8,\n swirl: 0.1,\n },\n};\n\nexport const purplePreset: MeshGradientPreset = {\n name: 'Purple',\n params: {\n ...defaultObjectSizing,\n speed: 0.6,\n frame: 0,\n colors: ['#aaa7d7', '#3c2b8e'],\n distortion: 1,\n swirl: 1,\n },\n};\n\nexport const beachPreset: MeshGradientPreset = {\n name: 'Beach',\n params: {\n ...defaultObjectSizing,\n speed: 0.1,\n frame: 0,\n colors: ['#bcecf6', '#00aaff', '#00f7ff', '#ffd447'],\n distortion: 0.8,\n swirl: 0.35,\n },\n};\n\nexport const inkPreset: MeshGradientPreset = {\n name: 'Ink',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['#ffffff', '#000000'],\n distortion: 1,\n swirl: 0.2,\n rotation: 90,\n },\n};\n\nexport const meshGradientPresets: MeshGradientPreset[] = [defaultPreset, inkPreset, purplePreset, beachPreset];\n\nexport const MeshGradient: React.FC<MeshGradientProps> = memo(function MeshGradientImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n distortion = defaultPreset.params.distortion,\n swirl = defaultPreset.params.swirl,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\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}: MeshGradientProps) {\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_distortion: distortion,\n u_swirl: swirl,\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 MeshGradientUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={meshGradientFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n meshGradientFragmentShader,\n ShaderFitOptions,\n type MeshGradientParams,\n type MeshGradientUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {}\n\ntype MeshGradientPreset = ShaderPreset<MeshGradientParams>;\n\nexport const defaultPreset: MeshGradientPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['#e0eaff', '#241d9a', '#f75092', '#9f50d3'],\n distortion: 0.8,\n swirl: 0.1,\n grainMixer: 0,\n grainOverlay: 0,\n },\n};\n\nexport const purplePreset: MeshGradientPreset = {\n name: 'Purple',\n params: {\n ...defaultObjectSizing,\n speed: 0.6,\n frame: 0,\n colors: ['#aaa7d7', '#3c2b8e'],\n distortion: 1,\n swirl: 1,\n grainMixer: 0,\n grainOverlay: 0,\n },\n};\n\nexport const beachPreset: MeshGradientPreset = {\n name: 'Beach',\n params: {\n ...defaultObjectSizing,\n speed: 0.1,\n frame: 0,\n colors: ['#bcecf6', '#00aaff', '#00f7ff', '#ffd447'],\n distortion: 0.8,\n swirl: 0.35,\n grainMixer: 0,\n grainOverlay: 0,\n },\n};\n\nexport const inkPreset: MeshGradientPreset = {\n name: 'Ink',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['#ffffff', '#000000'],\n distortion: 1,\n swirl: 0.2,\n rotation: 90,\n grainMixer: 0,\n grainOverlay: 0,\n },\n};\n\nexport const meshGradientPresets: MeshGradientPreset[] = [defaultPreset, inkPreset, purplePreset, beachPreset];\n\nexport const MeshGradient: React.FC<MeshGradientProps> = memo(function MeshGradientImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n distortion = defaultPreset.params.distortion,\n swirl = defaultPreset.params.swirl,\n grainMixer = defaultPreset.params.grainMixer,\n grainOverlay = defaultPreset.params.grainOverlay,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\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}: MeshGradientProps) {\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_distortion: distortion,\n u_swirl: swirl,\n u_grainMixer: grainMixer,\n u_grainOverlay: grainOverlay,\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 MeshGradientUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={meshGradientFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AA6GH;AAvGG,MAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,eAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,SAAS;AAAA,IAC7B,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,cAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,YAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,SAAS;AAAA,IAC7B,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,sBAA4C,CAAC,eAAe,WAAW,cAAc,WAAW;AAEtG,MAAM,eAA4C,KAAK,SAAS,iBAAiB;AAAA;AAAA,EAEtF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,aAAa,cAAc,OAAO;AAAA,EAClC,QAAQ,cAAc,OAAO;AAAA,EAC7B,aAAa,cAAc,OAAO;AAAA,EAClC,eAAe,cAAc,OAAO;AAAA;AAAA,EAGpC,MAAM,cAAc,OAAO;AAAA,EAC3B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAsB;AACpB,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,cAAc;AAAA,IACd,gBAAgB;AAAA;AAAA,IAGhB,OAAO,iBAAiB,GAAG;AAAA,IAC3B,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type ImageShaderPreset, type PaperTextureParams } from '@paper-design/shaders';
|
|
3
3
|
export interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {
|
|
4
|
+
/** @deprecated use `fiberSize` instead */
|
|
5
|
+
fiberScale?: number;
|
|
6
|
+
/** @deprecated use `crumpleSize` instead */
|
|
7
|
+
crumplesScale?: number;
|
|
8
|
+
/** @deprecated use `foldCount` instead */
|
|
9
|
+
foldsNumber?: number;
|
|
10
|
+
/** @deprecated use `fade` instead */
|
|
11
|
+
blur?: number;
|
|
4
12
|
}
|
|
5
13
|
type PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;
|
|
6
14
|
export declare const defaultPreset: PaperTexturePreset;
|
|
@@ -27,12 +27,12 @@ const defaultPreset = {
|
|
|
27
27
|
contrast: 0.3,
|
|
28
28
|
roughness: 0.4,
|
|
29
29
|
fiber: 0.3,
|
|
30
|
-
|
|
30
|
+
fiberSize: 0.2,
|
|
31
31
|
crumples: 0.3,
|
|
32
|
-
|
|
32
|
+
crumpleSize: 0.35,
|
|
33
33
|
folds: 0.65,
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
foldCount: 5,
|
|
35
|
+
fade: 0,
|
|
36
36
|
drops: 0.2,
|
|
37
37
|
seed: 5.8
|
|
38
38
|
}
|
|
@@ -50,12 +50,12 @@ const abstractPreset = {
|
|
|
50
50
|
contrast: 0.85,
|
|
51
51
|
roughness: 0,
|
|
52
52
|
fiber: 0.1,
|
|
53
|
-
|
|
53
|
+
fiberSize: 0.2,
|
|
54
54
|
crumples: 0,
|
|
55
|
-
|
|
55
|
+
crumpleSize: 0.3,
|
|
56
56
|
folds: 1,
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
foldCount: 3,
|
|
58
|
+
fade: 0,
|
|
59
59
|
drops: 0.2,
|
|
60
60
|
seed: 2.2
|
|
61
61
|
}
|
|
@@ -73,12 +73,12 @@ const cardboardPreset = {
|
|
|
73
73
|
contrast: 0.4,
|
|
74
74
|
roughness: 0,
|
|
75
75
|
fiber: 0.35,
|
|
76
|
-
|
|
76
|
+
fiberSize: 0.14,
|
|
77
77
|
crumples: 0.7,
|
|
78
|
-
|
|
78
|
+
crumpleSize: 0.1,
|
|
79
79
|
folds: 0,
|
|
80
|
-
|
|
81
|
-
|
|
80
|
+
foldCount: 1,
|
|
81
|
+
fade: 0,
|
|
82
82
|
drops: 0.1,
|
|
83
83
|
seed: 1.6
|
|
84
84
|
}
|
|
@@ -96,12 +96,12 @@ const detailsPreset = {
|
|
|
96
96
|
contrast: 0,
|
|
97
97
|
roughness: 1,
|
|
98
98
|
fiber: 0.27,
|
|
99
|
-
|
|
99
|
+
fiberSize: 0.22,
|
|
100
100
|
crumples: 1,
|
|
101
|
-
|
|
101
|
+
crumpleSize: 0.5,
|
|
102
102
|
folds: 1,
|
|
103
|
-
|
|
104
|
-
|
|
103
|
+
foldCount: 15,
|
|
104
|
+
fade: 0,
|
|
105
105
|
drops: 0,
|
|
106
106
|
seed: 6
|
|
107
107
|
}
|
|
@@ -118,18 +118,23 @@ const PaperTexture = memo(function PaperTextureImpl({
|
|
|
118
118
|
frame = defaultPreset.params.frame,
|
|
119
119
|
colorFront = defaultPreset.params.colorFront,
|
|
120
120
|
colorBack = defaultPreset.params.colorBack,
|
|
121
|
-
image = "
|
|
121
|
+
image = "",
|
|
122
122
|
contrast = defaultPreset.params.contrast,
|
|
123
123
|
roughness = defaultPreset.params.roughness,
|
|
124
124
|
fiber = defaultPreset.params.fiber,
|
|
125
|
-
fiberScale = defaultPreset.params.fiberScale,
|
|
126
125
|
crumples = defaultPreset.params.crumples,
|
|
127
|
-
crumplesScale = defaultPreset.params.crumplesScale,
|
|
128
|
-
foldsNumber = defaultPreset.params.foldsNumber,
|
|
129
126
|
folds = defaultPreset.params.folds,
|
|
130
|
-
blur = defaultPreset.params.blur,
|
|
131
127
|
drops = defaultPreset.params.drops,
|
|
132
128
|
seed = defaultPreset.params.seed,
|
|
129
|
+
// Reworked props
|
|
130
|
+
fiberScale,
|
|
131
|
+
fiberSize = fiberScale === void 0 ? defaultPreset.params.fiberSize : 0.2 / fiberScale,
|
|
132
|
+
crumplesScale,
|
|
133
|
+
crumpleSize = crumplesScale === void 0 ? defaultPreset.params.crumpleSize : 0.2 / crumplesScale,
|
|
134
|
+
blur,
|
|
135
|
+
fade = blur === void 0 ? defaultPreset.params.fade : blur,
|
|
136
|
+
foldsNumber,
|
|
137
|
+
foldCount = foldsNumber === void 0 ? defaultPreset.params.foldCount : foldsNumber,
|
|
133
138
|
// Sizing props
|
|
134
139
|
fit = defaultPreset.params.fit,
|
|
135
140
|
scale = defaultPreset.params.scale,
|
|
@@ -151,12 +156,12 @@ const PaperTexture = memo(function PaperTextureImpl({
|
|
|
151
156
|
u_contrast: contrast,
|
|
152
157
|
u_roughness: roughness,
|
|
153
158
|
u_fiber: fiber,
|
|
154
|
-
|
|
159
|
+
u_fiberSize: fiberSize,
|
|
155
160
|
u_crumples: crumples,
|
|
156
|
-
|
|
157
|
-
|
|
161
|
+
u_crumpleSize: crumpleSize,
|
|
162
|
+
u_foldCount: foldCount,
|
|
158
163
|
u_folds: folds,
|
|
159
|
-
|
|
164
|
+
u_fade: fade,
|
|
160
165
|
u_drops: drops,
|
|
161
166
|
u_seed: seed,
|
|
162
167
|
...noiseTexture,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/paper-texture.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 defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n paperTextureFragmentShader,\n ShaderFitOptions,\n type ImageShaderPreset,\n type PaperTextureParams,\n type PaperTextureUniforms,\n} from '@paper-design/shaders';\n\nexport interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {}\n\ntype PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;\n\nexport const defaultPreset: PaperTexturePreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n scale: 0.6,\n speed: 0,\n frame: 0,\n colorFront: '#9fadbc',\n colorBack: '#ffffff',\n contrast: 0.3,\n roughness: 0.4,\n fiber: 0.3,\n
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n paperTextureFragmentShader,\n ShaderFitOptions,\n type ImageShaderPreset,\n type PaperTextureParams,\n type PaperTextureUniforms,\n} from '@paper-design/shaders';\n\nexport interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {\n /** @deprecated use `fiberSize` instead */\n fiberScale?: number;\n /** @deprecated use `crumpleSize` instead */\n crumplesScale?: number;\n /** @deprecated use `foldCount` instead */\n foldsNumber?: number;\n /** @deprecated use `fade` instead */\n blur?: number;\n}\n\ntype PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;\n\nexport const defaultPreset: PaperTexturePreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n scale: 0.6,\n speed: 0,\n frame: 0,\n colorFront: '#9fadbc',\n colorBack: '#ffffff',\n contrast: 0.3,\n roughness: 0.4,\n fiber: 0.3,\n fiberSize: 0.2,\n crumples: 0.3,\n crumpleSize: 0.35,\n folds: 0.65,\n foldCount: 5,\n fade: 0,\n drops: 0.2,\n seed: 5.8,\n },\n};\n\nexport const abstractPreset: PaperTexturePreset = {\n name: 'Abstract',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n scale: 0.6,\n colorFront: '#00eeff',\n colorBack: '#ff0a81',\n contrast: 0.85,\n roughness: 0,\n fiber: 0.1,\n fiberSize: 0.2,\n crumples: 0,\n crumpleSize: 0.3,\n folds: 1,\n foldCount: 3,\n fade: 0,\n drops: 0.2,\n seed: 2.2,\n },\n};\n\nexport const cardboardPreset: PaperTexturePreset = {\n name: 'Cardboard',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n scale: 0.6,\n colorFront: '#c7b89e',\n colorBack: '#999180',\n contrast: 0.4,\n roughness: 0,\n fiber: 0.35,\n fiberSize: 0.14,\n crumples: 0.7,\n crumpleSize: 0.1,\n folds: 0,\n foldCount: 1,\n fade: 0,\n drops: 0.1,\n seed: 1.6,\n },\n};\n\nexport const detailsPreset: PaperTexturePreset = {\n name: 'Details',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n fit: 'cover',\n scale: 3,\n colorFront: '#00000000',\n colorBack: '#00000000',\n contrast: 0,\n roughness: 1,\n fiber: 0.27,\n fiberSize: 0.22,\n crumples: 1,\n crumpleSize: 0.5,\n folds: 1,\n foldCount: 15,\n fade: 0,\n drops: 0,\n seed: 6,\n },\n};\n\nexport const paperTexturePresets: PaperTexturePreset[] = [\n defaultPreset,\n cardboardPreset,\n abstractPreset,\n detailsPreset,\n] as const;\n\nexport const PaperTexture: React.FC<PaperTextureProps> = memo(function PaperTextureImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorBack = defaultPreset.params.colorBack,\n image = '',\n contrast = defaultPreset.params.contrast,\n roughness = defaultPreset.params.roughness,\n fiber = defaultPreset.params.fiber,\n crumples = defaultPreset.params.crumples,\n folds = defaultPreset.params.folds,\n drops = defaultPreset.params.drops,\n seed = defaultPreset.params.seed,\n\n // Reworked props\n fiberScale,\n fiberSize = fiberScale === undefined ? defaultPreset.params.fiberSize : 0.2 / fiberScale,\n crumplesScale,\n crumpleSize = crumplesScale === undefined ? defaultPreset.params.crumpleSize : 0.2 / crumplesScale,\n blur,\n fade = blur === undefined ? defaultPreset.params.fade : blur,\n foldsNumber,\n foldCount = foldsNumber === undefined ? defaultPreset.params.foldCount : foldsNumber,\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}: PaperTextureProps) {\n const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\n\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_colorFront: getShaderColorFromString(colorFront),\n u_colorBack: getShaderColorFromString(colorBack),\n u_contrast: contrast,\n u_roughness: roughness,\n u_fiber: fiber,\n u_fiberSize: fiberSize,\n u_crumples: crumples,\n u_crumpleSize: crumpleSize,\n u_foldCount: foldCount,\n u_folds: folds,\n u_fade: fade,\n u_drops: drops,\n u_seed: seed,\n ...noiseTexture,\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 PaperTextureUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={paperTextureFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AA4LH;AA7KG,MAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,iBAAqC;AAAA,EAChD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,kBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,sBAA4C;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,eAA4C,KAAK,SAAS,iBAAiB;AAAA;AAAA,EAEtF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,aAAa,cAAc,OAAO;AAAA,EAClC,YAAY,cAAc,OAAO;AAAA,EACjC,QAAQ;AAAA,EACR,WAAW,cAAc,OAAO;AAAA,EAChC,YAAY,cAAc,OAAO;AAAA,EACjC,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,OAAO,cAAc,OAAO;AAAA;AAAA,EAG5B;AAAA,EACA,YAAY,eAAe,SAAY,cAAc,OAAO,YAAY,MAAM;AAAA,EAC9E;AAAA,EACA,cAAc,kBAAkB,SAAY,cAAc,OAAO,cAAc,MAAM;AAAA,EACrF;AAAA,EACA,OAAO,SAAS,SAAY,cAAc,OAAO,OAAO;AAAA,EACxD;AAAA,EACA,YAAY,gBAAgB,SAAY,cAAc,OAAO,YAAY;AAAA;AAAA,EAGzE,MAAM,cAAc,OAAO;AAAA,EAC3B,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAsB;AACpB,QAAM,eAAe,OAAO,WAAW,eAAe,EAAE,gBAAgB,sBAAsB,EAAE;AAEhG,QAAM,WAAW;AAAA;AAAA,IAEf,SAAS;AAAA,IACT,cAAc,yBAAyB,UAAU;AAAA,IACjD,aAAa,yBAAyB,SAAS;AAAA,IAC/C,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,aAAa;AAAA,IACb,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA;AAAA,IAGH,OAAO,iBAAiB,GAAG;AAAA,IAC3B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -13,25 +13,32 @@ import {
|
|
|
13
13
|
pulsingBorderFragmentShader,
|
|
14
14
|
ShaderFitOptions
|
|
15
15
|
} from "@paper-design/shaders";
|
|
16
|
+
import { PulsingBorderAspectRatios } from "@paper-design/shaders";
|
|
16
17
|
import { jsx } from "react/jsx-runtime";
|
|
17
18
|
const defaultPreset = {
|
|
18
19
|
name: "Default",
|
|
19
20
|
params: {
|
|
20
21
|
...defaultObjectSizing,
|
|
21
|
-
scale: 0.6,
|
|
22
22
|
speed: 1,
|
|
23
23
|
frame: 0,
|
|
24
|
+
scale: 0.6,
|
|
24
25
|
colorBack: "#000000",
|
|
25
26
|
colors: ["#0dc1fd", "#d915ef", "#ff3f2ecc"],
|
|
26
27
|
roundness: 0.25,
|
|
27
|
-
thickness: 0.
|
|
28
|
+
thickness: 0.1,
|
|
29
|
+
margin: 0,
|
|
30
|
+
marginLeft: 0,
|
|
31
|
+
marginRight: 0,
|
|
32
|
+
marginTop: 0,
|
|
33
|
+
marginBottom: 0,
|
|
34
|
+
aspectRatio: "auto",
|
|
28
35
|
softness: 0.75,
|
|
29
36
|
intensity: 0.2,
|
|
30
|
-
bloom: 0.
|
|
31
|
-
spots:
|
|
32
|
-
spotSize: 0.
|
|
33
|
-
pulse: 0.
|
|
34
|
-
smoke: 0.
|
|
37
|
+
bloom: 0.25,
|
|
38
|
+
spots: 5,
|
|
39
|
+
spotSize: 0.5,
|
|
40
|
+
pulse: 0.25,
|
|
41
|
+
smoke: 0.3,
|
|
35
42
|
smokeSize: 0.6
|
|
36
43
|
}
|
|
37
44
|
};
|
|
@@ -39,23 +46,27 @@ const circlePreset = {
|
|
|
39
46
|
name: "Circle",
|
|
40
47
|
params: {
|
|
41
48
|
...defaultObjectSizing,
|
|
42
|
-
|
|
43
|
-
worldHeight: 400,
|
|
49
|
+
aspectRatio: "square",
|
|
44
50
|
scale: 0.6,
|
|
45
51
|
speed: 1,
|
|
46
52
|
frame: 0,
|
|
47
53
|
colorBack: "#000000",
|
|
48
54
|
colors: ["#0dc1fd", "#d915ef", "#ff3f2ecc"],
|
|
49
55
|
roundness: 1,
|
|
50
|
-
|
|
56
|
+
margin: 0,
|
|
57
|
+
marginLeft: 0,
|
|
58
|
+
marginRight: 0,
|
|
59
|
+
marginTop: 0,
|
|
60
|
+
marginBottom: 0,
|
|
61
|
+
thickness: 0,
|
|
51
62
|
softness: 0.75,
|
|
52
63
|
intensity: 0.2,
|
|
53
64
|
bloom: 0.45,
|
|
54
65
|
spots: 3,
|
|
55
66
|
spotSize: 0.4,
|
|
56
67
|
pulse: 0.5,
|
|
57
|
-
smoke:
|
|
58
|
-
smokeSize: 0
|
|
68
|
+
smoke: 1,
|
|
69
|
+
smokeSize: 0
|
|
59
70
|
}
|
|
60
71
|
};
|
|
61
72
|
const northernLightsPreset = {
|
|
@@ -63,19 +74,26 @@ const northernLightsPreset = {
|
|
|
63
74
|
params: {
|
|
64
75
|
...defaultObjectSizing,
|
|
65
76
|
speed: 0.18,
|
|
77
|
+
scale: 1.1,
|
|
66
78
|
frame: 0,
|
|
67
|
-
colors: ["#
|
|
79
|
+
colors: ["#4c4794", "#774a7d", "#12694a", "#0aff78", "#4733cc"],
|
|
68
80
|
colorBack: "#0c182c",
|
|
69
81
|
roundness: 0,
|
|
70
82
|
thickness: 1,
|
|
71
83
|
softness: 1,
|
|
72
|
-
|
|
73
|
-
|
|
84
|
+
margin: 0,
|
|
85
|
+
marginLeft: 0,
|
|
86
|
+
marginRight: 0,
|
|
87
|
+
marginTop: 0,
|
|
88
|
+
marginBottom: 0,
|
|
89
|
+
aspectRatio: "auto",
|
|
90
|
+
intensity: 0.1,
|
|
91
|
+
bloom: 0.2,
|
|
74
92
|
spots: 4,
|
|
75
|
-
spotSize: 0,
|
|
93
|
+
spotSize: 0.25,
|
|
76
94
|
pulse: 0,
|
|
77
|
-
smoke: 0.
|
|
78
|
-
smokeSize: 0.
|
|
95
|
+
smoke: 0.32,
|
|
96
|
+
smokeSize: 0.5
|
|
79
97
|
}
|
|
80
98
|
};
|
|
81
99
|
const solidLinePreset = {
|
|
@@ -84,15 +102,21 @@ const solidLinePreset = {
|
|
|
84
102
|
...defaultObjectSizing,
|
|
85
103
|
speed: 1,
|
|
86
104
|
frame: 0,
|
|
87
|
-
colors: ["#
|
|
105
|
+
colors: ["#81ADEC"],
|
|
88
106
|
colorBack: "#00000000",
|
|
89
107
|
roundness: 0,
|
|
90
|
-
thickness: 0.
|
|
108
|
+
thickness: 0.05,
|
|
109
|
+
margin: 0,
|
|
110
|
+
marginLeft: 0,
|
|
111
|
+
marginRight: 0,
|
|
112
|
+
marginTop: 0,
|
|
113
|
+
marginBottom: 0,
|
|
114
|
+
aspectRatio: "auto",
|
|
91
115
|
softness: 0,
|
|
92
116
|
intensity: 0,
|
|
93
117
|
bloom: 0.15,
|
|
94
118
|
spots: 4,
|
|
95
|
-
spotSize:
|
|
119
|
+
spotSize: 1,
|
|
96
120
|
pulse: 0,
|
|
97
121
|
smoke: 0,
|
|
98
122
|
smokeSize: 0
|
|
@@ -112,6 +136,7 @@ const PulsingBorder = memo(function PulsingBorderImpl({
|
|
|
112
136
|
colorBack = defaultPreset.params.colorBack,
|
|
113
137
|
roundness = defaultPreset.params.roundness,
|
|
114
138
|
thickness = defaultPreset.params.thickness,
|
|
139
|
+
aspectRatio = defaultPreset.params.aspectRatio,
|
|
115
140
|
softness = defaultPreset.params.softness,
|
|
116
141
|
bloom = defaultPreset.params.bloom,
|
|
117
142
|
intensity = defaultPreset.params.intensity,
|
|
@@ -120,6 +145,11 @@ const PulsingBorder = memo(function PulsingBorderImpl({
|
|
|
120
145
|
pulse = defaultPreset.params.pulse,
|
|
121
146
|
smoke = defaultPreset.params.smoke,
|
|
122
147
|
smokeSize = defaultPreset.params.smokeSize,
|
|
148
|
+
margin,
|
|
149
|
+
marginLeft = margin ?? defaultPreset.params.marginLeft,
|
|
150
|
+
marginRight = margin ?? defaultPreset.params.marginRight,
|
|
151
|
+
marginTop = margin ?? defaultPreset.params.marginTop,
|
|
152
|
+
marginBottom = margin ?? defaultPreset.params.marginBottom,
|
|
123
153
|
// Sizing props
|
|
124
154
|
fit = defaultPreset.params.fit,
|
|
125
155
|
rotation = defaultPreset.params.rotation,
|
|
@@ -139,6 +169,11 @@ const PulsingBorder = memo(function PulsingBorderImpl({
|
|
|
139
169
|
u_colorsCount: colors.length,
|
|
140
170
|
u_roundness: roundness,
|
|
141
171
|
u_thickness: thickness,
|
|
172
|
+
u_marginLeft: marginLeft,
|
|
173
|
+
u_marginRight: marginRight,
|
|
174
|
+
u_marginTop: marginTop,
|
|
175
|
+
u_marginBottom: marginBottom,
|
|
176
|
+
u_aspectRatio: PulsingBorderAspectRatios[aspectRatio],
|
|
142
177
|
u_softness: softness,
|
|
143
178
|
u_intensity: intensity,
|
|
144
179
|
u_bloom: bloom,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/pulsing-border.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 defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n pulsingBorderFragmentShader,\n ShaderFitOptions,\n type PulsingBorderParams,\n type PulsingBorderUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface PulsingBorderProps extends ShaderComponentProps, PulsingBorderParams {}\n\ntype PulsingBorderPreset = ShaderPreset<PulsingBorderParams>;\n\nexport const defaultPreset: PulsingBorderPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n pulsingBorderFragmentShader,\n ShaderFitOptions,\n type PulsingBorderParams,\n type PulsingBorderUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\nimport { PulsingBorderAspectRatios } from '@paper-design/shaders';\n\nexport interface PulsingBorderProps extends ShaderComponentProps, PulsingBorderParams {}\n\ntype PulsingBorderPreset = ShaderPreset<PulsingBorderParams>;\n\nexport const defaultPreset: PulsingBorderPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n scale: 0.6,\n colorBack: '#000000',\n colors: ['#0dc1fd', '#d915ef', '#ff3f2ecc'],\n roundness: 0.25,\n thickness: 0.1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n aspectRatio: 'auto',\n softness: 0.75,\n intensity: 0.2,\n bloom: 0.25,\n spots: 5,\n spotSize: 0.5,\n pulse: 0.25,\n smoke: 0.3,\n smokeSize: 0.6,\n },\n};\n\nexport const circlePreset: PulsingBorderPreset = {\n name: 'Circle',\n params: {\n ...defaultObjectSizing,\n aspectRatio: 'square',\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#0dc1fd', '#d915ef', '#ff3f2ecc'],\n roundness: 1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n thickness: 0,\n softness: 0.75,\n intensity: 0.2,\n bloom: 0.45,\n spots: 3,\n spotSize: 0.4,\n pulse: 0.5,\n smoke: 1,\n smokeSize: 0,\n },\n};\n\nexport const northernLightsPreset: PulsingBorderPreset = {\n name: 'Northern lights',\n params: {\n ...defaultObjectSizing,\n speed: 0.18,\n scale: 1.1,\n frame: 0,\n colors: ['#4c4794', '#774a7d', '#12694a', '#0aff78', '#4733cc'],\n colorBack: '#0c182c',\n roundness: 0,\n thickness: 1,\n softness: 1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n aspectRatio: 'auto',\n intensity: 0.1,\n bloom: 0.2,\n spots: 4,\n spotSize: 0.25,\n pulse: 0,\n smoke: 0.32,\n smokeSize: 0.5,\n },\n};\n\nexport const solidLinePreset: PulsingBorderPreset = {\n name: 'Solid line',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['#81ADEC'],\n colorBack: '#00000000',\n roundness: 0,\n thickness: 0.05,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n aspectRatio: 'auto',\n softness: 0.0,\n intensity: 0.0,\n bloom: 0.15,\n spots: 4,\n spotSize: 1,\n pulse: 0,\n smoke: 0,\n smokeSize: 0,\n },\n};\n\nexport const pulsingBorderPresets: PulsingBorderPreset[] = [\n defaultPreset,\n circlePreset,\n northernLightsPreset,\n solidLinePreset,\n];\n\nexport const PulsingBorder: React.FC<PulsingBorderProps> = memo(function PulsingBorderImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n colorBack = defaultPreset.params.colorBack,\n roundness = defaultPreset.params.roundness,\n thickness = defaultPreset.params.thickness,\n aspectRatio = defaultPreset.params.aspectRatio,\n softness = defaultPreset.params.softness,\n bloom = defaultPreset.params.bloom,\n intensity = defaultPreset.params.intensity,\n spots = defaultPreset.params.spots,\n spotSize = defaultPreset.params.spotSize,\n pulse = defaultPreset.params.pulse,\n smoke = defaultPreset.params.smoke,\n smokeSize = defaultPreset.params.smokeSize,\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\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\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}: PulsingBorderProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_roundness: roundness,\n u_thickness: thickness,\n u_marginLeft: marginLeft,\n u_marginRight: marginRight,\n u_marginTop: marginTop,\n u_marginBottom: marginBottom,\n u_aspectRatio: PulsingBorderAspectRatios[aspectRatio],\n u_softness: softness,\n u_intensity: intensity,\n u_bloom: bloom,\n u_spots: spots,\n u_spotSize: spotSize,\n u_pulse: pulse,\n u_smoke: smoke,\n u_smokeSize: smokeSize,\n u_noiseTexture: getShaderNoiseTexture(),\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 PulsingBorderUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={pulsingBorderFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,7 +9,6 @@ import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
|
9
9
|
import {
|
|
10
10
|
defaultObjectSizing,
|
|
11
11
|
getShaderColorFromString,
|
|
12
|
-
getShaderNoiseTexture,
|
|
13
12
|
staticMeshGradientFragmentShader,
|
|
14
13
|
ShaderFitOptions
|
|
15
14
|
} from "@paper-design/shaders";
|
|
@@ -126,7 +125,6 @@ const StaticMeshGradient = memo(function StaticMeshGradientImpl({
|
|
|
126
125
|
u_mixing: mixing,
|
|
127
126
|
u_grainMixer: grainMixer,
|
|
128
127
|
u_grainOverlay: grainOverlay,
|
|
129
|
-
u_noiseTexture: getShaderNoiseTexture(),
|
|
130
128
|
// Sizing uniforms
|
|
131
129
|
u_fit: ShaderFitOptions[fit],
|
|
132
130
|
u_rotation: rotation,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/static-mesh-gradient.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 defaultObjectSizing,\n getShaderColorFromString,\n
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n staticMeshGradientFragmentShader,\n ShaderFitOptions,\n type StaticMeshGradientParams,\n type StaticMeshGradientUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface StaticMeshGradientProps extends ShaderComponentProps, StaticMeshGradientParams {}\n\ntype StaticMeshGradientPreset = ShaderPreset<StaticMeshGradientParams>;\n\nexport const defaultPreset: StaticMeshGradientPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n rotation: 270,\n speed: 0,\n frame: 0,\n colors: ['#ffad0a', '#6200ff', '#e2a3ff', '#ff99fd'],\n positions: 2,\n waveX: 1.0,\n waveXShift: 0.6,\n waveY: 1.0,\n waveYShift: 0.21,\n mixing: 0.93,\n grainMixer: 0.0,\n grainOverlay: 0.0,\n },\n};\n\nexport const seaPreset: StaticMeshGradientPreset = {\n name: 'Sea',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n colors: ['#013b65', '#03738c', '#a3d3ff', '#f2faef'],\n positions: 0,\n waveX: 0.53,\n waveXShift: 0.0,\n waveY: 0.95,\n waveYShift: 0.64,\n mixing: 0.5,\n grainMixer: 0.0,\n grainOverlay: 0.0,\n },\n};\n\nexport const sixtiesPreset: StaticMeshGradientPreset = {\n name: '1960s',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n colors: ['#000000', '#082400', '#b1aa91', '#8e8c15'],\n positions: 42,\n waveX: 0.45,\n waveXShift: 0.0,\n waveY: 1.0,\n waveYShift: 0.0,\n mixing: 0.0,\n grainMixer: 0.37,\n grainOverlay: 0.78,\n },\n};\n\nexport const sunsetPreset: StaticMeshGradientPreset = {\n name: 'Sunset',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n colors: ['#264653', '#9c2b2b', '#f4a261', '#ffffff'],\n positions: 0,\n waveX: 0.6,\n waveXShift: 0.7,\n waveY: 0.7,\n waveYShift: 0.7,\n mixing: 0.5,\n grainMixer: 0,\n grainOverlay: 0,\n },\n};\n\nexport const staticMeshGradientPresets: StaticMeshGradientPreset[] = [\n defaultPreset,\n sixtiesPreset,\n sunsetPreset,\n seaPreset,\n];\n\nexport const StaticMeshGradient: React.FC<StaticMeshGradientProps> = memo(function StaticMeshGradientImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n positions = defaultPreset.params.positions,\n waveX = defaultPreset.params.waveX,\n waveXShift = defaultPreset.params.waveXShift,\n waveY = defaultPreset.params.waveY,\n waveYShift = defaultPreset.params.waveYShift,\n mixing = defaultPreset.params.mixing,\n grainMixer = defaultPreset.params.grainMixer,\n grainOverlay = defaultPreset.params.grainOverlay,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\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}: StaticMeshGradientProps) {\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_positions: positions,\n u_waveX: waveX,\n u_waveXShift: waveXShift,\n u_waveY: waveY,\n u_waveYShift: waveYShift,\n u_mixing: mixing,\n u_grainMixer: grainMixer,\n u_grainOverlay: grainOverlay,\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 StaticMeshGradientUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={staticMeshGradientFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,7 +9,6 @@ import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
|
9
9
|
import {
|
|
10
10
|
defaultObjectSizing,
|
|
11
11
|
getShaderColorFromString,
|
|
12
|
-
getShaderNoiseTexture,
|
|
13
12
|
staticRadialGradientFragmentShader,
|
|
14
13
|
ShaderFitOptions
|
|
15
14
|
} from "@paper-design/shaders";
|
|
@@ -146,7 +145,6 @@ const StaticRadialGradient = memo(function StaticRadialGradientImpl({
|
|
|
146
145
|
u_distortionFreq: distortionFreq,
|
|
147
146
|
u_grainMixer: grainMixer,
|
|
148
147
|
u_grainOverlay: grainOverlay,
|
|
149
|
-
u_noiseTexture: getShaderNoiseTexture(),
|
|
150
148
|
// Sizing uniforms
|
|
151
149
|
u_fit: ShaderFitOptions[fit],
|
|
152
150
|
u_rotation: rotation,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/static-radial-gradient.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 defaultObjectSizing,\n getShaderColorFromString,\n
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n staticRadialGradientFragmentShader,\n ShaderFitOptions,\n type StaticRadialGradientParams,\n type StaticRadialGradientUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface StaticRadialGradientProps extends ShaderComponentProps, StaticRadialGradientParams {}\n\ntype StaticRadialGradientPreset = ShaderPreset<StaticRadialGradientParams>;\n\nexport const defaultPreset: StaticRadialGradientPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 0,\n frame: 0,\n colorBack: '#000000',\n colors: ['#00bbff', '#00ffe1', '#ffffff'],\n radius: 0.8,\n focalDistance: 0.99,\n focalAngle: 0,\n falloff: 0.24,\n mixing: 0.35,\n distortion: 0.0,\n distortionShift: 0,\n distortionFreq: 12,\n grainMixer: 0.0,\n grainOverlay: 0.0,\n },\n};\n\nexport const crossSectionPreset: StaticRadialGradientPreset = {\n name: 'Cross Section',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 0,\n frame: 0,\n colorBack: '#3d348b',\n colors: ['#7678ed', '#f7b801', '#f18701', '#37a066'],\n radius: 1,\n focalDistance: 0,\n focalAngle: 0,\n falloff: 0,\n mixing: 0,\n distortion: 1,\n distortionShift: 0,\n distortionFreq: 12,\n grainMixer: 0,\n grainOverlay: 0,\n },\n};\n\nexport const radialPreset: StaticRadialGradientPreset = {\n name: 'Radial',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 0,\n frame: 0,\n colorBack: '#264653',\n colors: ['#9c2b2b', '#f4a261', '#ffffff'],\n radius: 1,\n focalDistance: 0,\n focalAngle: 0,\n falloff: 0,\n mixing: 0.7,\n distortion: 0,\n distortionShift: 0,\n distortionFreq: 12,\n grainMixer: 0,\n grainOverlay: 0,\n },\n};\n\nexport const loFiPreset: StaticRadialGradientPreset = {\n name: 'Lo-Fi',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n colorBack: '#2e1f27',\n colors: ['#d72638', '#3f88c5', '#f49d37'],\n radius: 1,\n focalDistance: 0,\n focalAngle: 0,\n falloff: 0.9,\n mixing: 0.5,\n distortion: 0,\n distortionShift: 0,\n distortionFreq: 12,\n grainMixer: 1,\n grainOverlay: 0.5,\n },\n};\n\nexport const staticRadialGradientPresets: StaticRadialGradientPreset[] = [\n defaultPreset,\n loFiPreset,\n crossSectionPreset,\n radialPreset,\n];\n\nexport const StaticRadialGradient: React.FC<StaticRadialGradientProps> = memo(function StaticRadialGradientImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n radius = defaultPreset.params.radius,\n focalDistance = defaultPreset.params.focalDistance,\n focalAngle = defaultPreset.params.focalAngle,\n falloff = defaultPreset.params.falloff,\n grainMixer = defaultPreset.params.grainMixer,\n mixing = defaultPreset.params.mixing,\n distortion = defaultPreset.params.distortion,\n distortionShift = defaultPreset.params.distortionShift,\n distortionFreq = defaultPreset.params.distortionFreq,\n grainOverlay = defaultPreset.params.grainOverlay,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\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}: StaticRadialGradientProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_radius: radius,\n u_focalDistance: focalDistance,\n u_focalAngle: focalAngle,\n u_falloff: falloff,\n u_mixing: mixing,\n u_distortion: distortion,\n u_distortionShift: distortionShift,\n u_distortionFreq: distortionFreq,\n u_grainMixer: grainMixer,\n u_grainOverlay: grainOverlay,\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 StaticRadialGradientUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={staticRadialGradientFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/shaders/water.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type WaterParams, type ImageShaderPreset } from '@paper-design/shaders';
|
|
3
3
|
export interface WaterProps extends ShaderComponentProps, WaterParams {
|
|
4
|
+
/** @deprecated use `size` instead */
|
|
5
|
+
effectScale?: number;
|
|
4
6
|
}
|
|
5
7
|
type WaterPreset = ImageShaderPreset<WaterParams>;
|
|
6
8
|
export declare const defaultPreset: WaterPreset;
|
package/dist/shaders/water.js
CHANGED
|
@@ -27,7 +27,7 @@ const defaultPreset = {
|
|
|
27
27
|
edges: 0.8,
|
|
28
28
|
waves: 0.3,
|
|
29
29
|
caustic: 0.1,
|
|
30
|
-
|
|
30
|
+
size: 1
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
33
|
const abstractPreset = {
|
|
@@ -45,7 +45,7 @@ const abstractPreset = {
|
|
|
45
45
|
edges: 1,
|
|
46
46
|
waves: 1,
|
|
47
47
|
caustic: 0.4,
|
|
48
|
-
|
|
48
|
+
size: 4
|
|
49
49
|
}
|
|
50
50
|
};
|
|
51
51
|
const streamingPreset = {
|
|
@@ -63,7 +63,7 @@ const streamingPreset = {
|
|
|
63
63
|
edges: 0,
|
|
64
64
|
waves: 0.5,
|
|
65
65
|
caustic: 0,
|
|
66
|
-
|
|
66
|
+
size: 3
|
|
67
67
|
}
|
|
68
68
|
};
|
|
69
69
|
const slowMoPreset = {
|
|
@@ -81,7 +81,7 @@ const slowMoPreset = {
|
|
|
81
81
|
edges: 0,
|
|
82
82
|
waves: 0,
|
|
83
83
|
caustic: 0.2,
|
|
84
|
-
|
|
84
|
+
size: 2
|
|
85
85
|
}
|
|
86
86
|
};
|
|
87
87
|
const waterPresets = [defaultPreset, slowMoPreset, abstractPreset, streamingPreset];
|
|
@@ -91,13 +91,16 @@ const Water = memo(function WaterImpl({
|
|
|
91
91
|
frame = defaultPreset.params.frame,
|
|
92
92
|
colorBack = defaultPreset.params.colorBack,
|
|
93
93
|
colorHighlight = defaultPreset.params.colorHighlight,
|
|
94
|
-
image = "
|
|
94
|
+
image = "",
|
|
95
95
|
highlights = defaultPreset.params.highlights,
|
|
96
96
|
layering = defaultPreset.params.layering,
|
|
97
97
|
waves = defaultPreset.params.waves,
|
|
98
98
|
edges = defaultPreset.params.edges,
|
|
99
99
|
caustic = defaultPreset.params.caustic,
|
|
100
|
-
effectScale
|
|
100
|
+
// `effectScale` was deprecated in favor of `size`
|
|
101
|
+
// (it was a reverse value by mistake, so we took the opportunity to rename the param too)
|
|
102
|
+
effectScale,
|
|
103
|
+
size = effectScale === void 0 ? defaultPreset.params.size : 10 / 9 / effectScale - 1 / 9,
|
|
101
104
|
// Sizing props
|
|
102
105
|
fit = defaultPreset.params.fit,
|
|
103
106
|
scale = defaultPreset.params.scale,
|
|
@@ -120,7 +123,7 @@ const Water = memo(function WaterImpl({
|
|
|
120
123
|
u_waves: waves,
|
|
121
124
|
u_edges: edges,
|
|
122
125
|
u_caustic: caustic,
|
|
123
|
-
|
|
126
|
+
u_size: size,
|
|
124
127
|
// Sizing uniforms
|
|
125
128
|
u_fit: ShaderFitOptions[fit],
|
|
126
129
|
u_rotation: rotation,
|