@paper-design/shaders-react 0.0.43 → 0.0.44
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 +11 -1
- package/dist/index.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 +6 -21
- 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 +69 -40
- 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 +3 -2
- 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 +36 -2
- 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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/dot-orbit.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 dotOrbitFragmentShader,\n ShaderFitOptions,\n type DotOrbitParams,\n type DotOrbitUniforms,\n type ShaderPreset,\n defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {}\n\ntype DotOrbitPreset = ShaderPreset<DotOrbitParams>;\n\nexport const defaultPreset: DotOrbitPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 2,\n frame: 0,\n colorBack: '#000000',\n colors: ['#D2822D', '#0C3D80', '#B41A57', '#37A166'],\n size: 0.9,\n sizeRange: 0,\n spreading: 1,\n stepsPerColor: 2,\n },\n};\n\nexport const dotOrbitPresets: DotOrbitPreset[] = [defaultPreset];\n\nexport const DotOrbit: React.FC<DotOrbitProps> = memo(function DotOrbitImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n size = defaultPreset.params.size,\n sizeRange = defaultPreset.params.sizeRange,\n spreading = defaultPreset.params.spreading,\n stepsPerColor = defaultPreset.params.stepsPerColor,\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}: DotOrbitProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_size: size,\n u_sizeRange: sizeRange,\n u_spreading: spreading,\n u_stepsPerColor: stepsPerColor,\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 DotOrbitUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={dotOrbitFragmentShader} 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,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 dotOrbitFragmentShader,\n ShaderFitOptions,\n type DotOrbitParams,\n type DotOrbitUniforms,\n type ShaderPreset,\n defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {}\n\ntype DotOrbitPreset = ShaderPreset<DotOrbitParams>;\n\nexport const defaultPreset: DotOrbitPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 2,\n frame: 0,\n colorBack: '#000000',\n colors: ['#D2822D', '#0C3D80', '#B41A57', '#37A166'],\n size: 0.9,\n sizeRange: 0,\n spreading: 1,\n stepsPerColor: 2,\n },\n};\n\nexport const shinePreset: DotOrbitPreset = {\n name: 'Shine',\n params: {\n ...defaultPatternSizing,\n speed: 0.1,\n frame: 0,\n colors: ['#ffffff', '#006aff', '#fff675'],\n colorBack: '#000000',\n stepsPerColor: 4,\n size: 0.3,\n sizeRange: 0.2,\n spreading: 1,\n scale: 0.4,\n },\n};\n\nexport const bubblesPreset: DotOrbitPreset = {\n name: 'Bubbles',\n params: {\n ...defaultPatternSizing,\n speed: 0.4,\n frame: 0,\n colors: ['#29b9e0'],\n colorBack: '#009494',\n stepsPerColor: 2,\n size: 0.9,\n sizeRange: 0.7,\n spreading: 1.0,\n scale: 1.64,\n },\n};\n\nexport const hallucinatoryPreset: DotOrbitPreset = {\n name: 'Hallucinatory',\n params: {\n ...defaultPatternSizing,\n speed: 5,\n frame: 0,\n colors: ['#000000'],\n colorBack: '#ffe500',\n stepsPerColor: 2,\n size: 0.65,\n sizeRange: 0,\n spreading: 0.3,\n scale: 0.5,\n },\n};\n\nexport const dotOrbitPresets: DotOrbitPreset[] = [defaultPreset, bubblesPreset, shinePreset, hallucinatoryPreset];\n\nexport const DotOrbit: React.FC<DotOrbitProps> = memo(function DotOrbitImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n size = defaultPreset.params.size,\n sizeRange = defaultPreset.params.sizeRange,\n spreading = defaultPreset.params.spreading,\n stepsPerColor = defaultPreset.params.stepsPerColor,\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}: DotOrbitProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_size: size,\n u_sizeRange: sizeRange,\n u_spreading: spreading,\n u_stepsPerColor: stepsPerColor,\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 DotOrbitUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={dotOrbitFragmentShader} 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,EAIA;AAAA,OACK;AAqHH;AA/GG,MAAM,gBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,eAAe;AAAA,EACjB;AACF;AAEO,MAAM,cAA8B;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF;AAEO,MAAM,gBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,SAAS;AAAA,IAClB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF;AAEO,MAAM,sBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,SAAS;AAAA,IAClB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF;AAEO,MAAM,kBAAoC,CAAC,eAAe,eAAe,aAAa,mBAAmB;AAEzG,MAAM,WAAoC,KAAK,SAAS,aAAa;AAAA;AAAA,EAE1E,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA,EACjC,SAAS,cAAc,OAAO;AAAA,EAC9B,OAAO,cAAc,OAAO;AAAA,EAC5B,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,gBAAgB,cAAc,OAAO;AAAA;AAAA,EAGrC,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,GAAkB;AAChB,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa;AAAA,IACb,iBAAiB;AAAA;AAAA,IAGjB,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,wBAAwB,UAAoB;AAEpH,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,7 +4,6 @@ export interface GodRaysProps extends ShaderComponentProps, GodRaysParams {
|
|
|
4
4
|
}
|
|
5
5
|
type GodRaysPreset = ShaderPreset<GodRaysParams>;
|
|
6
6
|
export declare const defaultPreset: GodRaysPreset;
|
|
7
|
-
export declare const auroraPreset: GodRaysPreset;
|
|
8
7
|
export declare const warpPreset: GodRaysPreset;
|
|
9
8
|
export declare const linearPreset: GodRaysPreset;
|
|
10
9
|
export declare const etherPreset: GodRaysPreset;
|
package/dist/shaders/god-rays.js
CHANGED
|
@@ -32,24 +32,6 @@ const defaultPreset = {
|
|
|
32
32
|
frame: 0
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
|
-
const auroraPreset = {
|
|
36
|
-
name: "Aurora",
|
|
37
|
-
params: {
|
|
38
|
-
...defaultObjectSizing,
|
|
39
|
-
offsetY: 1,
|
|
40
|
-
colorBack: "#404040",
|
|
41
|
-
colorBloom: "#ff8888",
|
|
42
|
-
colors: ["#666eff", "#66ff99", "#66d9ff"],
|
|
43
|
-
density: 0.5,
|
|
44
|
-
spotty: 0.9,
|
|
45
|
-
midIntensity: 0.8,
|
|
46
|
-
midSize: 0.2,
|
|
47
|
-
intensity: 0.5,
|
|
48
|
-
bloom: 1,
|
|
49
|
-
speed: 0.5,
|
|
50
|
-
frame: 0
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
35
|
const warpPreset = {
|
|
54
36
|
name: "Warp",
|
|
55
37
|
params: {
|
|
@@ -59,8 +41,8 @@ const warpPreset = {
|
|
|
59
41
|
colors: ["#ff00c4", "#ff8c00", "#ffffff"],
|
|
60
42
|
density: 0.45,
|
|
61
43
|
spotty: 0.15,
|
|
62
|
-
midIntensity: 0,
|
|
63
|
-
midSize: 0,
|
|
44
|
+
midIntensity: 0.4,
|
|
45
|
+
midSize: 0.33,
|
|
64
46
|
intensity: 0.79,
|
|
65
47
|
bloom: 0.4,
|
|
66
48
|
speed: 2,
|
|
@@ -72,7 +54,7 @@ const linearPreset = {
|
|
|
72
54
|
params: {
|
|
73
55
|
...defaultObjectSizing,
|
|
74
56
|
offsetX: 0.2,
|
|
75
|
-
offsetY: -0.
|
|
57
|
+
offsetY: -0.8,
|
|
76
58
|
colorBack: "#000000",
|
|
77
59
|
colorBloom: "#eeeeee",
|
|
78
60
|
colors: ["#ffffff1f", "#ffffff3d", "#ffffff29"],
|
|
@@ -94,17 +76,17 @@ const etherPreset = {
|
|
|
94
76
|
colorBack: "#090f1d",
|
|
95
77
|
colorBloom: "#ffffff",
|
|
96
78
|
colors: ["#148effa6", "#c4dffebe", "#232a47"],
|
|
97
|
-
density: 0.
|
|
79
|
+
density: 0.03,
|
|
98
80
|
spotty: 0.77,
|
|
99
81
|
midSize: 0.1,
|
|
100
|
-
midIntensity: 0.
|
|
82
|
+
midIntensity: 0.6,
|
|
101
83
|
intensity: 0.6,
|
|
102
84
|
bloom: 0.6,
|
|
103
85
|
speed: 1,
|
|
104
86
|
frame: 0
|
|
105
87
|
}
|
|
106
88
|
};
|
|
107
|
-
const godRaysPresets = [defaultPreset,
|
|
89
|
+
const godRaysPresets = [defaultPreset, warpPreset, linearPreset, etherPreset];
|
|
108
90
|
const GodRays = memo(function GodRaysImpl({
|
|
109
91
|
// Own props
|
|
110
92
|
speed = defaultPreset.params.speed,
|
|
@@ -157,7 +139,6 @@ const GodRays = memo(function GodRaysImpl({
|
|
|
157
139
|
}, colorPropsAreEqual);
|
|
158
140
|
export {
|
|
159
141
|
GodRays,
|
|
160
|
-
auroraPreset,
|
|
161
142
|
defaultPreset,
|
|
162
143
|
etherPreset,
|
|
163
144
|
godRaysPresets,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/god-rays.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 godRaysFragmentShader,\n ShaderFitOptions,\n type GodRaysParams,\n type GodRaysUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface GodRaysProps extends ShaderComponentProps, GodRaysParams {}\n\ntype GodRaysPreset = ShaderPreset<GodRaysParams>;\n\nexport const defaultPreset: GodRaysPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n offsetX: -0.4,\n offsetY: -0.4,\n colorBack: '#002238',\n colorBloom: '#555522',\n colors: ['#ffcd66', '#ffb899', '#a8fffb'],\n density: 0.55,\n spotty: 0.28,\n midIntensity: 1,\n midSize: 0.4,\n intensity: 0.3,\n bloom: 0,\n speed: 1,\n frame: 0,\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 defaultObjectSizing,\n getShaderColorFromString,\n godRaysFragmentShader,\n ShaderFitOptions,\n type GodRaysParams,\n type GodRaysUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface GodRaysProps extends ShaderComponentProps, GodRaysParams {}\n\ntype GodRaysPreset = ShaderPreset<GodRaysParams>;\n\nexport const defaultPreset: GodRaysPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n offsetX: -0.4,\n offsetY: -0.4,\n colorBack: '#002238',\n colorBloom: '#555522',\n colors: ['#ffcd66', '#ffb899', '#a8fffb'],\n density: 0.55,\n spotty: 0.28,\n midIntensity: 1,\n midSize: 0.4,\n intensity: 0.3,\n bloom: 0,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const warpPreset: GodRaysPreset = {\n name: 'Warp',\n params: {\n ...defaultObjectSizing,\n colorBack: '#000000',\n colorBloom: '#222288',\n colors: ['#ff00c4', '#ff8c00', '#ffffff'],\n density: 0.45,\n spotty: 0.15,\n midIntensity: 0.4,\n midSize: 0.33,\n intensity: 0.79,\n bloom: 0.4,\n speed: 2,\n frame: 0,\n },\n};\n\nexport const linearPreset: GodRaysPreset = {\n name: 'Linear',\n params: {\n ...defaultObjectSizing,\n offsetX: 0.2,\n offsetY: -0.8,\n colorBack: '#000000',\n colorBloom: '#eeeeee',\n colors: ['#ffffff1f', '#ffffff3d', '#ffffff29'],\n density: 0.41,\n spotty: 0.25,\n midSize: 0.1,\n midIntensity: 0.75,\n intensity: 0.79,\n bloom: 1,\n speed: 0.5,\n frame: 0,\n },\n};\n\nexport const etherPreset: GodRaysPreset = {\n name: 'Ether',\n params: {\n ...defaultObjectSizing,\n offsetX: -0.6,\n colorBack: '#090f1d',\n colorBloom: '#ffffff',\n colors: ['#148effa6', '#c4dffebe', '#232a47'],\n density: 0.03,\n spotty: 0.77,\n midSize: 0.1,\n midIntensity: 0.6,\n intensity: 0.6,\n bloom: 0.6,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const godRaysPresets: GodRaysPreset[] = [defaultPreset, warpPreset, linearPreset, etherPreset];\n\nexport const GodRays: React.FC<GodRaysProps> = memo(function GodRaysImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBloom = defaultPreset.params.colorBloom,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n density = defaultPreset.params.density,\n spotty = defaultPreset.params.spotty,\n midIntensity = defaultPreset.params.midIntensity,\n midSize = defaultPreset.params.midSize,\n intensity = defaultPreset.params.intensity,\n bloom = defaultPreset.params.bloom,\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}: GodRaysProps) {\n const uniforms = {\n // Own uniforms\n u_colorBloom: getShaderColorFromString(colorBloom),\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_density: density,\n u_spotty: spotty,\n u_midIntensity: midIntensity,\n u_midSize: midSize,\n u_intensity: intensity,\n u_bloom: bloom,\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 GodRaysUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={godRaysFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,10 +3,9 @@ import { type GrainGradientParams, type ShaderPreset } from '@paper-design/shade
|
|
|
3
3
|
export interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {
|
|
4
4
|
}
|
|
5
5
|
type GrainGradientPreset = ShaderPreset<GrainGradientParams>;
|
|
6
|
-
export declare const defaultPreset: GrainGradientPreset;
|
|
7
6
|
export declare const dotsPreset: GrainGradientPreset;
|
|
8
7
|
export declare const truchetPreset: GrainGradientPreset;
|
|
9
|
-
export declare const
|
|
8
|
+
export declare const defaultPreset: GrainGradientPreset;
|
|
10
9
|
export declare const ripplePreset: GrainGradientPreset;
|
|
11
10
|
export declare const blobPreset: GrainGradientPreset;
|
|
12
11
|
export declare const moonPreset: GrainGradientPreset;
|
|
@@ -15,20 +15,6 @@ import {
|
|
|
15
15
|
GrainGradientShapes
|
|
16
16
|
} from "@paper-design/shaders";
|
|
17
17
|
import { jsx } from "react/jsx-runtime";
|
|
18
|
-
const defaultPreset = {
|
|
19
|
-
name: "Default",
|
|
20
|
-
params: {
|
|
21
|
-
...defaultPatternSizing,
|
|
22
|
-
speed: 1,
|
|
23
|
-
frame: 0,
|
|
24
|
-
colorBack: "#000a0f",
|
|
25
|
-
colors: ["#c4730b", "#bdad5f", "#d8ccc7"],
|
|
26
|
-
softness: 0.7,
|
|
27
|
-
intensity: 0.15,
|
|
28
|
-
noise: 0.5,
|
|
29
|
-
shape: "wave"
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
18
|
const dotsPreset = {
|
|
33
19
|
name: "Dots",
|
|
34
20
|
params: {
|
|
@@ -37,9 +23,9 @@ const dotsPreset = {
|
|
|
37
23
|
speed: 1,
|
|
38
24
|
frame: 0,
|
|
39
25
|
colorBack: "#0a0000",
|
|
40
|
-
colors: ["#6f0000", "#0080ff", "#f2ebc9"],
|
|
41
|
-
softness:
|
|
42
|
-
intensity:
|
|
26
|
+
colors: ["#6f0000", "#0080ff", "#f2ebc9", "#33cc33"],
|
|
27
|
+
softness: 1,
|
|
28
|
+
intensity: 1,
|
|
43
29
|
noise: 0.7,
|
|
44
30
|
shape: "dots"
|
|
45
31
|
}
|
|
@@ -58,8 +44,8 @@ const truchetPreset = {
|
|
|
58
44
|
shape: "truchet"
|
|
59
45
|
}
|
|
60
46
|
};
|
|
61
|
-
const
|
|
62
|
-
name: "
|
|
47
|
+
const defaultPreset = {
|
|
48
|
+
name: "Default",
|
|
63
49
|
params: {
|
|
64
50
|
...defaultObjectSizing,
|
|
65
51
|
speed: 1,
|
|
@@ -118,8 +104,8 @@ const moonPreset = {
|
|
|
118
104
|
}
|
|
119
105
|
};
|
|
120
106
|
const grainGradientPresets = [
|
|
121
|
-
cornersPreset,
|
|
122
107
|
defaultPreset,
|
|
108
|
+
// cornersPreset,
|
|
123
109
|
dotsPreset,
|
|
124
110
|
truchetPreset,
|
|
125
111
|
ripplePreset,
|
|
@@ -184,7 +170,6 @@ const GrainGradient = memo(function GrainGradientImpl({
|
|
|
184
170
|
export {
|
|
185
171
|
GrainGradient,
|
|
186
172
|
blobPreset,
|
|
187
|
-
cornersPreset,
|
|
188
173
|
defaultPreset,
|
|
189
174
|
dotsPreset,
|
|
190
175
|
grainGradientPresets,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/grain-gradient.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n getShaderNoiseTexture,\n grainGradientFragmentShader,\n ShaderFitOptions,\n type GrainGradientUniforms,\n type GrainGradientParams,\n type ShaderPreset,\n defaultPatternSizing,\n defaultObjectSizing,\n GrainGradientShapes,\n} from '@paper-design/shaders';\n\nexport interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {}\n\ntype GrainGradientPreset = ShaderPreset<GrainGradientParams>;\n\
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA8KH;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n getShaderNoiseTexture,\n grainGradientFragmentShader,\n ShaderFitOptions,\n type GrainGradientUniforms,\n type GrainGradientParams,\n type ShaderPreset,\n defaultPatternSizing,\n defaultObjectSizing,\n GrainGradientShapes,\n} from '@paper-design/shaders';\n\nexport interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {}\n\ntype GrainGradientPreset = ShaderPreset<GrainGradientParams>;\n\n// export const defaultPreset: GrainGradientPreset = {\n// name: 'Default',\n// params: {\n// ...defaultPatternSizing,\n// speed: 1,\n// frame: 0,\n// colorBack: '#000a0f',\n// colors: ['#c4730b', '#bdad5f', '#d8ccc7'],\n// softness: 0.7,\n// intensity: 0.15,\n// noise: 0.5,\n// shape: 'wave',\n// },\n// };\n\nexport const dotsPreset: GrainGradientPreset = {\n name: 'Dots',\n params: {\n ...defaultPatternSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#0a0000',\n colors: ['#6f0000', '#0080ff', '#f2ebc9', '#33cc33'],\n softness: 1,\n intensity: 1,\n noise: 0.7,\n shape: 'dots',\n },\n};\n\nexport const truchetPreset: GrainGradientPreset = {\n name: 'Truchet',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#0a0000',\n colors: ['#6f2200', '#eabb7c', '#39b523'],\n softness: 0,\n intensity: 0.2,\n noise: 1,\n shape: 'truchet',\n },\n};\n\nexport const defaultPreset: GrainGradientPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#031018',\n colors: ['#00aeff', '#00ffcc', '#ffc800'],\n softness: 0.4,\n intensity: 0.35,\n noise: 0.35,\n shape: 'corners',\n },\n};\n\nexport const ripplePreset: GrainGradientPreset = {\n name: 'Ripple',\n params: {\n ...defaultObjectSizing,\n scale: 0.5,\n speed: 1,\n frame: 0,\n colorBack: '#140a00',\n colors: ['#6f2d00', '#88ddae', '#2c0b1d'],\n softness: 0.5,\n intensity: 0.5,\n noise: 0.5,\n shape: 'ripple',\n },\n};\n\nexport const blobPreset: GrainGradientPreset = {\n name: 'Blob',\n params: {\n ...defaultObjectSizing,\n scale: 1.3,\n speed: 1,\n frame: 0,\n colorBack: '#0f0e18',\n colors: ['#3e6172', '#a49b74', '#568c50'],\n softness: 0,\n intensity: 0.15,\n noise: 0.5,\n shape: 'blob',\n },\n};\n\nexport const moonPreset: GrainGradientPreset = {\n name: 'Moon',\n params: {\n ...defaultObjectSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#000000', '#28272d', '#ffeccc'],\n softness: 1,\n intensity: 0.56,\n noise: 1,\n shape: 'sphere',\n },\n};\n\nexport const grainGradientPresets: GrainGradientPreset[] = [\n defaultPreset,\n // cornersPreset,\n dotsPreset,\n truchetPreset,\n ripplePreset,\n blobPreset,\n moonPreset,\n];\n\nexport const GrainGradient: React.FC<GrainGradientProps> = memo(function GrainGradientImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n softness = defaultPreset.params.softness,\n intensity = defaultPreset.params.intensity,\n noise = defaultPreset.params.noise,\n shape = defaultPreset.params.shape,\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}: GrainGradientProps) {\n const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\n\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_softness: softness,\n u_intensity: intensity,\n u_noise: noise,\n u_shape: GrainGradientShapes[shape],\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 GrainGradientUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={grainGradientFragmentShader}\n uniforms={uniforms}\n />\n );\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -20,7 +20,7 @@ const defaultPreset = {
|
|
|
20
20
|
...defaultObjectSizing,
|
|
21
21
|
speed: 1,
|
|
22
22
|
frame: 0,
|
|
23
|
-
colorBack: "#
|
|
23
|
+
colorBack: "#ffffff00",
|
|
24
24
|
colorTint: "#ffffff",
|
|
25
25
|
softness: 0.3,
|
|
26
26
|
repetition: 3,
|
|
@@ -37,7 +37,7 @@ const fullScreenPreset = {
|
|
|
37
37
|
...defaultObjectSizing,
|
|
38
38
|
speed: 1,
|
|
39
39
|
frame: 0,
|
|
40
|
-
colorBack: "#
|
|
40
|
+
colorBack: "#ffffff00",
|
|
41
41
|
colorTint: "#ffffff",
|
|
42
42
|
softness: 0.3,
|
|
43
43
|
repetition: 3,
|
|
@@ -57,7 +57,7 @@ const spherePreset = {
|
|
|
57
57
|
scale: 0.7,
|
|
58
58
|
speed: 2,
|
|
59
59
|
frame: 0,
|
|
60
|
-
colorBack: "#
|
|
60
|
+
colorBack: "#ffffff00",
|
|
61
61
|
colorTint: "#d1e0ff",
|
|
62
62
|
softness: 0.45,
|
|
63
63
|
repetition: 4,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/liquid-metal.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 liquidMetalFragmentShader,\n ShaderFitOptions,\n type LiquidMetalUniforms,\n type LiquidMetalParams,\n type ShaderPreset,\n defaultObjectSizing,\n getShaderColorFromString,\n LiquidMetalShapes,\n} from '@paper-design/shaders';\n\nexport interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {}\n\ntype LiquidMetalPreset = ShaderPreset<LiquidMetalParams>;\n\nexport const defaultPreset: LiquidMetalPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n liquidMetalFragmentShader,\n ShaderFitOptions,\n type LiquidMetalUniforms,\n type LiquidMetalParams,\n type ShaderPreset,\n defaultObjectSizing,\n getShaderColorFromString,\n LiquidMetalShapes,\n} from '@paper-design/shaders';\n\nexport interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {}\n\ntype LiquidMetalPreset = ShaderPreset<LiquidMetalParams>;\n\nexport const defaultPreset: LiquidMetalPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#ffffff00',\n colorTint: '#ffffff',\n softness: 0.3,\n repetition: 3,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.3,\n contour: 0.88,\n shape: 'metaballs',\n },\n};\n\nexport const fullScreenPreset: LiquidMetalPreset = {\n name: 'Full Screen',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#ffffff00',\n colorTint: '#ffffff',\n softness: 0.3,\n repetition: 3,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.07,\n contour: 0,\n shape: 'none',\n worldWidth: 0,\n worldHeight: 0,\n },\n};\n\nexport const spherePreset: LiquidMetalPreset = {\n name: 'Sphere',\n params: {\n ...defaultObjectSizing,\n scale: 0.7,\n speed: 2,\n frame: 0,\n colorBack: '#ffffff00',\n colorTint: '#d1e0ff',\n softness: 0.45,\n repetition: 4,\n shiftRed: 1,\n shiftBlue: 0.3,\n distortion: 0.1,\n contour: 0.4,\n shape: 'circle',\n },\n};\n\nexport const dropsPreset: LiquidMetalPreset = {\n name: 'Drops',\n params: {\n ...defaultObjectSizing,\n scale: 2.2,\n speed: 1,\n frame: 0,\n colorBack: '#00042e',\n colorTint: '#5b4dc7',\n softness: 0.45,\n repetition: 4,\n shiftRed: -0.5,\n shiftBlue: -1,\n distortion: 0.1,\n contour: 1,\n shape: 'metaballs',\n },\n};\n\nexport const liquidMetalPresets: LiquidMetalPreset[] = [defaultPreset, spherePreset, dropsPreset, fullScreenPreset];\n\nexport const LiquidMetal: React.FC<LiquidMetalProps> = memo(function LiquidMetalImpl({\n // Own props\n colorBack = defaultPreset.params.colorBack,\n colorTint = defaultPreset.params.colorTint,\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n softness = defaultPreset.params.softness,\n repetition = defaultPreset.params.repetition,\n shiftRed = defaultPreset.params.shiftRed,\n shiftBlue = defaultPreset.params.shiftBlue,\n distortion = defaultPreset.params.distortion,\n contour = defaultPreset.params.contour,\n shape = defaultPreset.params.shape,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: LiquidMetalProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorTint: getShaderColorFromString(colorTint),\n\n u_softness: softness,\n u_repetition: repetition,\n u_shiftRed: shiftRed,\n u_shiftBlue: shiftBlue,\n u_distortion: distortion,\n u_contour: contour,\n u_shape: LiquidMetalShapes[shape],\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies LiquidMetalUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={liquidMetalFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,6 +6,7 @@ type MeshGradientPreset = ShaderPreset<MeshGradientParams>;
|
|
|
6
6
|
export declare const defaultPreset: MeshGradientPreset;
|
|
7
7
|
export declare const purplePreset: MeshGradientPreset;
|
|
8
8
|
export declare const beachPreset: MeshGradientPreset;
|
|
9
|
+
export declare const inkPreset: MeshGradientPreset;
|
|
9
10
|
export declare const meshGradientPresets: MeshGradientPreset[];
|
|
10
11
|
export declare const MeshGradient: React.FC<MeshGradientProps>;
|
|
11
12
|
export {};
|
|
@@ -18,7 +18,7 @@ const defaultPreset = {
|
|
|
18
18
|
params: {
|
|
19
19
|
...defaultObjectSizing,
|
|
20
20
|
speed: 1,
|
|
21
|
-
frame:
|
|
21
|
+
frame: 0,
|
|
22
22
|
colors: ["#5100ff", "#00ff80", "#ffcc00", "#ea00ff"],
|
|
23
23
|
distortion: 0.8,
|
|
24
24
|
swirl: 0.1
|
|
@@ -29,10 +29,10 @@ const purplePreset = {
|
|
|
29
29
|
params: {
|
|
30
30
|
...defaultObjectSizing,
|
|
31
31
|
speed: 0.6,
|
|
32
|
-
frame:
|
|
33
|
-
colors: ["#aaa7d7", "#3c2b8e"
|
|
34
|
-
distortion:
|
|
35
|
-
swirl:
|
|
32
|
+
frame: 0,
|
|
33
|
+
colors: ["#aaa7d7", "#3c2b8e"],
|
|
34
|
+
distortion: 1,
|
|
35
|
+
swirl: 1
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
const beachPreset = {
|
|
@@ -41,12 +41,24 @@ const beachPreset = {
|
|
|
41
41
|
...defaultObjectSizing,
|
|
42
42
|
speed: 0.1,
|
|
43
43
|
frame: 0,
|
|
44
|
-
colors: ["#bcecf6", "#
|
|
44
|
+
colors: ["#bcecf6", "#00aaff", "#00f7ff", "#ffd447"],
|
|
45
45
|
distortion: 0.8,
|
|
46
46
|
swirl: 0.35
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
-
const
|
|
49
|
+
const inkPreset = {
|
|
50
|
+
name: "Ink",
|
|
51
|
+
params: {
|
|
52
|
+
...defaultObjectSizing,
|
|
53
|
+
speed: 1,
|
|
54
|
+
frame: 0,
|
|
55
|
+
colors: ["#ffffff", "#000000"],
|
|
56
|
+
distortion: 1,
|
|
57
|
+
swirl: 0.2,
|
|
58
|
+
rotation: 90
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
const meshGradientPresets = [defaultPreset, inkPreset, purplePreset, beachPreset];
|
|
50
62
|
const MeshGradient = memo(function MeshGradientImpl({
|
|
51
63
|
// Own props
|
|
52
64
|
speed = defaultPreset.params.speed,
|
|
@@ -98,6 +110,7 @@ export {
|
|
|
98
110
|
MeshGradient,
|
|
99
111
|
beachPreset,
|
|
100
112
|
defaultPreset,
|
|
113
|
+
inkPreset,
|
|
101
114
|
meshGradientPresets,
|
|
102
115
|
purplePreset
|
|
103
116
|
};
|
|
@@ -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:
|
|
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: ['#5100ff', '#00ff80', '#ffcc00', '#ea00ff'],\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;AAiGH;AA3FG,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,EACT;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,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,WAAW,SAAS;AAAA,IACnD,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;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,EACZ;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;AAAA,EAG7B,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;AAAA,IAGT,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
|
}
|
|
@@ -4,6 +4,9 @@ export interface MetaballsProps extends ShaderComponentProps, MetaballsParams {
|
|
|
4
4
|
}
|
|
5
5
|
type MetaballsPreset = ShaderPreset<MetaballsParams>;
|
|
6
6
|
export declare const defaultPreset: MetaballsPreset;
|
|
7
|
+
export declare const inkDropsPreset: MetaballsPreset;
|
|
8
|
+
export declare const backgroundPreset: MetaballsPreset;
|
|
9
|
+
export declare const metallicPreset: MetaballsPreset;
|
|
7
10
|
export declare const metaballsPresets: MetaballsPreset[];
|
|
8
11
|
export declare const Metaballs: React.FC<MetaballsProps>;
|
|
9
12
|
export {};
|
|
@@ -26,7 +26,48 @@ const defaultPreset = {
|
|
|
26
26
|
size: 0.75
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
|
-
const
|
|
29
|
+
const inkDropsPreset = {
|
|
30
|
+
name: "Ink Drops",
|
|
31
|
+
params: {
|
|
32
|
+
...defaultObjectSizing,
|
|
33
|
+
scale: 1,
|
|
34
|
+
speed: 2,
|
|
35
|
+
frame: 0,
|
|
36
|
+
colorBack: "#ffffff00",
|
|
37
|
+
colors: ["#000000"],
|
|
38
|
+
count: 18,
|
|
39
|
+
size: 0.1
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
const backgroundPreset = {
|
|
43
|
+
name: "Background",
|
|
44
|
+
params: {
|
|
45
|
+
...defaultObjectSizing,
|
|
46
|
+
speed: 0.5,
|
|
47
|
+
frame: 0,
|
|
48
|
+
colors: ["#ae00ff", "#00ff95", "#ffc105"],
|
|
49
|
+
colorBack: "#2a273f",
|
|
50
|
+
count: 13,
|
|
51
|
+
size: 0.81,
|
|
52
|
+
scale: 4,
|
|
53
|
+
rotation: 0,
|
|
54
|
+
offsetX: -0.3
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
const metallicPreset = {
|
|
58
|
+
name: "Metallic",
|
|
59
|
+
params: {
|
|
60
|
+
...defaultObjectSizing,
|
|
61
|
+
speed: 2,
|
|
62
|
+
frame: 0,
|
|
63
|
+
colors: ["#000000bb", "#00000000", "#33ffaa54"],
|
|
64
|
+
colorBack: "#003e6b",
|
|
65
|
+
count: 10,
|
|
66
|
+
size: 0.81,
|
|
67
|
+
scale: 1.7
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
const metaballsPresets = [defaultPreset, inkDropsPreset, metallicPreset, backgroundPreset];
|
|
30
71
|
const Metaballs = memo(function MetaballsImpl({
|
|
31
72
|
// Own props
|
|
32
73
|
speed = defaultPreset.params.speed,
|
|
@@ -69,7 +110,10 @@ const Metaballs = memo(function MetaballsImpl({
|
|
|
69
110
|
}, colorPropsAreEqual);
|
|
70
111
|
export {
|
|
71
112
|
Metaballs,
|
|
113
|
+
backgroundPreset,
|
|
72
114
|
defaultPreset,
|
|
73
|
-
|
|
115
|
+
inkDropsPreset,
|
|
116
|
+
metaballsPresets,
|
|
117
|
+
metallicPreset
|
|
74
118
|
};
|
|
75
119
|
//# sourceMappingURL=metaballs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/metaballs.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 metaballsFragmentShader,\n ShaderFitOptions,\n type MetaballsParams,\n type MetaballsUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MetaballsProps extends ShaderComponentProps, MetaballsParams {}\n\ntype MetaballsPreset = ShaderPreset<MetaballsParams>;\n\nexport const defaultPreset: MetaballsPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 1,\n frame: 0,\n colorBack: '#103086',\n colors: ['#FFC802', '#FF5601', '#FFC206'],\n count: 7,\n size: 0.75,\n },\n};\n\nexport const metaballsPresets: MetaballsPreset[] = [defaultPreset];\n\nexport const Metaballs: React.FC<MetaballsProps> = memo(function MetaballsImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n size = defaultPreset.params.size,\n count = defaultPreset.params.count,\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}: MetaballsProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_size: size,\n u_count: count,\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 MetaballsUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={metaballsFragmentShader} 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;
|
|
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 metaballsFragmentShader,\n ShaderFitOptions,\n type MetaballsParams,\n type MetaballsUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MetaballsProps extends ShaderComponentProps, MetaballsParams {}\n\ntype MetaballsPreset = ShaderPreset<MetaballsParams>;\n\nexport const defaultPreset: MetaballsPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 1,\n frame: 0,\n colorBack: '#103086',\n colors: ['#FFC802', '#FF5601', '#FFC206'],\n count: 7,\n size: 0.75,\n },\n};\n\nexport const inkDropsPreset: MetaballsPreset = {\n name: 'Ink Drops',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 2,\n frame: 0,\n colorBack: '#ffffff00',\n colors: ['#000000'],\n count: 18,\n size: 0.1,\n },\n};\n\nexport const backgroundPreset: MetaballsPreset = {\n name: 'Background',\n params: {\n ...defaultObjectSizing,\n speed: 0.5,\n frame: 0,\n colors: ['#ae00ff', '#00ff95', '#ffc105'],\n colorBack: '#2a273f',\n count: 13,\n size: 0.81,\n scale: 4.0,\n rotation: 0,\n offsetX: -0.3,\n },\n};\n\nexport const metallicPreset: MetaballsPreset = {\n name: 'Metallic',\n params: {\n ...defaultObjectSizing,\n speed: 2.0,\n frame: 0,\n colors: ['#000000bb', '#00000000', '#33ffaa54'],\n colorBack: '#003e6b',\n count: 10,\n size: 0.81,\n scale: 1.7,\n },\n};\n\nexport const metaballsPresets: MetaballsPreset[] = [defaultPreset, inkDropsPreset, metallicPreset, backgroundPreset];\n\nexport const Metaballs: React.FC<MetaballsProps> = memo(function MetaballsImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n size = defaultPreset.params.size,\n count = defaultPreset.params.count,\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}: MetaballsProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_size: size,\n u_count: count,\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 MetaballsUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={metaballsFragmentShader} 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;AA4GH;AAtGG,MAAM,gBAAiC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,iBAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,SAAS;AAAA,IAClB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,mBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,WAAW;AAAA,IACX,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,iBAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,aAAa,aAAa,WAAW;AAAA,IAC9C,WAAW;AAAA,IACX,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,MAAM,mBAAsC,CAAC,eAAe,gBAAgB,gBAAgB,gBAAgB;AAE5G,MAAM,YAAsC,KAAK,SAAS,cAAc;AAAA;AAAA,EAE7E,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA,EACjC,SAAS,cAAc,OAAO;AAAA,EAC9B,OAAO,cAAc,OAAO;AAAA,EAC5B,QAAQ,cAAc,OAAO;AAAA;AAAA,EAG7B,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,GAAmB;AACjB,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,QAAQ;AAAA,IACR,SAAS;AAAA;AAAA,IAGT,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,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,yBAAyB,UAAoB;AAErH,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,6 +4,9 @@ export interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams
|
|
|
4
4
|
}
|
|
5
5
|
type NeuroNoisePreset = ShaderPreset<NeuroNoiseParams>;
|
|
6
6
|
export declare const defaultPreset: NeuroNoisePreset;
|
|
7
|
+
export declare const sensationPreset: NeuroNoisePreset;
|
|
8
|
+
export declare const bloodstreamPreset: NeuroNoisePreset;
|
|
9
|
+
export declare const ghostPreset: NeuroNoisePreset;
|
|
7
10
|
export declare const neuroNoisePresets: NeuroNoisePreset[];
|
|
8
11
|
export declare const NeuroNoise: React.FC<NeuroNoiseProps>;
|
|
9
12
|
export {};
|
|
@@ -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
|