@paper-design/shaders-react 0.0.35-backbuffer-experiment.2 → 0.0.35-backbuffer-experiment.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/color-props-are-equal.d.ts +6 -0
- package/dist/color-props-are-equal.js +34 -0
- package/dist/color-props-are-equal.js.map +7 -0
- package/dist/index.d.ts +59 -0
- package/dist/index.js +91 -0
- package/dist/index.js.map +7 -0
- package/dist/shader-mount.d.ts +26 -0
- package/dist/shader-mount.js +126 -0
- package/dist/shader-mount.js.map +7 -0
- package/dist/shaders/dithering.d.ts +15 -0
- package/dist/shaders/dithering.js +170 -0
- package/dist/shaders/dithering.js.map +7 -0
- package/dist/shaders/dot-grid.d.ts +10 -0
- package/dist/shaders/dot-grid.js +230 -0
- package/dist/shaders/dot-grid.js.map +7 -0
- package/dist/shaders/dot-orbit.d.ts +9 -0
- package/dist/shaders/dot-orbit.js +80 -0
- package/dist/shaders/dot-orbit.js.map +7 -0
- package/dist/shaders/god-rays.d.ts +13 -0
- package/dist/shaders/god-rays.js +167 -0
- package/dist/shaders/god-rays.js.map +7 -0
- package/dist/shaders/grain-gradient.d.ts +16 -0
- package/dist/shaders/grain-gradient.js +208 -0
- package/dist/shaders/grain-gradient.js.map +7 -0
- package/dist/shaders/liquid-metal.d.ts +12 -0
- package/dist/shaders/liquid-metal.js +156 -0
- package/dist/shaders/liquid-metal.js.map +7 -0
- package/dist/shaders/mesh-gradient.d.ts +11 -0
- package/dist/shaders/mesh-gradient.js +104 -0
- package/dist/shaders/mesh-gradient.js.map +7 -0
- package/dist/shaders/metaballs.d.ts +9 -0
- package/dist/shaders/metaballs.js +75 -0
- package/dist/shaders/metaballs.js.map +7 -0
- package/dist/shaders/neuro-noise.d.ts +9 -0
- package/dist/shaders/neuro-noise.js +76 -0
- package/dist/shaders/neuro-noise.js.map +7 -0
- package/dist/shaders/perlin-noise.d.ts +14 -0
- package/dist/shaders/perlin-noise.js +183 -0
- package/dist/shaders/perlin-noise.js.map +7 -0
- package/dist/shaders/pulsing-border.d.ts +11 -0
- package/dist/shaders/pulsing-border.js +153 -0
- package/dist/shaders/pulsing-border.js.map +7 -0
- package/dist/shaders/simplex-noise.d.ts +9 -0
- package/dist/shaders/simplex-noise.js +80 -0
- package/dist/shaders/simplex-noise.js.map +7 -0
- package/dist/shaders/smoke-ring.d.ts +12 -0
- package/dist/shaders/smoke-ring.js +134 -0
- package/dist/shaders/smoke-ring.js.map +7 -0
- package/dist/shaders/spiral.d.ts +15 -0
- package/dist/shaders/spiral.js +218 -0
- package/dist/shaders/spiral.js.map +7 -0
- package/dist/shaders/swirl.d.ts +12 -0
- package/dist/shaders/swirl.js +136 -0
- package/dist/shaders/swirl.js.map +7 -0
- package/dist/shaders/voronoi.d.ts +10 -0
- package/dist/shaders/voronoi.js +102 -0
- package/dist/shaders/voronoi.js.map +7 -0
- package/dist/shaders/warp.d.ts +19 -0
- package/dist/shaders/warp.js +294 -0
- package/dist/shaders/warp.js.map +7 -0
- package/dist/shaders/waves.d.ts +14 -0
- package/dist/shaders/waves.js +178 -0
- package/dist/shaders/waves.js.map +7 -0
- package/dist/use-merge-refs.d.ts +6 -0
- package/dist/use-merge-refs.js +48 -0
- package/dist/use-merge-refs.js.map +7 -0
- package/package.json +3 -3
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
import { memo } from "react";
|
|
7
|
+
import { ShaderMount } from "../shader-mount";
|
|
8
|
+
import {
|
|
9
|
+
getShaderColorFromString,
|
|
10
|
+
grainGradientFragmentShader,
|
|
11
|
+
ShaderFitOptions,
|
|
12
|
+
defaultPatternSizing,
|
|
13
|
+
defaultObjectSizing,
|
|
14
|
+
GrainGradientShapes
|
|
15
|
+
} from "@paper-design/shaders";
|
|
16
|
+
import { jsx } from "react/jsx-runtime";
|
|
17
|
+
const defaultPreset = {
|
|
18
|
+
name: "Default",
|
|
19
|
+
params: {
|
|
20
|
+
...defaultPatternSizing,
|
|
21
|
+
speed: 1,
|
|
22
|
+
frame: 0,
|
|
23
|
+
colorBack: "#000a0f",
|
|
24
|
+
colors: ["#c4730b", "#bdad5f", "#d8ccc7"],
|
|
25
|
+
softness: 0.7,
|
|
26
|
+
intensity: 0.15,
|
|
27
|
+
noise: 0.5,
|
|
28
|
+
shape: "wave"
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
const dotsPreset = {
|
|
32
|
+
name: "Dots",
|
|
33
|
+
params: {
|
|
34
|
+
...defaultPatternSizing,
|
|
35
|
+
scale: 0.6,
|
|
36
|
+
speed: 1,
|
|
37
|
+
frame: 0,
|
|
38
|
+
colorBack: "#0a0000",
|
|
39
|
+
colors: ["#6f0000", "#0080ff", "#f2ebc9"],
|
|
40
|
+
softness: 0.75,
|
|
41
|
+
intensity: 0.15,
|
|
42
|
+
noise: 0.7,
|
|
43
|
+
shape: "dots"
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const truchetPreset = {
|
|
47
|
+
name: "Truchet",
|
|
48
|
+
params: {
|
|
49
|
+
...defaultPatternSizing,
|
|
50
|
+
speed: 1,
|
|
51
|
+
frame: 0,
|
|
52
|
+
colorBack: "#0a0000",
|
|
53
|
+
colors: ["#6f2200", "#eabb7c", "#39b523"],
|
|
54
|
+
softness: 0,
|
|
55
|
+
intensity: 0.2,
|
|
56
|
+
noise: 1,
|
|
57
|
+
shape: "truchet"
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
const cornersPreset = {
|
|
61
|
+
name: "Corners",
|
|
62
|
+
params: {
|
|
63
|
+
...defaultObjectSizing,
|
|
64
|
+
speed: 1,
|
|
65
|
+
frame: 0,
|
|
66
|
+
colorBack: "#031018",
|
|
67
|
+
colors: ["#00aeff", "#00ffcc", "#ffc800"],
|
|
68
|
+
softness: 0.4,
|
|
69
|
+
intensity: 0.35,
|
|
70
|
+
noise: 0.35,
|
|
71
|
+
shape: "corners"
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
const ripplePreset = {
|
|
75
|
+
name: "Ripple",
|
|
76
|
+
params: {
|
|
77
|
+
...defaultObjectSizing,
|
|
78
|
+
scale: 0.5,
|
|
79
|
+
speed: 1,
|
|
80
|
+
frame: 0,
|
|
81
|
+
colorBack: "#140a00",
|
|
82
|
+
colors: ["#6f2d00", "#88ddae", "#2c0b1d"],
|
|
83
|
+
softness: 0.5,
|
|
84
|
+
intensity: 0.5,
|
|
85
|
+
noise: 0.5,
|
|
86
|
+
shape: "ripple"
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
const blobPreset = {
|
|
90
|
+
name: "Blob",
|
|
91
|
+
params: {
|
|
92
|
+
...defaultObjectSizing,
|
|
93
|
+
scale: 1.3,
|
|
94
|
+
speed: 1,
|
|
95
|
+
frame: 0,
|
|
96
|
+
colorBack: "#0f0e18",
|
|
97
|
+
colors: ["#3e6172", "#a49b74", "#568c50"],
|
|
98
|
+
softness: 0,
|
|
99
|
+
intensity: 0.15,
|
|
100
|
+
noise: 0.5,
|
|
101
|
+
shape: "blob"
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
const spherePreset = {
|
|
105
|
+
name: "Sphere",
|
|
106
|
+
params: {
|
|
107
|
+
...defaultObjectSizing,
|
|
108
|
+
speed: 1,
|
|
109
|
+
frame: 0,
|
|
110
|
+
colorBack: "#000319",
|
|
111
|
+
colors: ["#0059b3", "#37f5f5", "#18c039"],
|
|
112
|
+
softness: 1,
|
|
113
|
+
intensity: 0.15,
|
|
114
|
+
noise: 0.5,
|
|
115
|
+
shape: "sphere"
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
const moonPreset = {
|
|
119
|
+
name: "Moon",
|
|
120
|
+
params: {
|
|
121
|
+
...defaultObjectSizing,
|
|
122
|
+
scale: 0.6,
|
|
123
|
+
speed: 1,
|
|
124
|
+
frame: 0,
|
|
125
|
+
colorBack: "#000000",
|
|
126
|
+
colors: ["#000000", "#28272d", "#ffeccc"],
|
|
127
|
+
softness: 1,
|
|
128
|
+
intensity: 0.56,
|
|
129
|
+
noise: 1,
|
|
130
|
+
shape: "sphere"
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
const grainGradientPresets = [
|
|
134
|
+
cornersPreset,
|
|
135
|
+
defaultPreset,
|
|
136
|
+
dotsPreset,
|
|
137
|
+
truchetPreset,
|
|
138
|
+
ripplePreset,
|
|
139
|
+
blobPreset,
|
|
140
|
+
spherePreset,
|
|
141
|
+
moonPreset
|
|
142
|
+
];
|
|
143
|
+
const GrainGradient = memo(function GrainGradientImpl({
|
|
144
|
+
// Own props
|
|
145
|
+
speed = defaultPreset.params.speed,
|
|
146
|
+
frame = defaultPreset.params.frame,
|
|
147
|
+
colorBack = defaultPreset.params.colorBack,
|
|
148
|
+
colors = defaultPreset.params.colors,
|
|
149
|
+
softness = defaultPreset.params.softness,
|
|
150
|
+
intensity = defaultPreset.params.intensity,
|
|
151
|
+
noise = defaultPreset.params.noise,
|
|
152
|
+
shape = defaultPreset.params.shape,
|
|
153
|
+
// Sizing props
|
|
154
|
+
fit = defaultPreset.params.fit,
|
|
155
|
+
scale = defaultPreset.params.scale,
|
|
156
|
+
rotation = defaultPreset.params.rotation,
|
|
157
|
+
originX = defaultPreset.params.originX,
|
|
158
|
+
originY = defaultPreset.params.originY,
|
|
159
|
+
offsetX = defaultPreset.params.offsetX,
|
|
160
|
+
offsetY = defaultPreset.params.offsetY,
|
|
161
|
+
worldWidth = defaultPreset.params.worldWidth,
|
|
162
|
+
worldHeight = defaultPreset.params.worldHeight,
|
|
163
|
+
...props
|
|
164
|
+
}) {
|
|
165
|
+
const uniforms = {
|
|
166
|
+
// Own uniforms
|
|
167
|
+
u_colorBack: getShaderColorFromString(colorBack),
|
|
168
|
+
u_colors: colors.map(getShaderColorFromString),
|
|
169
|
+
u_colorsCount: colors.length,
|
|
170
|
+
u_softness: softness,
|
|
171
|
+
u_intensity: intensity,
|
|
172
|
+
u_noise: noise,
|
|
173
|
+
u_shape: GrainGradientShapes[shape],
|
|
174
|
+
// Sizing uniforms
|
|
175
|
+
u_fit: ShaderFitOptions[fit],
|
|
176
|
+
u_scale: scale,
|
|
177
|
+
u_rotation: rotation,
|
|
178
|
+
u_offsetX: offsetX,
|
|
179
|
+
u_offsetY: offsetY,
|
|
180
|
+
u_originX: originX,
|
|
181
|
+
u_originY: originY,
|
|
182
|
+
u_worldWidth: worldWidth,
|
|
183
|
+
u_worldHeight: worldHeight
|
|
184
|
+
};
|
|
185
|
+
return /* @__PURE__ */ jsx(
|
|
186
|
+
ShaderMount,
|
|
187
|
+
{
|
|
188
|
+
...props,
|
|
189
|
+
speed,
|
|
190
|
+
frame,
|
|
191
|
+
fragmentShader: grainGradientFragmentShader,
|
|
192
|
+
uniforms
|
|
193
|
+
}
|
|
194
|
+
);
|
|
195
|
+
});
|
|
196
|
+
export {
|
|
197
|
+
GrainGradient,
|
|
198
|
+
blobPreset,
|
|
199
|
+
cornersPreset,
|
|
200
|
+
defaultPreset,
|
|
201
|
+
dotsPreset,
|
|
202
|
+
grainGradientPresets,
|
|
203
|
+
moonPreset,
|
|
204
|
+
ripplePreset,
|
|
205
|
+
spherePreset,
|
|
206
|
+
truchetPreset
|
|
207
|
+
};
|
|
208
|
+
//# sourceMappingURL=grain-gradient.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/shaders/grain-gradient.tsx"],
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport {\n getShaderColorFromString,\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\nexport 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'],\n softness: 0.75,\n intensity: 0.15,\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 cornersPreset: GrainGradientPreset = {\n name: 'Corners',\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 spherePreset: GrainGradientPreset = {\n name: 'Sphere',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#000319',\n colors: ['#0059b3', '#37f5f5', '#18c039'],\n softness: 1,\n intensity: 0.15,\n noise: 0.5,\n shape: 'sphere',\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 cornersPreset,\n defaultPreset,\n dotsPreset,\n truchetPreset,\n ripplePreset,\n blobPreset,\n spherePreset,\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}) {\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\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
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount';
|
|
2
|
+
import { type LiquidMetalParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
|
+
export interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {
|
|
4
|
+
}
|
|
5
|
+
type LiquidMetalPreset = ShaderPreset<LiquidMetalParams>;
|
|
6
|
+
export declare const defaultPreset: LiquidMetalPreset;
|
|
7
|
+
export declare const fullScreenPreset: LiquidMetalPreset;
|
|
8
|
+
export declare const spherePreset: LiquidMetalPreset;
|
|
9
|
+
export declare const dropsPreset: LiquidMetalPreset;
|
|
10
|
+
export declare const liquidMetalPresets: LiquidMetalPreset[];
|
|
11
|
+
export declare const LiquidMetal: React.FC<LiquidMetalProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
import { memo } from "react";
|
|
7
|
+
import { ShaderMount } from "../shader-mount";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal";
|
|
9
|
+
import {
|
|
10
|
+
liquidMetalFragmentShader,
|
|
11
|
+
ShaderFitOptions,
|
|
12
|
+
defaultObjectSizing,
|
|
13
|
+
getShaderColorFromString,
|
|
14
|
+
LiquidMetalShapes
|
|
15
|
+
} from "@paper-design/shaders";
|
|
16
|
+
import { jsx } from "react/jsx-runtime";
|
|
17
|
+
const defaultPreset = {
|
|
18
|
+
name: "Default",
|
|
19
|
+
params: {
|
|
20
|
+
...defaultObjectSizing,
|
|
21
|
+
speed: 1,
|
|
22
|
+
frame: 0,
|
|
23
|
+
colorBack: "#ffffff",
|
|
24
|
+
colorTint: "#ffffff",
|
|
25
|
+
softness: 0.3,
|
|
26
|
+
repetition: 3,
|
|
27
|
+
shiftRed: 0.3,
|
|
28
|
+
shiftBlue: 0.3,
|
|
29
|
+
distortion: 0.3,
|
|
30
|
+
contour: 0.88,
|
|
31
|
+
shape: "metaballs"
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
const fullScreenPreset = {
|
|
35
|
+
name: "Full Screen",
|
|
36
|
+
params: {
|
|
37
|
+
...defaultObjectSizing,
|
|
38
|
+
speed: 1,
|
|
39
|
+
frame: 0,
|
|
40
|
+
colorBack: "#111111",
|
|
41
|
+
colorTint: "#ffffff",
|
|
42
|
+
softness: 0.3,
|
|
43
|
+
repetition: 3,
|
|
44
|
+
shiftRed: 0.3,
|
|
45
|
+
shiftBlue: 0.3,
|
|
46
|
+
distortion: 0.07,
|
|
47
|
+
contour: 0,
|
|
48
|
+
shape: "none",
|
|
49
|
+
worldWidth: 0,
|
|
50
|
+
worldHeight: 0
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
const spherePreset = {
|
|
54
|
+
name: "Sphere",
|
|
55
|
+
params: {
|
|
56
|
+
...defaultObjectSizing,
|
|
57
|
+
scale: 0.7,
|
|
58
|
+
speed: 2,
|
|
59
|
+
frame: 0,
|
|
60
|
+
colorBack: "#ffffff",
|
|
61
|
+
colorTint: "#d1e0ff",
|
|
62
|
+
softness: 0.45,
|
|
63
|
+
repetition: 4,
|
|
64
|
+
shiftRed: 1,
|
|
65
|
+
shiftBlue: 0.3,
|
|
66
|
+
distortion: 0.1,
|
|
67
|
+
contour: 0.4,
|
|
68
|
+
shape: "circle"
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
const dropsPreset = {
|
|
72
|
+
name: "Drops",
|
|
73
|
+
params: {
|
|
74
|
+
...defaultObjectSizing,
|
|
75
|
+
scale: 2.2,
|
|
76
|
+
speed: 1,
|
|
77
|
+
frame: 0,
|
|
78
|
+
colorBack: "#00042e",
|
|
79
|
+
colorTint: "#5b4dc7",
|
|
80
|
+
softness: 0.45,
|
|
81
|
+
repetition: 4,
|
|
82
|
+
shiftRed: -0.5,
|
|
83
|
+
shiftBlue: -1,
|
|
84
|
+
distortion: 0.1,
|
|
85
|
+
contour: 1,
|
|
86
|
+
shape: "metaballs"
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
const liquidMetalPresets = [defaultPreset, spherePreset, dropsPreset, fullScreenPreset];
|
|
90
|
+
const LiquidMetal = memo(function LiquidMetalImpl({
|
|
91
|
+
// Own props
|
|
92
|
+
colorBack = defaultPreset.params.colorBack,
|
|
93
|
+
colorTint = defaultPreset.params.colorTint,
|
|
94
|
+
speed = defaultPreset.params.speed,
|
|
95
|
+
frame = defaultPreset.params.frame,
|
|
96
|
+
softness = defaultPreset.params.softness,
|
|
97
|
+
repetition = defaultPreset.params.repetition,
|
|
98
|
+
shiftRed = defaultPreset.params.shiftRed,
|
|
99
|
+
shiftBlue = defaultPreset.params.shiftBlue,
|
|
100
|
+
distortion = defaultPreset.params.distortion,
|
|
101
|
+
contour = defaultPreset.params.contour,
|
|
102
|
+
shape = defaultPreset.params.shape,
|
|
103
|
+
// Sizing props
|
|
104
|
+
fit = defaultPreset.params.fit,
|
|
105
|
+
scale = defaultPreset.params.scale,
|
|
106
|
+
rotation = defaultPreset.params.rotation,
|
|
107
|
+
originX = defaultPreset.params.originX,
|
|
108
|
+
originY = defaultPreset.params.originY,
|
|
109
|
+
offsetX = defaultPreset.params.offsetX,
|
|
110
|
+
offsetY = defaultPreset.params.offsetY,
|
|
111
|
+
worldWidth = defaultPreset.params.worldWidth,
|
|
112
|
+
worldHeight = defaultPreset.params.worldHeight,
|
|
113
|
+
...props
|
|
114
|
+
}) {
|
|
115
|
+
const uniforms = {
|
|
116
|
+
// Own uniforms
|
|
117
|
+
u_colorBack: getShaderColorFromString(colorBack),
|
|
118
|
+
u_colorTint: getShaderColorFromString(colorTint),
|
|
119
|
+
u_softness: softness,
|
|
120
|
+
u_repetition: repetition,
|
|
121
|
+
u_shiftRed: shiftRed,
|
|
122
|
+
u_shiftBlue: shiftBlue,
|
|
123
|
+
u_distortion: distortion,
|
|
124
|
+
u_contour: contour,
|
|
125
|
+
u_shape: LiquidMetalShapes[shape],
|
|
126
|
+
// Sizing uniforms
|
|
127
|
+
u_fit: ShaderFitOptions[fit],
|
|
128
|
+
u_scale: scale,
|
|
129
|
+
u_rotation: rotation,
|
|
130
|
+
u_offsetX: offsetX,
|
|
131
|
+
u_offsetY: offsetY,
|
|
132
|
+
u_originX: originX,
|
|
133
|
+
u_originY: originY,
|
|
134
|
+
u_worldWidth: worldWidth,
|
|
135
|
+
u_worldHeight: worldHeight
|
|
136
|
+
};
|
|
137
|
+
return /* @__PURE__ */ jsx(
|
|
138
|
+
ShaderMount,
|
|
139
|
+
{
|
|
140
|
+
...props,
|
|
141
|
+
speed,
|
|
142
|
+
frame,
|
|
143
|
+
fragmentShader: liquidMetalFragmentShader,
|
|
144
|
+
uniforms
|
|
145
|
+
}
|
|
146
|
+
);
|
|
147
|
+
}, colorPropsAreEqual);
|
|
148
|
+
export {
|
|
149
|
+
LiquidMetal,
|
|
150
|
+
defaultPreset,
|
|
151
|
+
dropsPreset,
|
|
152
|
+
fullScreenPreset,
|
|
153
|
+
liquidMetalPresets,
|
|
154
|
+
spherePreset
|
|
155
|
+
};
|
|
156
|
+
//# sourceMappingURL=liquid-metal.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/shaders/liquid-metal.tsx"],
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\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: '#ffffff',\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: '#111111',\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: '#ffffff',\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
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount';
|
|
2
|
+
import { type MeshGradientParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
|
+
export interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {
|
|
4
|
+
}
|
|
5
|
+
type MeshGradientPreset = ShaderPreset<MeshGradientParams>;
|
|
6
|
+
export declare const defaultPreset: MeshGradientPreset;
|
|
7
|
+
export declare const purplePreset: MeshGradientPreset;
|
|
8
|
+
export declare const beachPreset: MeshGradientPreset;
|
|
9
|
+
export declare const meshGradientPresets: MeshGradientPreset[];
|
|
10
|
+
export declare const MeshGradient: React.FC<MeshGradientProps>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
import { memo } from "react";
|
|
7
|
+
import { ShaderMount } from "../shader-mount";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal";
|
|
9
|
+
import {
|
|
10
|
+
defaultObjectSizing,
|
|
11
|
+
getShaderColorFromString,
|
|
12
|
+
meshGradientFragmentShader,
|
|
13
|
+
ShaderFitOptions
|
|
14
|
+
} from "@paper-design/shaders";
|
|
15
|
+
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
const defaultPreset = {
|
|
17
|
+
name: "Default",
|
|
18
|
+
params: {
|
|
19
|
+
...defaultObjectSizing,
|
|
20
|
+
speed: 1,
|
|
21
|
+
frame: 4e4,
|
|
22
|
+
colors: ["#5100ff", "#00ff80", "#ffcc00", "#ea00ff"],
|
|
23
|
+
distortion: 0.8,
|
|
24
|
+
swirl: 0.1
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
const purplePreset = {
|
|
28
|
+
name: "Purple",
|
|
29
|
+
params: {
|
|
30
|
+
...defaultObjectSizing,
|
|
31
|
+
speed: 0.6,
|
|
32
|
+
frame: 100,
|
|
33
|
+
colors: ["#aaa7d7", "#3c2b8e", "#f4eabb", "#c99cd5"],
|
|
34
|
+
distortion: 0.3,
|
|
35
|
+
swirl: 0.5
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
const beachPreset = {
|
|
39
|
+
name: "Beach",
|
|
40
|
+
params: {
|
|
41
|
+
...defaultObjectSizing,
|
|
42
|
+
speed: 0.1,
|
|
43
|
+
frame: 0,
|
|
44
|
+
colors: ["#bcecf6", "#80c3e4", "#f3eccb", "#f3d987"],
|
|
45
|
+
distortion: 0.8,
|
|
46
|
+
swirl: 0.35
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
const meshGradientPresets = [defaultPreset, purplePreset, beachPreset];
|
|
50
|
+
const MeshGradient = memo(function MeshGradientImpl({
|
|
51
|
+
// Own props
|
|
52
|
+
speed = defaultPreset.params.speed,
|
|
53
|
+
frame = defaultPreset.params.frame,
|
|
54
|
+
colors = defaultPreset.params.colors,
|
|
55
|
+
distortion = defaultPreset.params.distortion,
|
|
56
|
+
swirl = defaultPreset.params.swirl,
|
|
57
|
+
// Sizing props
|
|
58
|
+
fit = defaultPreset.params.fit,
|
|
59
|
+
rotation = defaultPreset.params.rotation,
|
|
60
|
+
scale = defaultPreset.params.scale,
|
|
61
|
+
originX = defaultPreset.params.originX,
|
|
62
|
+
originY = defaultPreset.params.originY,
|
|
63
|
+
offsetX = defaultPreset.params.offsetX,
|
|
64
|
+
offsetY = defaultPreset.params.offsetY,
|
|
65
|
+
worldWidth = defaultPreset.params.worldWidth,
|
|
66
|
+
worldHeight = defaultPreset.params.worldHeight,
|
|
67
|
+
...props
|
|
68
|
+
}) {
|
|
69
|
+
const uniforms = {
|
|
70
|
+
// Own uniforms
|
|
71
|
+
u_colors: colors.map(getShaderColorFromString),
|
|
72
|
+
u_colorsCount: colors.length,
|
|
73
|
+
u_distortion: distortion,
|
|
74
|
+
u_swirl: swirl,
|
|
75
|
+
// Sizing uniforms
|
|
76
|
+
u_fit: ShaderFitOptions[fit],
|
|
77
|
+
u_rotation: rotation,
|
|
78
|
+
u_scale: scale,
|
|
79
|
+
u_offsetX: offsetX,
|
|
80
|
+
u_offsetY: offsetY,
|
|
81
|
+
u_originX: originX,
|
|
82
|
+
u_originY: originY,
|
|
83
|
+
u_worldWidth: worldWidth,
|
|
84
|
+
u_worldHeight: worldHeight
|
|
85
|
+
};
|
|
86
|
+
return /* @__PURE__ */ jsx(
|
|
87
|
+
ShaderMount,
|
|
88
|
+
{
|
|
89
|
+
...props,
|
|
90
|
+
speed,
|
|
91
|
+
frame,
|
|
92
|
+
fragmentShader: meshGradientFragmentShader,
|
|
93
|
+
uniforms
|
|
94
|
+
}
|
|
95
|
+
);
|
|
96
|
+
}, colorPropsAreEqual);
|
|
97
|
+
export {
|
|
98
|
+
MeshGradient,
|
|
99
|
+
beachPreset,
|
|
100
|
+
defaultPreset,
|
|
101
|
+
meshGradientPresets,
|
|
102
|
+
purplePreset
|
|
103
|
+
};
|
|
104
|
+
//# sourceMappingURL=mesh-gradient.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/shaders/mesh-gradient.tsx"],
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\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: 40000,\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: 100,\n colors: ['#aaa7d7', '#3c2b8e', '#f4eabb', '#c99cd5'],\n distortion: 0.3,\n swirl: 0.5,\n },\n};\n\nexport const beachPreset: MeshGradientPreset = {\n name: 'Beach',\n params: {\n ...defaultObjectSizing,\n speed: 0.1,\n frame: 0,\n colors: ['#bcecf6', '#80c3e4', '#f3eccb', '#f3d987'],\n distortion: 0.8,\n swirl: 0.35,\n },\n};\n\nexport const meshGradientPresets: MeshGradientPreset[] = [defaultPreset, 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;AAoFH;AA9EG,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,WAAW,WAAW,SAAS;AAAA,IACnD,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,sBAA4C,CAAC,eAAe,cAAc,WAAW;AAE3F,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
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount';
|
|
2
|
+
import { type MetaballsParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
|
+
export interface MetaballsProps extends ShaderComponentProps, MetaballsParams {
|
|
4
|
+
}
|
|
5
|
+
type MetaballsPreset = ShaderPreset<MetaballsParams>;
|
|
6
|
+
export declare const defaultPreset: MetaballsPreset;
|
|
7
|
+
export declare const metaballsPresets: MetaballsPreset[];
|
|
8
|
+
export declare const Metaballs: React.FC<MetaballsProps>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
import { memo } from "react";
|
|
7
|
+
import { ShaderMount } from "../shader-mount";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal";
|
|
9
|
+
import {
|
|
10
|
+
defaultObjectSizing,
|
|
11
|
+
getShaderColorFromString,
|
|
12
|
+
metaballsFragmentShader,
|
|
13
|
+
ShaderFitOptions
|
|
14
|
+
} from "@paper-design/shaders";
|
|
15
|
+
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
const defaultPreset = {
|
|
17
|
+
name: "Default",
|
|
18
|
+
params: {
|
|
19
|
+
...defaultObjectSizing,
|
|
20
|
+
scale: 1,
|
|
21
|
+
speed: 1,
|
|
22
|
+
frame: 0,
|
|
23
|
+
colorBack: "#ffffff",
|
|
24
|
+
colors: ["#b399ff", "#99ffc4", "#ffe699", "#e099ff"],
|
|
25
|
+
count: 7,
|
|
26
|
+
size: 1
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
const metaballsPresets = [defaultPreset];
|
|
30
|
+
const Metaballs = memo(function MetaballsImpl({
|
|
31
|
+
// Own props
|
|
32
|
+
speed = defaultPreset.params.speed,
|
|
33
|
+
frame = defaultPreset.params.frame,
|
|
34
|
+
colorBack = defaultPreset.params.colorBack,
|
|
35
|
+
colors = defaultPreset.params.colors,
|
|
36
|
+
size = defaultPreset.params.size,
|
|
37
|
+
count = defaultPreset.params.count,
|
|
38
|
+
// Sizing props
|
|
39
|
+
fit = defaultPreset.params.fit,
|
|
40
|
+
rotation = defaultPreset.params.rotation,
|
|
41
|
+
scale = defaultPreset.params.scale,
|
|
42
|
+
originX = defaultPreset.params.originX,
|
|
43
|
+
originY = defaultPreset.params.originY,
|
|
44
|
+
offsetX = defaultPreset.params.offsetX,
|
|
45
|
+
offsetY = defaultPreset.params.offsetY,
|
|
46
|
+
worldWidth = defaultPreset.params.worldWidth,
|
|
47
|
+
worldHeight = defaultPreset.params.worldHeight,
|
|
48
|
+
...props
|
|
49
|
+
}) {
|
|
50
|
+
const uniforms = {
|
|
51
|
+
// Own uniforms
|
|
52
|
+
u_colorBack: getShaderColorFromString(colorBack),
|
|
53
|
+
u_colors: colors.map(getShaderColorFromString),
|
|
54
|
+
u_colorsCount: colors.length,
|
|
55
|
+
u_size: size,
|
|
56
|
+
u_count: count,
|
|
57
|
+
// Sizing uniforms
|
|
58
|
+
u_fit: ShaderFitOptions[fit],
|
|
59
|
+
u_rotation: rotation,
|
|
60
|
+
u_scale: scale,
|
|
61
|
+
u_offsetX: offsetX,
|
|
62
|
+
u_offsetY: offsetY,
|
|
63
|
+
u_originX: originX,
|
|
64
|
+
u_originY: originY,
|
|
65
|
+
u_worldWidth: worldWidth,
|
|
66
|
+
u_worldHeight: worldHeight
|
|
67
|
+
};
|
|
68
|
+
return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: metaballsFragmentShader, uniforms });
|
|
69
|
+
}, colorPropsAreEqual);
|
|
70
|
+
export {
|
|
71
|
+
Metaballs,
|
|
72
|
+
defaultPreset,
|
|
73
|
+
metaballsPresets
|
|
74
|
+
};
|
|
75
|
+
//# sourceMappingURL=metaballs.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/shaders/metaballs.tsx"],
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\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: '#ffffff',\n colors: ['#b399ff', '#99ffc4', '#ffe699', '#e099ff'],\n count: 7,\n size: 1,\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;AAgEH;AA1DG,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,WAAW,SAAS;AAAA,IACnD,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,mBAAsC,CAAC,aAAa;AAE1D,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
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount';
|
|
2
|
+
import { type NeuroNoiseParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
|
+
export interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams {
|
|
4
|
+
}
|
|
5
|
+
type NeuroNoisePreset = ShaderPreset<NeuroNoiseParams>;
|
|
6
|
+
export declare const defaultPreset: NeuroNoisePreset;
|
|
7
|
+
export declare const neuroNoisePresets: NeuroNoisePreset[];
|
|
8
|
+
export declare const NeuroNoise: React.FC<NeuroNoiseProps>;
|
|
9
|
+
export {};
|