@paper-design/shaders-react 0.0.43 → 0.0.45
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/README.md +18 -5
- package/dist/index.d.ts +7 -1
- package/dist/index.js +12 -1
- package/dist/index.js.map +2 -2
- package/dist/shader-mount.d.ts +7 -2
- package/dist/shader-mount.js.map +2 -2
- package/dist/shaders/color-panels.d.ts +3 -0
- package/dist/shaders/color-panels.js +73 -2
- package/dist/shaders/color-panels.js.map +2 -2
- package/dist/shaders/dithering.d.ts +0 -1
- package/dist/shaders/dithering.js +3 -17
- package/dist/shaders/dithering.js.map +2 -2
- package/dist/shaders/dot-grid.d.ts +0 -1
- package/dist/shaders/dot-grid.js +2 -93
- package/dist/shaders/dot-grid.js.map +2 -2
- package/dist/shaders/dot-orbit.d.ts +3 -0
- package/dist/shaders/dot-orbit.js +50 -2
- package/dist/shaders/dot-orbit.js.map +2 -2
- package/dist/shaders/god-rays.d.ts +0 -1
- package/dist/shaders/god-rays.js +6 -25
- package/dist/shaders/god-rays.js.map +2 -2
- package/dist/shaders/grain-gradient.d.ts +1 -2
- package/dist/shaders/grain-gradient.js +7 -23
- package/dist/shaders/grain-gradient.js.map +2 -2
- package/dist/shaders/liquid-metal.js +3 -3
- package/dist/shaders/liquid-metal.js.map +1 -1
- package/dist/shaders/mesh-gradient.d.ts +1 -0
- package/dist/shaders/mesh-gradient.js +20 -7
- package/dist/shaders/mesh-gradient.js.map +2 -2
- package/dist/shaders/metaballs.d.ts +3 -0
- package/dist/shaders/metaballs.js +46 -2
- package/dist/shaders/metaballs.js.map +2 -2
- package/dist/shaders/neuro-noise.d.ts +3 -0
- package/dist/shaders/neuro-noise.js +53 -3
- package/dist/shaders/neuro-noise.js.map +2 -2
- package/dist/shaders/perlin-noise.d.ts +0 -2
- package/dist/shaders/perlin-noise.js +2 -43
- package/dist/shaders/perlin-noise.js.map +2 -2
- package/dist/shaders/pulsing-border.d.ts +2 -1
- package/dist/shaders/pulsing-border.js +70 -42
- package/dist/shaders/pulsing-border.js.map +2 -2
- package/dist/shaders/simplex-noise.d.ts +3 -0
- package/dist/shaders/simplex-noise.js +47 -3
- package/dist/shaders/simplex-noise.js.map +2 -2
- package/dist/shaders/smoke-ring.js +4 -4
- package/dist/shaders/smoke-ring.js.map +2 -2
- package/dist/shaders/spiral.d.ts +0 -3
- package/dist/shaders/spiral.js +26 -93
- package/dist/shaders/spiral.js.map +2 -2
- package/dist/shaders/static-mesh-gradient.d.ts +12 -0
- package/dist/shaders/static-mesh-gradient.js +157 -0
- package/dist/shaders/static-mesh-gradient.js.map +7 -0
- package/dist/shaders/static-radial-gradient.d.ts +12 -0
- package/dist/shaders/static-radial-gradient.js +178 -0
- package/dist/shaders/static-radial-gradient.js.map +7 -0
- package/dist/shaders/swirl.js +17 -17
- package/dist/shaders/swirl.js.map +2 -2
- package/dist/shaders/voronoi.d.ts +2 -0
- package/dist/shaders/voronoi.js +37 -4
- package/dist/shaders/voronoi.js.map +2 -2
- package/dist/shaders/warp.d.ts +0 -5
- package/dist/shaders/warp.js +6 -108
- package/dist/shaders/warp.js.map +2 -2
- package/dist/shaders/waves.js +3 -3
- package/dist/shaders/waves.js.map +1 -1
- package/package.json +2 -2
|
@@ -22,11 +22,58 @@ const defaultPreset = {
|
|
|
22
22
|
colorFront: "#ffffff",
|
|
23
23
|
colorMid: "#bf9eff",
|
|
24
24
|
colorBack: "#000000",
|
|
25
|
-
brightness: 0.
|
|
25
|
+
brightness: 0.15,
|
|
26
26
|
contrast: 0.6
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
|
-
const
|
|
29
|
+
const sensationPreset = {
|
|
30
|
+
name: "Sensation",
|
|
31
|
+
params: {
|
|
32
|
+
...defaultPatternSizing,
|
|
33
|
+
speed: 1,
|
|
34
|
+
frame: 0,
|
|
35
|
+
colorFront: "#00c8ff",
|
|
36
|
+
colorMid: "#fbff00",
|
|
37
|
+
colorBack: "#8b42ff",
|
|
38
|
+
brightness: 0.19,
|
|
39
|
+
contrast: 0.12,
|
|
40
|
+
scale: 3
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const bloodstreamPreset = {
|
|
44
|
+
name: "Bloodstream",
|
|
45
|
+
params: {
|
|
46
|
+
...defaultPatternSizing,
|
|
47
|
+
speed: 1,
|
|
48
|
+
frame: 0,
|
|
49
|
+
colorFront: "#ff0000",
|
|
50
|
+
colorMid: "#ff0000",
|
|
51
|
+
colorBack: "#ffffff",
|
|
52
|
+
brightness: 0.24,
|
|
53
|
+
contrast: 0.17,
|
|
54
|
+
scale: 0.7
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
const ghostPreset = {
|
|
58
|
+
name: "Ghost",
|
|
59
|
+
params: {
|
|
60
|
+
...defaultPatternSizing,
|
|
61
|
+
speed: 1,
|
|
62
|
+
frame: 0,
|
|
63
|
+
colorFront: "#ffffff",
|
|
64
|
+
colorMid: "#000000",
|
|
65
|
+
colorBack: "#ffffff",
|
|
66
|
+
brightness: 0,
|
|
67
|
+
contrast: 1,
|
|
68
|
+
scale: 0.55
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
const neuroNoisePresets = [
|
|
72
|
+
defaultPreset,
|
|
73
|
+
sensationPreset,
|
|
74
|
+
bloodstreamPreset,
|
|
75
|
+
ghostPreset
|
|
76
|
+
];
|
|
30
77
|
const NeuroNoise = memo(function NeuroNoiseImpl({
|
|
31
78
|
// Own props
|
|
32
79
|
speed = defaultPreset.params.speed,
|
|
@@ -70,7 +117,10 @@ const NeuroNoise = memo(function NeuroNoiseImpl({
|
|
|
70
117
|
}, colorPropsAreEqual);
|
|
71
118
|
export {
|
|
72
119
|
NeuroNoise,
|
|
120
|
+
bloodstreamPreset,
|
|
73
121
|
defaultPreset,
|
|
74
|
-
|
|
122
|
+
ghostPreset,
|
|
123
|
+
neuroNoisePresets,
|
|
124
|
+
sensationPreset
|
|
75
125
|
};
|
|
76
126
|
//# sourceMappingURL=neuro-noise.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/neuro-noise.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 defaultPatternSizing,\n getShaderColorFromString,\n neuroNoiseFragmentShader,\n ShaderFitOptions,\n type NeuroNoiseParams,\n type NeuroNoiseUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams {}\n\ntype NeuroNoisePreset = ShaderPreset<NeuroNoiseParams>;\n\nexport const defaultPreset: NeuroNoisePreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#ffffff',\n colorMid: '#bf9eff',\n colorBack: '#000000',\n brightness: 0.
|
|
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 defaultPatternSizing,\n getShaderColorFromString,\n neuroNoiseFragmentShader,\n ShaderFitOptions,\n type NeuroNoiseParams,\n type NeuroNoiseUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams {}\n\ntype NeuroNoisePreset = ShaderPreset<NeuroNoiseParams>;\n\nexport const defaultPreset: NeuroNoisePreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#ffffff',\n colorMid: '#bf9eff',\n colorBack: '#000000',\n brightness: 0.15,\n contrast: 0.6,\n },\n};\n\nexport const sensationPreset: NeuroNoisePreset = {\n name: 'Sensation',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#00c8ff',\n colorMid: '#fbff00',\n colorBack: '#8b42ff',\n brightness: 0.19,\n contrast: 0.12,\n scale: 3,\n },\n};\n\nexport const bloodstreamPreset: NeuroNoisePreset = {\n name: 'Bloodstream',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#ff0000',\n colorMid: '#ff0000',\n colorBack: '#ffffff',\n brightness: 0.24,\n contrast: 0.17,\n scale: 0.7,\n },\n};\n\nexport const ghostPreset: NeuroNoisePreset = {\n name: 'Ghost',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#ffffff',\n colorMid: '#000000',\n colorBack: '#ffffff',\n brightness: 0.0,\n contrast: 1.0,\n scale: 0.55,\n },\n};\n\nexport const neuroNoisePresets: NeuroNoisePreset[] = [\n defaultPreset,\n sensationPreset,\n bloodstreamPreset,\n ghostPreset,\n] as const;\n\nexport const NeuroNoise: React.FC<NeuroNoiseProps> = memo(function NeuroNoiseImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorMid = defaultPreset.params.colorMid,\n colorBack = defaultPreset.params.colorBack,\n brightness = defaultPreset.params.brightness,\n contrast = defaultPreset.params.contrast,\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}: NeuroNoiseProps) {\n const uniforms = {\n // Own uniforms\n u_colorFront: getShaderColorFromString(colorFront),\n u_colorMid: getShaderColorFromString(colorMid),\n u_colorBack: getShaderColorFromString(colorBack),\n u_brightness: brightness,\n u_contrast: contrast,\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 NeuroNoiseUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={neuroNoiseFragmentShader} uniforms={uniforms} />\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;AAmHH;AA7GG,MAAM,gBAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,kBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAEO,MAAM,oBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAEO,MAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAEO,MAAM,oBAAwC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,aAAwC,KAAK,SAAS,eAAe;AAAA;AAAA,EAEhF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,aAAa,cAAc,OAAO;AAAA,EAClC,WAAW,cAAc,OAAO;AAAA,EAChC,YAAY,cAAc,OAAO;AAAA,EACjC,aAAa,cAAc,OAAO;AAAA,EAClC,WAAW,cAAc,OAAO;AAAA;AAAA,EAGhC,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,GAAoB;AAClB,QAAM,WAAW;AAAA;AAAA,IAEf,cAAc,yBAAyB,UAAU;AAAA,IACjD,YAAY,yBAAyB,QAAQ;AAAA,IAC7C,aAAa,yBAAyB,SAAS;AAAA,IAC/C,cAAc;AAAA,IACd,YAAY;AAAA;AAAA,IAGZ,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,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,0BAA0B,UAAoB;AAEtH,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,8 +5,6 @@ export interface PerlinNoiseProps extends ShaderComponentProps, PerlinNoiseParam
|
|
|
5
5
|
type PerlinNoisePreset = ShaderPreset<PerlinNoiseParams>;
|
|
6
6
|
export declare const defaultPreset: PerlinNoisePreset;
|
|
7
7
|
export declare const nintendoWaterPreset: PerlinNoisePreset;
|
|
8
|
-
export declare const colonyPreset: PerlinNoisePreset;
|
|
9
|
-
export declare const phosphenesPreset: PerlinNoisePreset;
|
|
10
8
|
export declare const mossPreset: PerlinNoisePreset;
|
|
11
9
|
export declare const wormsPreset: PerlinNoisePreset;
|
|
12
10
|
export declare const perlinNoisePresets: PerlinNoisePreset[];
|
|
@@ -44,38 +44,6 @@ const nintendoWaterPreset = {
|
|
|
44
44
|
lacunarity: 1.8
|
|
45
45
|
}
|
|
46
46
|
};
|
|
47
|
-
const colonyPreset = {
|
|
48
|
-
name: "Colony",
|
|
49
|
-
params: {
|
|
50
|
-
...defaultPatternSizing,
|
|
51
|
-
scale: 1 / 0.15,
|
|
52
|
-
speed: 0,
|
|
53
|
-
frame: 0,
|
|
54
|
-
colorBack: "#f4f0ae",
|
|
55
|
-
colorFront: "#0a1a5e",
|
|
56
|
-
octaveCount: 6,
|
|
57
|
-
persistence: 1,
|
|
58
|
-
lacunarity: 2.55,
|
|
59
|
-
proportion: 0.65,
|
|
60
|
-
softness: 0.35
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
const phosphenesPreset = {
|
|
64
|
-
name: "Phosphenes",
|
|
65
|
-
params: {
|
|
66
|
-
...defaultPatternSizing,
|
|
67
|
-
scale: 1 / 0.03,
|
|
68
|
-
speed: 0.15,
|
|
69
|
-
frame: 0,
|
|
70
|
-
colorBack: "#ec7c8b",
|
|
71
|
-
colorFront: "#66cc99",
|
|
72
|
-
proportion: 0.45,
|
|
73
|
-
softness: 0.45,
|
|
74
|
-
octaveCount: 6,
|
|
75
|
-
persistence: 0.3,
|
|
76
|
-
lacunarity: 3
|
|
77
|
-
}
|
|
78
|
-
};
|
|
79
47
|
const mossPreset = {
|
|
80
48
|
name: "Moss",
|
|
81
49
|
params: {
|
|
@@ -96,7 +64,7 @@ const wormsPreset = {
|
|
|
96
64
|
name: "Worms",
|
|
97
65
|
params: {
|
|
98
66
|
...defaultPatternSizing,
|
|
99
|
-
scale:
|
|
67
|
+
scale: 0.9,
|
|
100
68
|
speed: 0,
|
|
101
69
|
frame: 0,
|
|
102
70
|
colorBack: "#ffffff",
|
|
@@ -108,14 +76,7 @@ const wormsPreset = {
|
|
|
108
76
|
lacunarity: 1.5
|
|
109
77
|
}
|
|
110
78
|
};
|
|
111
|
-
const perlinNoisePresets = [
|
|
112
|
-
defaultPreset,
|
|
113
|
-
nintendoWaterPreset,
|
|
114
|
-
colonyPreset,
|
|
115
|
-
phosphenesPreset,
|
|
116
|
-
mossPreset,
|
|
117
|
-
wormsPreset
|
|
118
|
-
];
|
|
79
|
+
const perlinNoisePresets = [defaultPreset, nintendoWaterPreset, mossPreset, wormsPreset];
|
|
119
80
|
const PerlinNoise = memo(function PerlinNoiseImpl({
|
|
120
81
|
// Own props
|
|
121
82
|
speed = defaultPreset.params.speed,
|
|
@@ -172,12 +133,10 @@ const PerlinNoise = memo(function PerlinNoiseImpl({
|
|
|
172
133
|
}, colorPropsAreEqual);
|
|
173
134
|
export {
|
|
174
135
|
PerlinNoise,
|
|
175
|
-
colonyPreset,
|
|
176
136
|
defaultPreset,
|
|
177
137
|
mossPreset,
|
|
178
138
|
nintendoWaterPreset,
|
|
179
139
|
perlinNoisePresets,
|
|
180
|
-
phosphenesPreset,
|
|
181
140
|
wormsPreset
|
|
182
141
|
};
|
|
183
142
|
//# sourceMappingURL=perlin-noise.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/perlin-noise.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 defaultPatternSizing,\n getShaderColorFromString,\n perlinNoiseFragmentShader,\n ShaderFitOptions,\n type PerlinNoiseParams,\n type PerlinNoiseUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface PerlinNoiseProps extends ShaderComponentProps, PerlinNoiseParams {}\n\ntype PerlinNoisePreset = ShaderPreset<PerlinNoiseParams>;\n\nexport const defaultPreset: PerlinNoisePreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 0.5,\n frame: 0,\n colorBack: '#262626',\n colorFront: '#d9d9d9',\n proportion: 0.35,\n softness: 0.1,\n octaveCount: 2,\n persistence: 1,\n lacunarity: 1.5,\n },\n};\n\nexport const nintendoWaterPreset: PerlinNoisePreset = {\n name: 'Nintendo Water',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.2,\n speed: 0.4,\n frame: 0,\n colorBack: '#2d69d4',\n colorFront: '#d1eefc',\n proportion: 0.42,\n softness: 0,\n octaveCount: 2,\n persistence: 0.55,\n lacunarity: 1.8,\n },\n};\n\nexport const
|
|
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 defaultPatternSizing,\n getShaderColorFromString,\n perlinNoiseFragmentShader,\n ShaderFitOptions,\n type PerlinNoiseParams,\n type PerlinNoiseUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface PerlinNoiseProps extends ShaderComponentProps, PerlinNoiseParams {}\n\ntype PerlinNoisePreset = ShaderPreset<PerlinNoiseParams>;\n\nexport const defaultPreset: PerlinNoisePreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 0.5,\n frame: 0,\n colorBack: '#262626',\n colorFront: '#d9d9d9',\n proportion: 0.35,\n softness: 0.1,\n octaveCount: 2,\n persistence: 1,\n lacunarity: 1.5,\n },\n};\n\nexport const nintendoWaterPreset: PerlinNoisePreset = {\n name: 'Nintendo Water',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.2,\n speed: 0.4,\n frame: 0,\n colorBack: '#2d69d4',\n colorFront: '#d1eefc',\n proportion: 0.42,\n softness: 0,\n octaveCount: 2,\n persistence: 0.55,\n lacunarity: 1.8,\n },\n};\n\nexport const mossPreset: PerlinNoisePreset = {\n name: 'Moss',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.15,\n speed: 0.02,\n frame: 0,\n colorBack: '#05ff4a',\n colorFront: '#262626',\n proportion: 0.65,\n softness: 0.35,\n octaveCount: 6,\n persistence: 1,\n lacunarity: 2.55,\n },\n};\n\nexport const wormsPreset: PerlinNoisePreset = {\n name: 'Worms',\n params: {\n ...defaultPatternSizing,\n scale: 0.9,\n speed: 0,\n frame: 0,\n colorBack: '#ffffff',\n colorFront: '#595959',\n proportion: 0.5,\n softness: 0,\n octaveCount: 1,\n persistence: 1,\n lacunarity: 1.5,\n },\n};\n\nexport const perlinNoisePresets: PerlinNoisePreset[] = [defaultPreset, nintendoWaterPreset, mossPreset, wormsPreset];\n\nexport const PerlinNoise: React.FC<PerlinNoiseProps> = memo(function PerlinNoiseImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorBack = defaultPreset.params.colorBack,\n proportion = defaultPreset.params.proportion,\n softness = defaultPreset.params.softness,\n octaveCount = defaultPreset.params.octaveCount,\n persistence = defaultPreset.params.persistence,\n lacunarity,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\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 ...props\n}: PerlinNoiseProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorFront: getShaderColorFromString(colorFront),\n u_proportion: proportion,\n u_softness: softness ?? defaultPreset.params.softness,\n u_octaveCount: octaveCount ?? defaultPreset.params.octaveCount,\n u_persistence: persistence ?? defaultPreset.params.persistence,\n u_lacunarity: lacunarity ?? defaultPreset.params.lacunarity,\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 PerlinNoiseUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={perlinNoiseFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,8 @@ export interface PulsingBorderProps extends ShaderComponentProps, PulsingBorderP
|
|
|
5
5
|
type PulsingBorderPreset = ShaderPreset<PulsingBorderParams>;
|
|
6
6
|
export declare const defaultPreset: PulsingBorderPreset;
|
|
7
7
|
export declare const circlePreset: PulsingBorderPreset;
|
|
8
|
-
export declare const
|
|
8
|
+
export declare const northernLightsPreset: PulsingBorderPreset;
|
|
9
|
+
export declare const solidLinePreset: PulsingBorderPreset;
|
|
9
10
|
export declare const pulsingBorderPresets: PulsingBorderPreset[];
|
|
10
11
|
export declare const PulsingBorder: React.FC<PulsingBorderProps>;
|
|
11
12
|
export {};
|
|
@@ -18,64 +18,92 @@ const defaultPreset = {
|
|
|
18
18
|
name: "Default",
|
|
19
19
|
params: {
|
|
20
20
|
...defaultObjectSizing,
|
|
21
|
-
scale: 0.
|
|
21
|
+
scale: 0.55,
|
|
22
22
|
speed: 1,
|
|
23
23
|
frame: 0,
|
|
24
24
|
colorBack: "#000000",
|
|
25
|
-
colors: ["#f2244f", "#4da6e6"],
|
|
26
|
-
roundness: 0.
|
|
27
|
-
thickness: 0.
|
|
28
|
-
softness: 0.
|
|
29
|
-
intensity:
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
colors: ["#f2244f", "#4da6e6", "#379590"],
|
|
26
|
+
roundness: 0.35,
|
|
27
|
+
thickness: 0.05,
|
|
28
|
+
softness: 0.75,
|
|
29
|
+
intensity: 0.3,
|
|
30
|
+
bloom: 0.5,
|
|
31
|
+
spots: 3,
|
|
32
|
+
spotSize: 0.3,
|
|
32
33
|
pulse: 0,
|
|
33
|
-
smoke:
|
|
34
|
-
smokeSize:
|
|
34
|
+
smoke: 0.35,
|
|
35
|
+
smokeSize: 0.63
|
|
35
36
|
}
|
|
36
37
|
};
|
|
37
38
|
const circlePreset = {
|
|
38
39
|
name: "Circle",
|
|
39
40
|
params: {
|
|
40
41
|
...defaultObjectSizing,
|
|
41
|
-
worldWidth:
|
|
42
|
-
worldHeight:
|
|
43
|
-
scale: 0.
|
|
42
|
+
worldWidth: 400,
|
|
43
|
+
worldHeight: 400,
|
|
44
|
+
scale: 0.6,
|
|
44
45
|
speed: 1,
|
|
45
46
|
frame: 0,
|
|
46
|
-
colorBack: "#
|
|
47
|
-
colors: ["#ffdd33", "#
|
|
47
|
+
colorBack: "#110222",
|
|
48
|
+
colors: ["#ffdd33", "#ff0000", "#00ffff"],
|
|
48
49
|
roundness: 1,
|
|
49
|
-
thickness: 0.
|
|
50
|
-
softness:
|
|
51
|
-
intensity:
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
thickness: 0.4,
|
|
51
|
+
softness: 1,
|
|
52
|
+
intensity: 0.8,
|
|
53
|
+
bloom: 0.8,
|
|
54
|
+
spots: 2,
|
|
55
|
+
spotSize: 0.45,
|
|
54
56
|
pulse: 0,
|
|
55
|
-
smoke: 0,
|
|
56
|
-
smokeSize:
|
|
57
|
+
smoke: 0.25,
|
|
58
|
+
smokeSize: 0.62
|
|
57
59
|
}
|
|
58
60
|
};
|
|
59
|
-
const
|
|
60
|
-
name: "
|
|
61
|
+
const northernLightsPreset = {
|
|
62
|
+
name: "Northern lights",
|
|
61
63
|
params: {
|
|
62
64
|
...defaultObjectSizing,
|
|
63
|
-
speed:
|
|
65
|
+
speed: 0.18,
|
|
64
66
|
frame: 0,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
+
colors: ["#3426f2", "#156ba8", "#126964", "#0affba", "#4733cc"],
|
|
68
|
+
colorBack: "#002942",
|
|
67
69
|
roundness: 0,
|
|
68
|
-
thickness:
|
|
70
|
+
thickness: 1,
|
|
69
71
|
softness: 1,
|
|
70
|
-
intensity:
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
intensity: 0,
|
|
73
|
+
bloom: 0.5,
|
|
74
|
+
spots: 4,
|
|
75
|
+
spotSize: 0,
|
|
76
|
+
pulse: 0,
|
|
77
|
+
smoke: 0.7,
|
|
78
|
+
smokeSize: 0.7
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
const solidLinePreset = {
|
|
82
|
+
name: "Solid line",
|
|
83
|
+
params: {
|
|
84
|
+
...defaultObjectSizing,
|
|
85
|
+
speed: 2,
|
|
86
|
+
frame: 0,
|
|
87
|
+
colors: ["#759717", "#ff0073", "#00ffb3"],
|
|
88
|
+
colorBack: "#000000",
|
|
89
|
+
roundness: 0.05,
|
|
90
|
+
thickness: 0.03,
|
|
91
|
+
softness: 0,
|
|
92
|
+
intensity: 0,
|
|
93
|
+
bloom: 0.15,
|
|
94
|
+
spots: 4,
|
|
95
|
+
spotSize: 0.28,
|
|
96
|
+
pulse: 0,
|
|
74
97
|
smoke: 0,
|
|
75
|
-
smokeSize: 0
|
|
98
|
+
smokeSize: 0.63
|
|
76
99
|
}
|
|
77
100
|
};
|
|
78
|
-
const pulsingBorderPresets = [
|
|
101
|
+
const pulsingBorderPresets = [
|
|
102
|
+
defaultPreset,
|
|
103
|
+
circlePreset,
|
|
104
|
+
northernLightsPreset,
|
|
105
|
+
solidLinePreset
|
|
106
|
+
];
|
|
79
107
|
const PulsingBorder = memo(function PulsingBorderImpl({
|
|
80
108
|
// Own props
|
|
81
109
|
speed = defaultPreset.params.speed,
|
|
@@ -85,8 +113,9 @@ const PulsingBorder = memo(function PulsingBorderImpl({
|
|
|
85
113
|
roundness = defaultPreset.params.roundness,
|
|
86
114
|
thickness = defaultPreset.params.thickness,
|
|
87
115
|
softness = defaultPreset.params.softness,
|
|
116
|
+
bloom = defaultPreset.params.bloom,
|
|
88
117
|
intensity = defaultPreset.params.intensity,
|
|
89
|
-
|
|
118
|
+
spots = defaultPreset.params.spots,
|
|
90
119
|
spotSize = defaultPreset.params.spotSize,
|
|
91
120
|
pulse = defaultPreset.params.pulse,
|
|
92
121
|
smoke = defaultPreset.params.smoke,
|
|
@@ -103,8 +132,6 @@ const PulsingBorder = memo(function PulsingBorderImpl({
|
|
|
103
132
|
worldHeight = defaultPreset.params.worldHeight,
|
|
104
133
|
...props
|
|
105
134
|
}) {
|
|
106
|
-
const noiseTexture = typeof window !== "undefined" && { u_noiseTexture: getShaderNoiseTexture(0) };
|
|
107
|
-
const pulseTexture = typeof window !== "undefined" && { u_pulseTexture: getShaderNoiseTexture(1) };
|
|
108
135
|
const uniforms = {
|
|
109
136
|
// Own uniforms
|
|
110
137
|
u_colorBack: getShaderColorFromString(colorBack),
|
|
@@ -114,13 +141,13 @@ const PulsingBorder = memo(function PulsingBorderImpl({
|
|
|
114
141
|
u_thickness: thickness,
|
|
115
142
|
u_softness: softness,
|
|
116
143
|
u_intensity: intensity,
|
|
117
|
-
|
|
144
|
+
u_bloom: bloom,
|
|
145
|
+
u_spots: spots,
|
|
118
146
|
u_spotSize: spotSize,
|
|
119
147
|
u_pulse: pulse,
|
|
120
148
|
u_smoke: smoke,
|
|
121
149
|
u_smokeSize: smokeSize,
|
|
122
|
-
|
|
123
|
-
...noiseTexture,
|
|
150
|
+
u_noiseTexture: getShaderNoiseTexture(),
|
|
124
151
|
// Sizing uniforms
|
|
125
152
|
u_fit: ShaderFitOptions[fit],
|
|
126
153
|
u_rotation: rotation,
|
|
@@ -147,7 +174,8 @@ export {
|
|
|
147
174
|
PulsingBorder,
|
|
148
175
|
circlePreset,
|
|
149
176
|
defaultPreset,
|
|
150
|
-
|
|
151
|
-
pulsingBorderPresets
|
|
177
|
+
northernLightsPreset,
|
|
178
|
+
pulsingBorderPresets,
|
|
179
|
+
solidLinePreset
|
|
152
180
|
};
|
|
153
181
|
//# sourceMappingURL=pulsing-border.js.map
|
|
@@ -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 scale: 0.
|
|
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';\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 scale: 0.55,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#f2244f', '#4da6e6', '#379590'],\n roundness: 0.35,\n thickness: 0.05,\n softness: 0.75,\n intensity: 0.3,\n bloom: 0.5,\n spots: 3,\n spotSize: 0.3,\n pulse: 0,\n smoke: 0.35,\n smokeSize: 0.63,\n },\n};\n\nexport const circlePreset: PulsingBorderPreset = {\n name: 'Circle',\n params: {\n ...defaultObjectSizing,\n worldWidth: 400,\n worldHeight: 400,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#110222',\n colors: ['#ffdd33', '#ff0000', '#00ffff'],\n roundness: 1,\n thickness: 0.4,\n softness: 1,\n intensity: 0.8,\n bloom: 0.8,\n spots: 2,\n spotSize: 0.45,\n pulse: 0,\n smoke: 0.25,\n smokeSize: 0.62,\n },\n};\n\nexport const northernLightsPreset: PulsingBorderPreset = {\n name: 'Northern lights',\n params: {\n ...defaultObjectSizing,\n speed: 0.18,\n frame: 0,\n colors: ['#3426f2', '#156ba8', '#126964', '#0affba', '#4733cc'],\n colorBack: '#002942',\n roundness: 0,\n thickness: 1,\n softness: 1,\n intensity: 0,\n bloom: 0.5,\n spots: 4,\n spotSize: 0,\n pulse: 0,\n smoke: 0.7,\n smokeSize: 0.7,\n },\n};\n\nexport const solidLinePreset: PulsingBorderPreset = {\n name: 'Solid line',\n params: {\n ...defaultObjectSizing,\n speed: 2,\n frame: 0,\n colors: ['#759717', '#ff0073', '#00ffb3'],\n colorBack: '#000000',\n roundness: 0.05,\n thickness: 0.03,\n softness: 0.0,\n intensity: 0.0,\n bloom: 0.15,\n spots: 4,\n spotSize: 0.28,\n pulse: 0.0,\n smoke: 0,\n smokeSize: 0.63,\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 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\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_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
|
}
|
|
@@ -4,6 +4,9 @@ export interface SimplexNoiseProps extends ShaderComponentProps, SimplexNoisePar
|
|
|
4
4
|
}
|
|
5
5
|
type SimplexNoisePreset = ShaderPreset<SimplexNoiseParams>;
|
|
6
6
|
export declare const defaultPreset: SimplexNoisePreset;
|
|
7
|
+
export declare const bubblegumPreset: SimplexNoisePreset;
|
|
8
|
+
export declare const spotsPreset: SimplexNoisePreset;
|
|
9
|
+
export declare const firstContactPreset: SimplexNoisePreset;
|
|
7
10
|
export declare const simplexNoisePresets: SimplexNoisePreset[];
|
|
8
11
|
export declare const SimplexNoise: React.FC<SimplexNoiseProps>;
|
|
9
12
|
export {};
|
|
@@ -19,12 +19,53 @@ const defaultPreset = {
|
|
|
19
19
|
...defaultPatternSizing,
|
|
20
20
|
speed: 1,
|
|
21
21
|
frame: 0,
|
|
22
|
-
colors: ["#
|
|
22
|
+
colors: ["#5F7F99", "#A5C977", "#F94C4C", "#F9C94C", "#FFFFFF"],
|
|
23
23
|
stepsPerColor: 3,
|
|
24
24
|
softness: 0
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
|
-
const
|
|
27
|
+
const bubblegumPreset = {
|
|
28
|
+
name: "Bubblegum",
|
|
29
|
+
params: {
|
|
30
|
+
...defaultPatternSizing,
|
|
31
|
+
speed: 2,
|
|
32
|
+
frame: 0,
|
|
33
|
+
colors: ["#ffffff", "#ff9e9e", "#5f57ff", "#00f7ff"],
|
|
34
|
+
stepsPerColor: 1,
|
|
35
|
+
softness: 1,
|
|
36
|
+
scale: 1.6
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
const spotsPreset = {
|
|
40
|
+
name: "Spots",
|
|
41
|
+
params: {
|
|
42
|
+
...defaultPatternSizing,
|
|
43
|
+
speed: 0.6,
|
|
44
|
+
frame: 0,
|
|
45
|
+
colors: ["#ff7b00", "#f9ffeb", "#320d82"],
|
|
46
|
+
stepsPerColor: 1,
|
|
47
|
+
softness: 0,
|
|
48
|
+
scale: 1
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
const firstContactPreset = {
|
|
52
|
+
name: "First contact",
|
|
53
|
+
params: {
|
|
54
|
+
...defaultPatternSizing,
|
|
55
|
+
speed: 2,
|
|
56
|
+
frame: 0,
|
|
57
|
+
colors: ["#e8cce6", "#120d22", "#442c44", "#e6baba", "#fff5f5"],
|
|
58
|
+
stepsPerColor: 2,
|
|
59
|
+
softness: 0,
|
|
60
|
+
scale: 0.2
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
const simplexNoisePresets = [
|
|
64
|
+
defaultPreset,
|
|
65
|
+
spotsPreset,
|
|
66
|
+
firstContactPreset,
|
|
67
|
+
bubblegumPreset
|
|
68
|
+
];
|
|
28
69
|
const SimplexNoise = memo(function SimplexNoiseImpl({
|
|
29
70
|
// Own props
|
|
30
71
|
speed = defaultPreset.params.speed,
|
|
@@ -74,7 +115,10 @@ const SimplexNoise = memo(function SimplexNoiseImpl({
|
|
|
74
115
|
}, colorPropsAreEqual);
|
|
75
116
|
export {
|
|
76
117
|
SimplexNoise,
|
|
118
|
+
bubblegumPreset,
|
|
77
119
|
defaultPreset,
|
|
78
|
-
|
|
120
|
+
firstContactPreset,
|
|
121
|
+
simplexNoisePresets,
|
|
122
|
+
spotsPreset
|
|
79
123
|
};
|
|
80
124
|
//# sourceMappingURL=simplex-noise.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/simplex-noise.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 getShaderColorFromString,\n simplexNoiseFragmentShader,\n ShaderFitOptions,\n type SimplexNoiseUniforms,\n type SimplexNoiseParams,\n type ShaderPreset,\n defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface SimplexNoiseProps extends ShaderComponentProps, SimplexNoiseParams {}\n\ntype SimplexNoisePreset = ShaderPreset<SimplexNoiseParams>;\n\nexport const defaultPreset: SimplexNoisePreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colors: ['#
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n getShaderColorFromString,\n simplexNoiseFragmentShader,\n ShaderFitOptions,\n type SimplexNoiseUniforms,\n type SimplexNoiseParams,\n type ShaderPreset,\n defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface SimplexNoiseProps extends ShaderComponentProps, SimplexNoiseParams {}\n\ntype SimplexNoisePreset = ShaderPreset<SimplexNoiseParams>;\n\nexport const defaultPreset: SimplexNoisePreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colors: ['#5F7F99', '#A5C977', '#F94C4C', '#F9C94C', '#FFFFFF'],\n stepsPerColor: 3,\n softness: 0,\n },\n};\n\nexport const bubblegumPreset: SimplexNoisePreset = {\n name: 'Bubblegum',\n params: {\n ...defaultPatternSizing,\n speed: 2,\n frame: 0,\n colors: ['#ffffff', '#ff9e9e', '#5f57ff', '#00f7ff'],\n stepsPerColor: 1,\n softness: 1.0,\n scale: 1.6,\n },\n};\n\nexport const spotsPreset: SimplexNoisePreset = {\n name: 'Spots',\n params: {\n ...defaultPatternSizing,\n speed: 0.6,\n frame: 0,\n colors: ['#ff7b00', '#f9ffeb', '#320d82'],\n stepsPerColor: 1,\n softness: 0.0,\n scale: 1.0,\n },\n};\n\nexport const firstContactPreset: SimplexNoisePreset = {\n name: 'First contact',\n params: {\n ...defaultPatternSizing,\n speed: 2,\n frame: 0,\n colors: ['#e8cce6', '#120d22', '#442c44', '#e6baba', '#fff5f5'],\n stepsPerColor: 2,\n softness: 0.0,\n scale: 0.2,\n },\n};\n\nexport const simplexNoisePresets: SimplexNoisePreset[] = [\n defaultPreset,\n spotsPreset,\n firstContactPreset,\n bubblegumPreset,\n];\n\nexport const SimplexNoise: React.FC<SimplexNoiseProps> = memo(function SimplexNoiseImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n stepsPerColor = defaultPreset.params.stepsPerColor,\n softness = defaultPreset.params.softness,\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}: SimplexNoiseProps) {\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_stepsPerColor: stepsPerColor,\n u_softness: softness,\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 SimplexNoiseUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={simplexNoiseFragmentShader}\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,EAIA;AAAA,OACK;AAwGH;AAlGG,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,WAAW,SAAS;AAAA,IAC9D,eAAe;AAAA,IACf,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,kBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,EACT;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,SAAS;AAAA,IACxC,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAEO,MAAM,qBAAyC;AAAA,EACpD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,IAC9D,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,EACT;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,SAAS,cAAc,OAAO;AAAA,EAC9B,gBAAgB,cAAc,OAAO;AAAA,EACrC,WAAW,cAAc,OAAO;AAAA;AAAA,EAGhC,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,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,iBAAiB;AAAA,IACjB,YAAY;AAAA;AAAA,IAGZ,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
|
}
|
|
@@ -70,8 +70,9 @@ const cloudPreset = {
|
|
|
70
70
|
noiseIterations: 10,
|
|
71
71
|
radius: 0.5,
|
|
72
72
|
thickness: 0.65,
|
|
73
|
-
innerShape: 0.
|
|
74
|
-
speed: 0.5
|
|
73
|
+
innerShape: 0.85,
|
|
74
|
+
speed: 0.5,
|
|
75
|
+
scale: 0.8
|
|
75
76
|
}
|
|
76
77
|
};
|
|
77
78
|
const smokeRingPresets = [defaultPreset, linePreset, poisonPreset, cloudPreset];
|
|
@@ -98,7 +99,6 @@ const SmokeRing = memo(function SmokeRingImpl({
|
|
|
98
99
|
worldHeight = defaultPreset.params.worldHeight,
|
|
99
100
|
...props
|
|
100
101
|
}) {
|
|
101
|
-
const noiseTexture = typeof window !== "undefined" && { u_noiseTexture: getShaderNoiseTexture() };
|
|
102
102
|
const uniforms = {
|
|
103
103
|
// Own uniforms
|
|
104
104
|
u_colorBack: getShaderColorFromString(colorBack),
|
|
@@ -109,7 +109,7 @@ const SmokeRing = memo(function SmokeRingImpl({
|
|
|
109
109
|
u_radius: radius,
|
|
110
110
|
u_innerShape: innerShape,
|
|
111
111
|
u_noiseIterations: noiseIterations,
|
|
112
|
-
|
|
112
|
+
u_noiseTexture: getShaderNoiseTexture(),
|
|
113
113
|
// Sizing uniforms
|
|
114
114
|
u_fit: ShaderFitOptions[fit],
|
|
115
115
|
u_scale: scale,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/smoke-ring.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 smokeRingFragmentShader,\n ShaderFitOptions,\n type ShaderPreset,\n type SmokeRingParams,\n type SmokeRingUniforms,\n} from '@paper-design/shaders';\n\nexport interface SmokeRingProps extends ShaderComponentProps, SmokeRingParams {}\n\ntype SmokeRingPreset = ShaderPreset<SmokeRingParams>;\n\nexport const defaultPreset: SmokeRingPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 0.4,\n frame: 0,\n colorBack: '#ffffff',\n colors: ['#136c5e', '#0f0224'],\n noiseScale: 5,\n noiseIterations: 10,\n radius: 0.5,\n thickness: 0.25,\n innerShape: 1.2,\n },\n};\n\nexport const poisonPreset: SmokeRingPreset = {\n name: 'Poison',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#003d00',\n colors: ['#d4ff00', '#077d52', '#aaff00'],\n noiseScale: 3.3,\n noiseIterations: 3,\n radius: 0.4,\n thickness: 0.2,\n innerShape: 4,\n },\n};\n\nexport const linePreset: SmokeRingPreset = {\n name: 'Line',\n params: {\n ...defaultObjectSizing,\n frame: 0,\n colorBack: '#000000',\n colors: ['#1fe8ff', '#4540a4'],\n noiseScale: 1.1,\n noiseIterations: 2,\n radius: 0.38,\n thickness: 0.01,\n innerShape: 0.88,\n speed: 4,\n },\n};\n\nexport const cloudPreset: SmokeRingPreset = {\n name: 'Cloud',\n params: {\n ...defaultObjectSizing,\n frame: 0,\n colorBack: '#3b9bff',\n colors: ['#ffffff'],\n noiseScale: 3,\n noiseIterations: 10,\n radius: 0.5,\n thickness: 0.65,\n innerShape: 0.
|
|
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 smokeRingFragmentShader,\n ShaderFitOptions,\n type ShaderPreset,\n type SmokeRingParams,\n type SmokeRingUniforms,\n} from '@paper-design/shaders';\n\nexport interface SmokeRingProps extends ShaderComponentProps, SmokeRingParams {}\n\ntype SmokeRingPreset = ShaderPreset<SmokeRingParams>;\n\nexport const defaultPreset: SmokeRingPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 0.4,\n frame: 0,\n colorBack: '#ffffff',\n colors: ['#136c5e', '#0f0224'],\n noiseScale: 5,\n noiseIterations: 10,\n radius: 0.5,\n thickness: 0.25,\n innerShape: 1.2,\n },\n};\n\nexport const poisonPreset: SmokeRingPreset = {\n name: 'Poison',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#003d00',\n colors: ['#d4ff00', '#077d52', '#aaff00'],\n noiseScale: 3.3,\n noiseIterations: 3,\n radius: 0.4,\n thickness: 0.2,\n innerShape: 4,\n },\n};\n\nexport const linePreset: SmokeRingPreset = {\n name: 'Line',\n params: {\n ...defaultObjectSizing,\n frame: 0,\n colorBack: '#000000',\n colors: ['#1fe8ff', '#4540a4'],\n noiseScale: 1.1,\n noiseIterations: 2,\n radius: 0.38,\n thickness: 0.01,\n innerShape: 0.88,\n speed: 4,\n },\n};\n\nexport const cloudPreset: SmokeRingPreset = {\n name: 'Cloud',\n params: {\n ...defaultObjectSizing,\n frame: 0,\n colorBack: '#3b9bff',\n colors: ['#ffffff'],\n noiseScale: 3,\n noiseIterations: 10,\n radius: 0.5,\n thickness: 0.65,\n innerShape: 0.85,\n speed: 0.5,\n scale: 0.8,\n },\n};\n\nexport const smokeRingPresets: SmokeRingPreset[] = [defaultPreset, linePreset, poisonPreset, cloudPreset];\n\nexport const SmokeRing: React.FC<SmokeRingProps> = memo(function SmokeRingImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n noiseScale = defaultPreset.params.noiseScale,\n thickness = defaultPreset.params.thickness,\n radius = defaultPreset.params.radius,\n innerShape = defaultPreset.params.innerShape,\n noiseIterations = defaultPreset.params.noiseIterations,\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}: SmokeRingProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_noiseScale: noiseScale,\n u_thickness: thickness,\n u_radius: radius,\n u_innerShape: innerShape,\n u_noiseIterations: noiseIterations,\n u_noiseTexture: getShaderNoiseTexture(),\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 SmokeRingUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={smokeRingFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/shaders/spiral.d.ts
CHANGED
|
@@ -4,12 +4,9 @@ export interface SpiralProps extends ShaderComponentProps, SpiralParams {
|
|
|
4
4
|
}
|
|
5
5
|
type SpiralPreset = ShaderPreset<SpiralParams>;
|
|
6
6
|
export declare const defaultPreset: SpiralPreset;
|
|
7
|
-
export declare const noisyPreset: SpiralPreset;
|
|
8
7
|
export declare const dropletPreset: SpiralPreset;
|
|
9
8
|
export declare const sandPreset: SpiralPreset;
|
|
10
9
|
export declare const swirlPreset: SpiralPreset;
|
|
11
|
-
export declare const hookPreset: SpiralPreset;
|
|
12
|
-
export declare const vinylPreset: SpiralPreset;
|
|
13
10
|
export declare const spiralPresets: SpiralPreset[];
|
|
14
11
|
export declare const Spiral: React.FC<SpiralProps>;
|
|
15
12
|
export {};
|