@paper-design/shaders-react 0.0.0-canary.156ab35
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/LICENSE +21 -0
- package/README.md +29 -0
- 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 +86 -0
- package/dist/index.js +129 -0
- package/dist/index.js.map +7 -0
- package/dist/shader-mount.d.ts +38 -0
- package/dist/shader-mount.js +149 -0
- package/dist/shader-mount.js.map +7 -0
- package/dist/shaders/color-panels.d.ts +12 -0
- package/dist/shaders/color-panels.js +173 -0
- package/dist/shaders/color-panels.js.map +7 -0
- package/dist/shaders/dithering.d.ts +16 -0
- package/dist/shaders/dithering.js +158 -0
- package/dist/shaders/dithering.js.map +7 -0
- package/dist/shaders/dot-grid.d.ts +9 -0
- package/dist/shaders/dot-grid.js +139 -0
- package/dist/shaders/dot-grid.js.map +7 -0
- package/dist/shaders/dot-orbit.d.ts +12 -0
- package/dist/shaders/dot-orbit.js +130 -0
- package/dist/shaders/dot-orbit.js.map +7 -0
- package/dist/shaders/fluted-glass.d.ts +14 -0
- package/dist/shaders/fluted-glass.js +183 -0
- package/dist/shaders/fluted-glass.js.map +7 -0
- package/dist/shaders/god-rays.d.ts +12 -0
- package/dist/shaders/god-rays.js +150 -0
- package/dist/shaders/god-rays.js.map +7 -0
- package/dist/shaders/grain-gradient.d.ts +14 -0
- package/dist/shaders/grain-gradient.js +177 -0
- package/dist/shaders/grain-gradient.js.map +7 -0
- package/dist/shaders/heatmap.d.ts +14 -0
- package/dist/shaders/heatmap.js +161 -0
- package/dist/shaders/heatmap.js.map +7 -0
- package/dist/shaders/image-dithering.d.ts +14 -0
- package/dist/shaders/image-dithering.js +145 -0
- package/dist/shaders/image-dithering.js.map +7 -0
- package/dist/shaders/image-halftone-dots.d.ts +12 -0
- package/dist/shaders/image-halftone-dots.js +171 -0
- package/dist/shaders/image-halftone-dots.js.map +7 -0
- package/dist/shaders/liquid-metal.d.ts +16 -0
- package/dist/shaders/liquid-metal.js +201 -0
- package/dist/shaders/liquid-metal.js.map +7 -0
- package/dist/shaders/mesh-gradient.d.ts +12 -0
- package/dist/shaders/mesh-gradient.js +129 -0
- package/dist/shaders/mesh-gradient.js.map +7 -0
- package/dist/shaders/metaballs.d.ts +12 -0
- package/dist/shaders/metaballs.js +121 -0
- package/dist/shaders/metaballs.js.map +7 -0
- package/dist/shaders/neuro-noise.d.ts +12 -0
- package/dist/shaders/neuro-noise.js +126 -0
- package/dist/shaders/neuro-noise.js.map +7 -0
- package/dist/shaders/paper-texture.d.ts +20 -0
- package/dist/shaders/paper-texture.js +198 -0
- package/dist/shaders/paper-texture.js.map +7 -0
- package/dist/shaders/perlin-noise.d.ts +12 -0
- package/dist/shaders/perlin-noise.js +142 -0
- package/dist/shaders/perlin-noise.js.map +7 -0
- package/dist/shaders/pulsing-border.d.ts +12 -0
- package/dist/shaders/pulsing-border.js +216 -0
- package/dist/shaders/pulsing-border.js.map +7 -0
- package/dist/shaders/simplex-noise.d.ts +12 -0
- package/dist/shaders/simplex-noise.js +125 -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 +137 -0
- package/dist/shaders/smoke-ring.js.map +7 -0
- package/dist/shaders/spiral.d.ts +12 -0
- package/dist/shaders/spiral.js +151 -0
- package/dist/shaders/spiral.js.map +7 -0
- package/dist/shaders/static-mesh-gradient.d.ts +12 -0
- package/dist/shaders/static-mesh-gradient.js +158 -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.d.ts +12 -0
- package/dist/shaders/swirl.js +146 -0
- package/dist/shaders/swirl.js.map +7 -0
- package/dist/shaders/voronoi.d.ts +12 -0
- package/dist/shaders/voronoi.js +137 -0
- package/dist/shaders/voronoi.js.map +7 -0
- package/dist/shaders/warp.d.ts +14 -0
- package/dist/shaders/warp.js +194 -0
- package/dist/shaders/warp.js.map +7 -0
- package/dist/shaders/water.d.ts +14 -0
- package/dist/shaders/water.js +148 -0
- package/dist/shaders/water.js.map +7 -0
- package/dist/shaders/waves.d.ts +12 -0
- package/dist/shaders/waves.js +136 -0
- package/dist/shaders/waves.js.map +7 -0
- package/dist/suspend.d.ts +8 -0
- package/dist/suspend.js +43 -0
- package/dist/suspend.js.map +7 -0
- package/dist/transparent-pixel.d.ts +1 -0
- package/dist/transparent-pixel.js +10 -0
- package/dist/transparent-pixel.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 +41 -0
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
import { memo } from "react";
|
|
7
|
+
import { ShaderMount } from "../shader-mount.js";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
9
|
+
import {
|
|
10
|
+
getShaderColorFromString,
|
|
11
|
+
getShaderNoiseTexture,
|
|
12
|
+
dotOrbitFragmentShader,
|
|
13
|
+
ShaderFitOptions,
|
|
14
|
+
defaultPatternSizing
|
|
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.5,
|
|
22
|
+
frame: 0,
|
|
23
|
+
colorBack: "#000000",
|
|
24
|
+
colors: ["#ffc96b", "#ff6200", "#ff2f00", "#421100", "#1a0000"],
|
|
25
|
+
size: 1,
|
|
26
|
+
sizeRange: 0,
|
|
27
|
+
spreading: 1,
|
|
28
|
+
stepsPerColor: 4
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
const shinePreset = {
|
|
32
|
+
name: "Shine",
|
|
33
|
+
params: {
|
|
34
|
+
...defaultPatternSizing,
|
|
35
|
+
speed: 0.1,
|
|
36
|
+
frame: 0,
|
|
37
|
+
colors: ["#ffffff", "#006aff", "#fff675"],
|
|
38
|
+
colorBack: "#000000",
|
|
39
|
+
stepsPerColor: 4,
|
|
40
|
+
size: 0.3,
|
|
41
|
+
sizeRange: 0.2,
|
|
42
|
+
spreading: 1,
|
|
43
|
+
scale: 0.4
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const bubblesPreset = {
|
|
47
|
+
name: "Bubbles",
|
|
48
|
+
params: {
|
|
49
|
+
...defaultPatternSizing,
|
|
50
|
+
speed: 0.4,
|
|
51
|
+
frame: 0,
|
|
52
|
+
colors: ["#D0D2D5"],
|
|
53
|
+
colorBack: "#989CA4",
|
|
54
|
+
stepsPerColor: 2,
|
|
55
|
+
size: 0.9,
|
|
56
|
+
sizeRange: 0.7,
|
|
57
|
+
spreading: 1,
|
|
58
|
+
scale: 1.64
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
const hallucinatoryPreset = {
|
|
62
|
+
name: "Hallucinatory",
|
|
63
|
+
params: {
|
|
64
|
+
...defaultPatternSizing,
|
|
65
|
+
speed: 5,
|
|
66
|
+
frame: 0,
|
|
67
|
+
colors: ["#000000"],
|
|
68
|
+
colorBack: "#ffe500",
|
|
69
|
+
stepsPerColor: 2,
|
|
70
|
+
size: 0.65,
|
|
71
|
+
sizeRange: 0,
|
|
72
|
+
spreading: 0.3,
|
|
73
|
+
scale: 0.5
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
const dotOrbitPresets = [defaultPreset, bubblesPreset, shinePreset, hallucinatoryPreset];
|
|
77
|
+
const DotOrbit = memo(function DotOrbitImpl({
|
|
78
|
+
// Own props
|
|
79
|
+
speed = defaultPreset.params.speed,
|
|
80
|
+
frame = defaultPreset.params.frame,
|
|
81
|
+
colorBack = defaultPreset.params.colorBack,
|
|
82
|
+
colors = defaultPreset.params.colors,
|
|
83
|
+
size = defaultPreset.params.size,
|
|
84
|
+
sizeRange = defaultPreset.params.sizeRange,
|
|
85
|
+
spreading = defaultPreset.params.spreading,
|
|
86
|
+
stepsPerColor = defaultPreset.params.stepsPerColor,
|
|
87
|
+
// Sizing props
|
|
88
|
+
fit = defaultPreset.params.fit,
|
|
89
|
+
scale = defaultPreset.params.scale,
|
|
90
|
+
rotation = defaultPreset.params.rotation,
|
|
91
|
+
originX = defaultPreset.params.originX,
|
|
92
|
+
originY = defaultPreset.params.originY,
|
|
93
|
+
offsetX = defaultPreset.params.offsetX,
|
|
94
|
+
offsetY = defaultPreset.params.offsetY,
|
|
95
|
+
worldWidth = defaultPreset.params.worldWidth,
|
|
96
|
+
worldHeight = defaultPreset.params.worldHeight,
|
|
97
|
+
...props
|
|
98
|
+
}) {
|
|
99
|
+
const uniforms = {
|
|
100
|
+
// Own uniforms
|
|
101
|
+
u_colorBack: getShaderColorFromString(colorBack),
|
|
102
|
+
u_colors: colors.map(getShaderColorFromString),
|
|
103
|
+
u_colorsCount: colors.length,
|
|
104
|
+
u_size: size,
|
|
105
|
+
u_sizeRange: sizeRange,
|
|
106
|
+
u_spreading: spreading,
|
|
107
|
+
u_stepsPerColor: stepsPerColor,
|
|
108
|
+
u_noiseTexture: getShaderNoiseTexture(),
|
|
109
|
+
// Sizing uniforms
|
|
110
|
+
u_fit: ShaderFitOptions[fit],
|
|
111
|
+
u_scale: scale,
|
|
112
|
+
u_rotation: rotation,
|
|
113
|
+
u_offsetX: offsetX,
|
|
114
|
+
u_offsetY: offsetY,
|
|
115
|
+
u_originX: originX,
|
|
116
|
+
u_originY: originY,
|
|
117
|
+
u_worldWidth: worldWidth,
|
|
118
|
+
u_worldHeight: worldHeight
|
|
119
|
+
};
|
|
120
|
+
return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: dotOrbitFragmentShader, uniforms });
|
|
121
|
+
}, colorPropsAreEqual);
|
|
122
|
+
export {
|
|
123
|
+
DotOrbit,
|
|
124
|
+
bubblesPreset,
|
|
125
|
+
defaultPreset,
|
|
126
|
+
dotOrbitPresets,
|
|
127
|
+
hallucinatoryPreset,
|
|
128
|
+
shinePreset
|
|
129
|
+
};
|
|
130
|
+
//# sourceMappingURL=dot-orbit.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 getShaderNoiseTexture,\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: 1.5,\n frame: 0,\n colorBack: '#000000',\n colors: ['#ffc96b', '#ff6200', '#ff2f00', '#421100', '#1a0000'],\n size: 1,\n sizeRange: 0,\n spreading: 1,\n stepsPerColor: 4,\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: ['#D0D2D5'],\n colorBack: '#989CA4',\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 u_noiseTexture: getShaderNoiseTexture(),\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies DotOrbitUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={dotOrbitFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
|
+
import { type FlutedGlassParams, type ImageShaderPreset } from '@paper-design/shaders';
|
|
3
|
+
export interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {
|
|
4
|
+
/** @deprecated use `size` instead */
|
|
5
|
+
count?: number;
|
|
6
|
+
}
|
|
7
|
+
type FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;
|
|
8
|
+
export declare const defaultPreset: FlutedGlassPreset;
|
|
9
|
+
export declare const wavesPreset: FlutedGlassPreset;
|
|
10
|
+
export declare const irregularPreset: FlutedGlassPreset;
|
|
11
|
+
export declare const foldsPreset: FlutedGlassPreset;
|
|
12
|
+
export declare const flutedGlassPresets: FlutedGlassPreset[];
|
|
13
|
+
export declare const FlutedGlass: React.FC<FlutedGlassProps>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
import { memo } from "react";
|
|
7
|
+
import { ShaderMount } from "../shader-mount.js";
|
|
8
|
+
import {
|
|
9
|
+
flutedGlassFragmentShader,
|
|
10
|
+
ShaderFitOptions,
|
|
11
|
+
defaultObjectSizing,
|
|
12
|
+
GlassDistortionShapes,
|
|
13
|
+
GlassGridShapes
|
|
14
|
+
} from "@paper-design/shaders";
|
|
15
|
+
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
const defaultPreset = {
|
|
17
|
+
name: "Default",
|
|
18
|
+
params: {
|
|
19
|
+
...defaultObjectSizing,
|
|
20
|
+
fit: "cover",
|
|
21
|
+
speed: 0,
|
|
22
|
+
frame: 0,
|
|
23
|
+
size: 0.15,
|
|
24
|
+
angle: 0,
|
|
25
|
+
distortionShape: "lens",
|
|
26
|
+
shape: "lines",
|
|
27
|
+
distortion: 0.5,
|
|
28
|
+
shift: 0,
|
|
29
|
+
blur: 3,
|
|
30
|
+
edges: 0,
|
|
31
|
+
margin: 0,
|
|
32
|
+
marginLeft: 0,
|
|
33
|
+
marginRight: 0,
|
|
34
|
+
marginTop: 0,
|
|
35
|
+
marginBottom: 0
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
const wavesPreset = {
|
|
39
|
+
name: "Waves",
|
|
40
|
+
params: {
|
|
41
|
+
...defaultObjectSizing,
|
|
42
|
+
fit: "cover",
|
|
43
|
+
speed: 0,
|
|
44
|
+
frame: 0,
|
|
45
|
+
size: 0.3,
|
|
46
|
+
angle: 0,
|
|
47
|
+
distortionShape: "contour",
|
|
48
|
+
shape: "wave",
|
|
49
|
+
distortion: 0.3,
|
|
50
|
+
shift: 0,
|
|
51
|
+
blur: 0,
|
|
52
|
+
edges: 0,
|
|
53
|
+
margin: 0,
|
|
54
|
+
marginLeft: 0,
|
|
55
|
+
marginRight: 0,
|
|
56
|
+
marginTop: 0,
|
|
57
|
+
marginBottom: 0
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
const irregularPreset = {
|
|
61
|
+
name: "Irregular lines",
|
|
62
|
+
params: {
|
|
63
|
+
...defaultObjectSizing,
|
|
64
|
+
fit: "cover",
|
|
65
|
+
scale: 4,
|
|
66
|
+
speed: 0,
|
|
67
|
+
frame: 0,
|
|
68
|
+
size: 0.3,
|
|
69
|
+
angle: 150,
|
|
70
|
+
distortionShape: "facete",
|
|
71
|
+
shape: "linesIrregular",
|
|
72
|
+
distortion: 1,
|
|
73
|
+
shift: 0,
|
|
74
|
+
blur: 25,
|
|
75
|
+
edges: 1,
|
|
76
|
+
margin: 0,
|
|
77
|
+
marginLeft: 0,
|
|
78
|
+
marginRight: 0,
|
|
79
|
+
marginTop: 0,
|
|
80
|
+
marginBottom: 0
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
const foldsPreset = {
|
|
84
|
+
name: "Folds",
|
|
85
|
+
params: {
|
|
86
|
+
...defaultObjectSizing,
|
|
87
|
+
fit: "cover",
|
|
88
|
+
speed: 0,
|
|
89
|
+
frame: 0,
|
|
90
|
+
size: 0.25,
|
|
91
|
+
angle: 0,
|
|
92
|
+
distortionShape: "cascade",
|
|
93
|
+
shape: "lines",
|
|
94
|
+
distortion: 0.75,
|
|
95
|
+
shift: 0,
|
|
96
|
+
blur: 0,
|
|
97
|
+
edges: 0,
|
|
98
|
+
margin: 0.2,
|
|
99
|
+
marginLeft: 0.2,
|
|
100
|
+
marginRight: 0.2,
|
|
101
|
+
marginTop: 0.2,
|
|
102
|
+
marginBottom: 0.2
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
const flutedGlassPresets = [defaultPreset, irregularPreset, wavesPreset, foldsPreset];
|
|
106
|
+
const FlutedGlass = memo(function FlutedGlassImpl({
|
|
107
|
+
// Own props
|
|
108
|
+
speed = defaultPreset.params.speed,
|
|
109
|
+
frame = defaultPreset.params.frame,
|
|
110
|
+
image = "",
|
|
111
|
+
angle = defaultPreset.params.angle,
|
|
112
|
+
distortion = defaultPreset.params.distortion,
|
|
113
|
+
distortionShape = defaultPreset.params.distortionShape,
|
|
114
|
+
shape = defaultPreset.params.shape,
|
|
115
|
+
shift = defaultPreset.params.shift,
|
|
116
|
+
blur = defaultPreset.params.blur,
|
|
117
|
+
margin,
|
|
118
|
+
marginLeft = margin ?? defaultPreset.params.marginLeft,
|
|
119
|
+
marginRight = margin ?? defaultPreset.params.marginRight,
|
|
120
|
+
marginTop = margin ?? defaultPreset.params.marginTop,
|
|
121
|
+
marginBottom = margin ?? defaultPreset.params.marginBottom,
|
|
122
|
+
edges = defaultPreset.params.edges,
|
|
123
|
+
// integer `count` was deprecated in favor of the normalized `size` param
|
|
124
|
+
count,
|
|
125
|
+
size = count === void 0 ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,
|
|
126
|
+
// Sizing props
|
|
127
|
+
fit = defaultPreset.params.fit,
|
|
128
|
+
scale = defaultPreset.params.scale,
|
|
129
|
+
rotation = defaultPreset.params.rotation,
|
|
130
|
+
originX = defaultPreset.params.originX,
|
|
131
|
+
originY = defaultPreset.params.originY,
|
|
132
|
+
offsetX = defaultPreset.params.offsetX,
|
|
133
|
+
offsetY = defaultPreset.params.offsetY,
|
|
134
|
+
worldWidth = defaultPreset.params.worldWidth,
|
|
135
|
+
worldHeight = defaultPreset.params.worldHeight,
|
|
136
|
+
...props
|
|
137
|
+
}) {
|
|
138
|
+
const uniforms = {
|
|
139
|
+
// Own uniforms
|
|
140
|
+
u_image: image,
|
|
141
|
+
u_size: size,
|
|
142
|
+
u_angle: angle,
|
|
143
|
+
u_distortion: distortion,
|
|
144
|
+
u_shift: shift,
|
|
145
|
+
u_blur: blur,
|
|
146
|
+
u_edges: edges,
|
|
147
|
+
u_distortionShape: GlassDistortionShapes[distortionShape],
|
|
148
|
+
u_shape: GlassGridShapes[shape],
|
|
149
|
+
u_marginLeft: marginLeft,
|
|
150
|
+
u_marginRight: marginRight,
|
|
151
|
+
u_marginTop: marginTop,
|
|
152
|
+
u_marginBottom: marginBottom,
|
|
153
|
+
// Sizing uniforms
|
|
154
|
+
u_fit: ShaderFitOptions[fit],
|
|
155
|
+
u_scale: scale,
|
|
156
|
+
u_rotation: rotation,
|
|
157
|
+
u_offsetX: offsetX,
|
|
158
|
+
u_offsetY: offsetY,
|
|
159
|
+
u_originX: originX,
|
|
160
|
+
u_originY: originY,
|
|
161
|
+
u_worldWidth: worldWidth,
|
|
162
|
+
u_worldHeight: worldHeight
|
|
163
|
+
};
|
|
164
|
+
return /* @__PURE__ */ jsx(
|
|
165
|
+
ShaderMount,
|
|
166
|
+
{
|
|
167
|
+
...props,
|
|
168
|
+
speed,
|
|
169
|
+
frame,
|
|
170
|
+
fragmentShader: flutedGlassFragmentShader,
|
|
171
|
+
uniforms
|
|
172
|
+
}
|
|
173
|
+
);
|
|
174
|
+
});
|
|
175
|
+
export {
|
|
176
|
+
FlutedGlass,
|
|
177
|
+
defaultPreset,
|
|
178
|
+
flutedGlassPresets,
|
|
179
|
+
foldsPreset,
|
|
180
|
+
irregularPreset,
|
|
181
|
+
wavesPreset
|
|
182
|
+
};
|
|
183
|
+
//# sourceMappingURL=fluted-glass.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/shaders/fluted-glass.tsx"],
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n flutedGlassFragmentShader,\n ShaderFitOptions,\n type FlutedGlassUniforms,\n type FlutedGlassParams,\n defaultObjectSizing,\n GlassDistortionShapes,\n GlassGridShapes,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {\n /** @deprecated use `size` instead */\n count?: number;\n}\n\ntype FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;\n\nexport const defaultPreset: FlutedGlassPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n size: 0.15,\n angle: 0,\n distortionShape: 'lens',\n shape: 'lines',\n distortion: 0.5,\n shift: 0,\n blur: 3,\n edges: 0,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n },\n};\n\nexport const wavesPreset: FlutedGlassPreset = {\n name: 'Waves',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n size: 0.3,\n angle: 0,\n distortionShape: 'contour',\n shape: 'wave',\n distortion: 0.3,\n shift: 0,\n blur: 0,\n edges: 0,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n },\n};\n\nexport const irregularPreset: FlutedGlassPreset = {\n name: 'Irregular lines',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n scale: 4,\n speed: 0,\n frame: 0,\n size: 0.3,\n angle: 150,\n distortionShape: 'facete',\n shape: 'linesIrregular',\n distortion: 1,\n shift: 0,\n blur: 25,\n edges: 1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n },\n};\n\nexport const foldsPreset: FlutedGlassPreset = {\n name: 'Folds',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n size: 0.25,\n angle: 0,\n distortionShape: 'cascade',\n shape: 'lines',\n distortion: 0.75,\n shift: 0,\n blur: 0,\n edges: 0,\n margin: 0.2,\n marginLeft: 0.2,\n marginRight: 0.2,\n marginTop: 0.2,\n marginBottom: 0.2,\n },\n};\n\nexport const flutedGlassPresets: FlutedGlassPreset[] = [defaultPreset, irregularPreset, wavesPreset, foldsPreset];\n\nexport const FlutedGlass: React.FC<FlutedGlassProps> = memo(function FlutedGlassImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '',\n angle = defaultPreset.params.angle,\n distortion = defaultPreset.params.distortion,\n distortionShape = defaultPreset.params.distortionShape,\n shape = defaultPreset.params.shape,\n shift = defaultPreset.params.shift,\n blur = defaultPreset.params.blur,\n margin,\n marginLeft = margin ?? defaultPreset.params.marginLeft,\n marginRight = margin ?? defaultPreset.params.marginRight,\n marginTop = margin ?? defaultPreset.params.marginTop,\n marginBottom = margin ?? defaultPreset.params.marginBottom,\n edges = defaultPreset.params.edges,\n\n // integer `count` was deprecated in favor of the normalized `size` param\n count,\n size = count === undefined ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: FlutedGlassProps) {\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_size: size,\n u_angle: angle,\n u_distortion: distortion,\n u_shift: shift,\n u_blur: blur,\n u_edges: edges,\n u_distortionShape: GlassDistortionShapes[distortionShape],\n u_shape: GlassGridShapes[shape],\n u_marginLeft: marginLeft,\n u_marginRight: marginRight,\n u_marginTop: marginTop,\n u_marginBottom: marginBottom,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies FlutedGlassUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={flutedGlassFragmentShader}\n 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.js';
|
|
2
|
+
import { type GodRaysParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
|
+
export interface GodRaysProps extends ShaderComponentProps, GodRaysParams {
|
|
4
|
+
}
|
|
5
|
+
type GodRaysPreset = ShaderPreset<GodRaysParams>;
|
|
6
|
+
export declare const defaultPreset: GodRaysPreset;
|
|
7
|
+
export declare const warpPreset: GodRaysPreset;
|
|
8
|
+
export declare const linearPreset: GodRaysPreset;
|
|
9
|
+
export declare const etherPreset: GodRaysPreset;
|
|
10
|
+
export declare const godRaysPresets: GodRaysPreset[];
|
|
11
|
+
export declare const GodRays: React.FC<GodRaysProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
import { memo } from "react";
|
|
7
|
+
import { ShaderMount } from "../shader-mount.js";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
9
|
+
import {
|
|
10
|
+
defaultObjectSizing,
|
|
11
|
+
getShaderNoiseTexture,
|
|
12
|
+
getShaderColorFromString,
|
|
13
|
+
godRaysFragmentShader,
|
|
14
|
+
ShaderFitOptions
|
|
15
|
+
} from "@paper-design/shaders";
|
|
16
|
+
import { jsx } from "react/jsx-runtime";
|
|
17
|
+
const defaultPreset = {
|
|
18
|
+
name: "Default",
|
|
19
|
+
params: {
|
|
20
|
+
...defaultObjectSizing,
|
|
21
|
+
offsetX: 0,
|
|
22
|
+
offsetY: -0.55,
|
|
23
|
+
colorBack: "#000000",
|
|
24
|
+
colorBloom: "#0000ff",
|
|
25
|
+
colors: ["#a600ff6e", "#6200fff0", "#ffffff", "#33fff5"],
|
|
26
|
+
density: 0.3,
|
|
27
|
+
spotty: 0.3,
|
|
28
|
+
midIntensity: 0.4,
|
|
29
|
+
midSize: 0.2,
|
|
30
|
+
intensity: 0.8,
|
|
31
|
+
bloom: 0.4,
|
|
32
|
+
speed: 0.75,
|
|
33
|
+
frame: 0
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
const warpPreset = {
|
|
37
|
+
name: "Warp",
|
|
38
|
+
params: {
|
|
39
|
+
...defaultObjectSizing,
|
|
40
|
+
colorBack: "#000000",
|
|
41
|
+
colorBloom: "#222288",
|
|
42
|
+
colors: ["#ff47d4", "#ff8c00", "#ffffff"],
|
|
43
|
+
density: 0.45,
|
|
44
|
+
spotty: 0.15,
|
|
45
|
+
midIntensity: 0.4,
|
|
46
|
+
midSize: 0.33,
|
|
47
|
+
intensity: 0.79,
|
|
48
|
+
bloom: 0.4,
|
|
49
|
+
speed: 2,
|
|
50
|
+
frame: 0
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
const linearPreset = {
|
|
54
|
+
name: "Linear",
|
|
55
|
+
params: {
|
|
56
|
+
...defaultObjectSizing,
|
|
57
|
+
offsetX: 0.2,
|
|
58
|
+
offsetY: -0.8,
|
|
59
|
+
colorBack: "#000000",
|
|
60
|
+
colorBloom: "#eeeeee",
|
|
61
|
+
colors: ["#ffffff1f", "#ffffff3d", "#ffffff29"],
|
|
62
|
+
density: 0.41,
|
|
63
|
+
spotty: 0.25,
|
|
64
|
+
midSize: 0.1,
|
|
65
|
+
midIntensity: 0.75,
|
|
66
|
+
intensity: 0.79,
|
|
67
|
+
bloom: 1,
|
|
68
|
+
speed: 0.5,
|
|
69
|
+
frame: 0
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
const etherPreset = {
|
|
73
|
+
name: "Ether",
|
|
74
|
+
params: {
|
|
75
|
+
...defaultObjectSizing,
|
|
76
|
+
offsetX: -0.6,
|
|
77
|
+
colorBack: "#090f1d",
|
|
78
|
+
colorBloom: "#ffffff",
|
|
79
|
+
colors: ["#148effa6", "#c4dffebe", "#232a47"],
|
|
80
|
+
density: 0.03,
|
|
81
|
+
spotty: 0.77,
|
|
82
|
+
midSize: 0.1,
|
|
83
|
+
midIntensity: 0.6,
|
|
84
|
+
intensity: 0.6,
|
|
85
|
+
bloom: 0.6,
|
|
86
|
+
speed: 1,
|
|
87
|
+
frame: 0
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
const godRaysPresets = [defaultPreset, warpPreset, linearPreset, etherPreset];
|
|
91
|
+
const GodRays = memo(function GodRaysImpl({
|
|
92
|
+
// Own props
|
|
93
|
+
speed = defaultPreset.params.speed,
|
|
94
|
+
frame = defaultPreset.params.frame,
|
|
95
|
+
colorBloom = defaultPreset.params.colorBloom,
|
|
96
|
+
colorBack = defaultPreset.params.colorBack,
|
|
97
|
+
colors = defaultPreset.params.colors,
|
|
98
|
+
density = defaultPreset.params.density,
|
|
99
|
+
spotty = defaultPreset.params.spotty,
|
|
100
|
+
midIntensity = defaultPreset.params.midIntensity,
|
|
101
|
+
midSize = defaultPreset.params.midSize,
|
|
102
|
+
intensity = defaultPreset.params.intensity,
|
|
103
|
+
bloom = defaultPreset.params.bloom,
|
|
104
|
+
// Sizing props
|
|
105
|
+
fit = defaultPreset.params.fit,
|
|
106
|
+
scale = defaultPreset.params.scale,
|
|
107
|
+
rotation = defaultPreset.params.rotation,
|
|
108
|
+
originX = defaultPreset.params.originX,
|
|
109
|
+
originY = defaultPreset.params.originY,
|
|
110
|
+
offsetX = defaultPreset.params.offsetX,
|
|
111
|
+
offsetY = defaultPreset.params.offsetY,
|
|
112
|
+
worldWidth = defaultPreset.params.worldWidth,
|
|
113
|
+
worldHeight = defaultPreset.params.worldHeight,
|
|
114
|
+
...props
|
|
115
|
+
}) {
|
|
116
|
+
const uniforms = {
|
|
117
|
+
// Own uniforms
|
|
118
|
+
u_colorBloom: getShaderColorFromString(colorBloom),
|
|
119
|
+
u_colorBack: getShaderColorFromString(colorBack),
|
|
120
|
+
u_colors: colors.map(getShaderColorFromString),
|
|
121
|
+
u_colorsCount: colors.length,
|
|
122
|
+
u_density: density,
|
|
123
|
+
u_spotty: spotty,
|
|
124
|
+
u_midIntensity: midIntensity,
|
|
125
|
+
u_midSize: midSize,
|
|
126
|
+
u_intensity: intensity,
|
|
127
|
+
u_bloom: bloom,
|
|
128
|
+
u_noiseTexture: getShaderNoiseTexture(),
|
|
129
|
+
// Sizing uniforms
|
|
130
|
+
u_fit: ShaderFitOptions[fit],
|
|
131
|
+
u_scale: scale,
|
|
132
|
+
u_rotation: rotation,
|
|
133
|
+
u_offsetX: offsetX,
|
|
134
|
+
u_offsetY: offsetY,
|
|
135
|
+
u_originX: originX,
|
|
136
|
+
u_originY: originY,
|
|
137
|
+
u_worldWidth: worldWidth,
|
|
138
|
+
u_worldHeight: worldHeight
|
|
139
|
+
};
|
|
140
|
+
return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: godRaysFragmentShader, uniforms });
|
|
141
|
+
}, colorPropsAreEqual);
|
|
142
|
+
export {
|
|
143
|
+
GodRays,
|
|
144
|
+
defaultPreset,
|
|
145
|
+
etherPreset,
|
|
146
|
+
godRaysPresets,
|
|
147
|
+
linearPreset,
|
|
148
|
+
warpPreset
|
|
149
|
+
};
|
|
150
|
+
//# sourceMappingURL=god-rays.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 getShaderNoiseTexture,\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,\n offsetY: -0.55,\n colorBack: '#000000',\n colorBloom: '#0000ff',\n colors: ['#a600ff6e', '#6200fff0', '#ffffff', '#33fff5'],\n density: 0.3,\n spotty: 0.3,\n midIntensity: 0.4,\n midSize: 0.2,\n intensity: 0.8,\n bloom: 0.4,\n speed: 0.75,\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: ['#ff47d4', '#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 u_noiseTexture: getShaderNoiseTexture(),\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies 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
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
|
+
import { type GrainGradientParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
|
+
export interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {
|
|
4
|
+
}
|
|
5
|
+
type GrainGradientPreset = ShaderPreset<GrainGradientParams>;
|
|
6
|
+
export declare const defaultPreset: GrainGradientPreset;
|
|
7
|
+
export declare const wavePreset: GrainGradientPreset;
|
|
8
|
+
export declare const dotsPreset: GrainGradientPreset;
|
|
9
|
+
export declare const truchetPreset: GrainGradientPreset;
|
|
10
|
+
export declare const ripplePreset: GrainGradientPreset;
|
|
11
|
+
export declare const blobPreset: GrainGradientPreset;
|
|
12
|
+
export declare const grainGradientPresets: GrainGradientPreset[];
|
|
13
|
+
export declare const GrainGradient: React.FC<GrainGradientProps>;
|
|
14
|
+
export {};
|