@paper-design/shaders-react 0.0.54 → 0.0.56
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.js +2 -15
- package/dist/color-props-are-equal.js.map +2 -2
- package/dist/fast-deep-equal.d.ts +1 -0
- package/dist/fast-deep-equal.js +33 -0
- package/dist/fast-deep-equal.js.map +7 -0
- package/dist/shader-mount.js +75 -45
- package/dist/shader-mount.js.map +2 -2
- package/dist/shaders/dithering.d.ts +2 -0
- package/dist/shaders/dithering.js +9 -8
- package/dist/shaders/dithering.js.map +2 -2
- package/dist/shaders/fluted-glass.js +13 -8
- package/dist/shaders/fluted-glass.js.map +2 -2
- package/dist/shaders/heatmap.js +26 -48
- package/dist/shaders/heatmap.js.map +2 -2
- package/dist/shaders/image-dithering.d.ts +2 -0
- package/dist/shaders/image-dithering.js +8 -7
- package/dist/shaders/image-dithering.js.map +2 -2
- package/dist/shaders/paper-texture.d.ts +8 -0
- package/dist/shaders/paper-texture.js +30 -25
- package/dist/shaders/paper-texture.js.map +2 -2
- package/dist/shaders/pulsing-border.js +56 -21
- package/dist/shaders/pulsing-border.js.map +2 -2
- package/dist/shaders/water.js +1 -1
- package/dist/shaders/water.js.map +1 -1
- package/package.json +2 -2
package/dist/shaders/heatmap.js
CHANGED
|
@@ -14,6 +14,7 @@ import {
|
|
|
14
14
|
} from "@paper-design/shaders";
|
|
15
15
|
import { transparentPixel } from "../transparent-pixel.js";
|
|
16
16
|
import { suspend } from "../suspend.js";
|
|
17
|
+
import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
17
18
|
import { jsx } from "react/jsx-runtime";
|
|
18
19
|
const defaultPreset = {
|
|
19
20
|
name: "Default",
|
|
@@ -52,7 +53,7 @@ const Heatmap = memo(function HeatmapImpl({
|
|
|
52
53
|
// Own props
|
|
53
54
|
speed = defaultPreset.params.speed,
|
|
54
55
|
frame = defaultPreset.params.frame,
|
|
55
|
-
image = "
|
|
56
|
+
image = "",
|
|
56
57
|
contour = defaultPreset.params.contour,
|
|
57
58
|
angle = defaultPreset.params.angle,
|
|
58
59
|
noise = defaultPreset.params.noise,
|
|
@@ -76,7 +77,7 @@ const Heatmap = memo(function HeatmapImpl({
|
|
|
76
77
|
const imageUrl = typeof image === "string" ? image : image.src;
|
|
77
78
|
const [processedStateImage, setProcessedStateImage] = useState(transparentPixel);
|
|
78
79
|
let processedImage;
|
|
79
|
-
if (suspendWhenProcessingImage) {
|
|
80
|
+
if (suspendWhenProcessingImage && typeof window !== "undefined") {
|
|
80
81
|
processedImage = suspend(
|
|
81
82
|
() => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),
|
|
82
83
|
[imageUrl]
|
|
@@ -105,53 +106,30 @@ const Heatmap = memo(function HeatmapImpl({
|
|
|
105
106
|
URL.revokeObjectURL(url);
|
|
106
107
|
};
|
|
107
108
|
}, [imageUrl, suspendWhenProcessingImage]);
|
|
108
|
-
const uniforms =
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
}),
|
|
131
|
-
[
|
|
132
|
-
speed,
|
|
133
|
-
frame,
|
|
134
|
-
contour,
|
|
135
|
-
angle,
|
|
136
|
-
noise,
|
|
137
|
-
innerGlow,
|
|
138
|
-
outerGlow,
|
|
139
|
-
colors,
|
|
140
|
-
colorBack,
|
|
141
|
-
processedImage,
|
|
142
|
-
fit,
|
|
143
|
-
offsetX,
|
|
144
|
-
offsetY,
|
|
145
|
-
originX,
|
|
146
|
-
originY,
|
|
147
|
-
rotation,
|
|
148
|
-
scale,
|
|
149
|
-
worldHeight,
|
|
150
|
-
worldWidth
|
|
151
|
-
]
|
|
152
|
-
);
|
|
109
|
+
const uniforms = {
|
|
110
|
+
// Own uniforms
|
|
111
|
+
u_image: processedImage,
|
|
112
|
+
u_contour: contour,
|
|
113
|
+
u_angle: angle,
|
|
114
|
+
u_noise: noise,
|
|
115
|
+
u_innerGlow: innerGlow,
|
|
116
|
+
u_outerGlow: outerGlow,
|
|
117
|
+
u_colorBack: getShaderColorFromString(colorBack),
|
|
118
|
+
u_colors: colors.map(getShaderColorFromString),
|
|
119
|
+
u_colorsCount: colors.length,
|
|
120
|
+
// Sizing uniforms
|
|
121
|
+
u_fit: ShaderFitOptions[fit],
|
|
122
|
+
u_offsetX: offsetX,
|
|
123
|
+
u_offsetY: offsetY,
|
|
124
|
+
u_originX: originX,
|
|
125
|
+
u_originY: originY,
|
|
126
|
+
u_rotation: rotation,
|
|
127
|
+
u_scale: scale,
|
|
128
|
+
u_worldHeight: worldHeight,
|
|
129
|
+
u_worldWidth: worldWidth
|
|
130
|
+
};
|
|
153
131
|
return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: heatmapFragmentShader, uniforms });
|
|
154
|
-
});
|
|
132
|
+
}, colorPropsAreEqual);
|
|
155
133
|
export {
|
|
156
134
|
Heatmap,
|
|
157
135
|
defaultPreset,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/heatmap.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { memo, useLayoutEffect, useMemo, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n heatmapFragmentShader,\n ShaderFitOptions,\n type HeatmapUniforms,\n type HeatmapParams,\n defaultObjectSizing,\n toProcessedHeatmap,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\n\nexport interface HeatmapProps extends ShaderComponentProps, HeatmapParams {\n /**\n * Suspends the component when the image is being processed.\n */\n suspendWhenProcessingImage?: boolean;\n}\n\nexport type HeatmapPreset = ImageShaderPreset<HeatmapParams>;\n\nexport const defaultPreset: HeatmapPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 1,\n frame: 0,\n contour: 0.5,\n angle: 0,\n noise: 0,\n innerGlow: 0.5,\n outerGlow: 0.5,\n colorBack: '#000000',\n colors: ['#11206a', '#1f3ba2', '#2f63e7', '#6bd7ff', '#ffe679', '#ff991e', '#ff4c00'],\n },\n} as const satisfies HeatmapPreset;\n\nexport const sepiaPreset: HeatmapPreset = {\n name: 'Sepia',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 0.5,\n frame: 0,\n contour: 0.5,\n angle: 0,\n noise: 0.75,\n innerGlow: 0.5,\n outerGlow: 0.5,\n colorBack: '#000000',\n colors: ['#997F45', '#ffffff'],\n },\n} as const satisfies HeatmapPreset;\n\nexport const heatmapPresets: HeatmapPreset[] = [defaultPreset, sepiaPreset];\n\nexport const Heatmap: React.FC<HeatmapProps> = memo(function HeatmapImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '
|
|
5
|
-
"mappings": ";;;;;AAAA,OAAO,SAAS,MAAM,iBAAiB,SAAS,gBAAgB;AAChE,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,wBAAwB;AACjC,SAAS,eAAe;
|
|
4
|
+
"sourcesContent": ["import React, { memo, useLayoutEffect, useMemo, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n heatmapFragmentShader,\n ShaderFitOptions,\n type HeatmapUniforms,\n type HeatmapParams,\n defaultObjectSizing,\n toProcessedHeatmap,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\n\nexport interface HeatmapProps extends ShaderComponentProps, HeatmapParams {\n /**\n * Suspends the component when the image is being processed.\n */\n suspendWhenProcessingImage?: boolean;\n}\n\nexport type HeatmapPreset = ImageShaderPreset<HeatmapParams>;\n\nexport const defaultPreset: HeatmapPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 1,\n frame: 0,\n contour: 0.5,\n angle: 0,\n noise: 0,\n innerGlow: 0.5,\n outerGlow: 0.5,\n colorBack: '#000000',\n colors: ['#11206a', '#1f3ba2', '#2f63e7', '#6bd7ff', '#ffe679', '#ff991e', '#ff4c00'],\n },\n} as const satisfies HeatmapPreset;\n\nexport const sepiaPreset: HeatmapPreset = {\n name: 'Sepia',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 0.5,\n frame: 0,\n contour: 0.5,\n angle: 0,\n noise: 0.75,\n innerGlow: 0.5,\n outerGlow: 0.5,\n colorBack: '#000000',\n colors: ['#997F45', '#ffffff'],\n },\n} as const satisfies HeatmapPreset;\n\nexport const heatmapPresets: HeatmapPreset[] = [defaultPreset, sepiaPreset];\n\nexport const Heatmap: React.FC<HeatmapProps> = memo(function HeatmapImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '',\n contour = defaultPreset.params.contour,\n angle = defaultPreset.params.angle,\n noise = defaultPreset.params.noise,\n innerGlow = defaultPreset.params.innerGlow,\n outerGlow = defaultPreset.params.outerGlow,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n suspendWhenProcessingImage = false,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n worldHeight = defaultPreset.params.worldHeight,\n worldWidth = defaultPreset.params.worldWidth,\n ...props\n}: HeatmapProps) {\n const imageUrl = typeof image === 'string' ? image : image.src;\n const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);\n\n let processedImage: string;\n\n // toProcessedHeatmap expects the document object to exist. This prevents SSR issues during builds.\n if (suspendWhenProcessingImage && typeof window !== 'undefined') {\n processedImage = suspend(\n (): Promise<string> => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),\n [imageUrl]\n );\n } else {\n processedImage = processedStateImage;\n }\n\n useLayoutEffect(() => {\n if (suspendWhenProcessingImage) {\n // Skip doing work in the effect as it's been handled by suspense.\n return;\n }\n\n if (!imageUrl) {\n setProcessedStateImage(transparentPixel);\n return;\n }\n\n let url: string;\n let current = true;\n\n toProcessedHeatmap(imageUrl).then((result) => {\n if (current) {\n url = URL.createObjectURL(result.blob);\n setProcessedStateImage(url);\n }\n });\n\n return () => {\n current = false;\n URL.revokeObjectURL(url);\n };\n }, [imageUrl, suspendWhenProcessingImage]);\n\n const uniforms = {\n // Own uniforms\n u_image: processedImage,\n u_contour: contour,\n u_angle: angle,\n u_noise: noise,\n u_innerGlow: innerGlow,\n u_outerGlow: outerGlow,\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_rotation: rotation,\n u_scale: scale,\n u_worldHeight: worldHeight,\n u_worldWidth: worldWidth,\n };\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={heatmapFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type ImageDitheringParams, type ImageShaderPreset } from '@paper-design/shaders';
|
|
3
3
|
export interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {
|
|
4
|
+
/** @deprecated use `size` instead */
|
|
5
|
+
pxSize?: number;
|
|
4
6
|
}
|
|
5
7
|
type ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;
|
|
6
8
|
export declare const defaultPreset: ImageDitheringPreset;
|
|
@@ -26,7 +26,7 @@ const defaultPreset = {
|
|
|
26
26
|
colorBack: "#000c38",
|
|
27
27
|
colorHighlight: "#eaff94",
|
|
28
28
|
type: "8x8",
|
|
29
|
-
|
|
29
|
+
size: 2,
|
|
30
30
|
colorSteps: 2,
|
|
31
31
|
originalColors: false
|
|
32
32
|
}
|
|
@@ -41,7 +41,7 @@ const retroPreset = {
|
|
|
41
41
|
colorBack: "#5452ff",
|
|
42
42
|
colorHighlight: "#eeeeee",
|
|
43
43
|
type: "2x2",
|
|
44
|
-
|
|
44
|
+
size: 3,
|
|
45
45
|
colorSteps: 1,
|
|
46
46
|
originalColors: true
|
|
47
47
|
}
|
|
@@ -56,7 +56,7 @@ const noisePreset = {
|
|
|
56
56
|
colorBack: "#000000",
|
|
57
57
|
colorHighlight: "#ededed",
|
|
58
58
|
type: "random",
|
|
59
|
-
|
|
59
|
+
size: 1,
|
|
60
60
|
colorSteps: 1,
|
|
61
61
|
originalColors: false
|
|
62
62
|
}
|
|
@@ -71,7 +71,7 @@ const naturalPreset = {
|
|
|
71
71
|
colorBack: "#000000",
|
|
72
72
|
colorHighlight: "#ffffff",
|
|
73
73
|
type: "8x8",
|
|
74
|
-
|
|
74
|
+
size: 2,
|
|
75
75
|
colorSteps: 5,
|
|
76
76
|
originalColors: true
|
|
77
77
|
}
|
|
@@ -84,11 +84,12 @@ const ImageDithering = memo(function ImageDitheringImpl({
|
|
|
84
84
|
colorFront = defaultPreset.params.colorFront,
|
|
85
85
|
colorBack = defaultPreset.params.colorBack,
|
|
86
86
|
colorHighlight = defaultPreset.params.colorHighlight,
|
|
87
|
-
image = "
|
|
87
|
+
image = "",
|
|
88
88
|
type = defaultPreset.params.type,
|
|
89
|
-
pxSize = defaultPreset.params.pxSize,
|
|
90
89
|
colorSteps = defaultPreset.params.colorSteps,
|
|
91
90
|
originalColors = defaultPreset.params.originalColors,
|
|
91
|
+
pxSize,
|
|
92
|
+
size = pxSize === void 0 ? defaultPreset.params.size : pxSize,
|
|
92
93
|
// Sizing props
|
|
93
94
|
fit = defaultPreset.params.fit,
|
|
94
95
|
scale = defaultPreset.params.scale,
|
|
@@ -108,7 +109,7 @@ const ImageDithering = memo(function ImageDitheringImpl({
|
|
|
108
109
|
u_colorBack: getShaderColorFromString(colorBack),
|
|
109
110
|
u_colorHighlight: getShaderColorFromString(colorHighlight),
|
|
110
111
|
u_type: DitheringTypes[type],
|
|
111
|
-
u_pxSize:
|
|
112
|
+
u_pxSize: size,
|
|
112
113
|
u_colorSteps: colorSteps,
|
|
113
114
|
u_originalColors: originalColors,
|
|
114
115
|
// Sizing uniforms
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/image-dithering.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 imageDitheringFragmentShader,\n getShaderColorFromString,\n ShaderFitOptions,\n type ImageDitheringUniforms,\n type ImageDitheringParams,\n defaultObjectSizing,\n DitheringTypes,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {}\n\ntype ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;\n\nexport const defaultPreset: ImageDitheringPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n // scale: 0.95,\n speed: 0,\n frame: 0,\n colorFront: '#94ffaf',\n colorBack: '#000c38',\n colorHighlight: '#eaff94',\n type: '8x8',\n
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OAEK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n imageDitheringFragmentShader,\n getShaderColorFromString,\n ShaderFitOptions,\n type ImageDitheringUniforms,\n type ImageDitheringParams,\n defaultObjectSizing,\n DitheringTypes,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {\n /** @deprecated use `size` instead */\n pxSize?: number;\n}\n\ntype ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;\n\nexport const defaultPreset: ImageDitheringPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n // scale: 0.95,\n speed: 0,\n frame: 0,\n colorFront: '#94ffaf',\n colorBack: '#000c38',\n colorHighlight: '#eaff94',\n type: '8x8',\n size: 2,\n colorSteps: 2,\n originalColors: false,\n },\n} as const;\n\nexport const retroPreset: ImageDitheringPreset = {\n name: 'Retro',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n colorFront: '#eeeeee',\n colorBack: '#5452ff',\n colorHighlight: '#eeeeee',\n type: '2x2',\n size: 3,\n colorSteps: 1,\n originalColors: true,\n },\n} as const;\n\nexport const noisePreset: ImageDitheringPreset = {\n name: 'Noise',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n colorFront: '#a2997c',\n colorBack: '#000000',\n colorHighlight: '#ededed',\n type: 'random',\n size: 1,\n colorSteps: 1,\n originalColors: false,\n },\n} as const;\n\nexport const naturalPreset: ImageDitheringPreset = {\n name: 'Natural',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n colorFront: '#ffffff',\n colorBack: '#000000',\n colorHighlight: '#ffffff',\n type: '8x8',\n size: 2,\n colorSteps: 5,\n originalColors: true,\n },\n} as const;\n\nexport const imageDitheringPresets: ImageDitheringPreset[] = [defaultPreset, noisePreset, retroPreset, naturalPreset];\n\nexport const ImageDithering: React.FC<ImageDitheringProps> = memo(function ImageDitheringImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorBack = defaultPreset.params.colorBack,\n colorHighlight = defaultPreset.params.colorHighlight,\n image = '',\n type = defaultPreset.params.type,\n colorSteps = defaultPreset.params.colorSteps,\n originalColors = defaultPreset.params.originalColors,\n pxSize,\n size = pxSize === undefined ? defaultPreset.params.size : pxSize,\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}: ImageDitheringProps) {\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_colorFront: getShaderColorFromString(colorFront),\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorHighlight: getShaderColorFromString(colorHighlight),\n u_type: DitheringTypes[type],\n u_pxSize: size,\n u_colorSteps: colorSteps,\n u_originalColors: originalColors,\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 ImageDitheringUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={imageDitheringFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type ImageShaderPreset, type PaperTextureParams } from '@paper-design/shaders';
|
|
3
3
|
export interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {
|
|
4
|
+
/** @deprecated use `fiberSize` instead */
|
|
5
|
+
fiberScale?: number;
|
|
6
|
+
/** @deprecated use `crumpleSize` instead */
|
|
7
|
+
crumplesScale?: number;
|
|
8
|
+
/** @deprecated use `foldCount` instead */
|
|
9
|
+
foldsNumber?: number;
|
|
10
|
+
/** @deprecated use `fade` instead */
|
|
11
|
+
blur?: number;
|
|
4
12
|
}
|
|
5
13
|
type PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;
|
|
6
14
|
export declare const defaultPreset: PaperTexturePreset;
|
|
@@ -27,12 +27,12 @@ const defaultPreset = {
|
|
|
27
27
|
contrast: 0.3,
|
|
28
28
|
roughness: 0.4,
|
|
29
29
|
fiber: 0.3,
|
|
30
|
-
|
|
30
|
+
fiberSize: 0.2,
|
|
31
31
|
crumples: 0.3,
|
|
32
|
-
|
|
32
|
+
crumpleSize: 0.35,
|
|
33
33
|
folds: 0.65,
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
foldCount: 5,
|
|
35
|
+
fade: 0,
|
|
36
36
|
drops: 0.2,
|
|
37
37
|
seed: 5.8
|
|
38
38
|
}
|
|
@@ -50,12 +50,12 @@ const abstractPreset = {
|
|
|
50
50
|
contrast: 0.85,
|
|
51
51
|
roughness: 0,
|
|
52
52
|
fiber: 0.1,
|
|
53
|
-
|
|
53
|
+
fiberSize: 0.2,
|
|
54
54
|
crumples: 0,
|
|
55
|
-
|
|
55
|
+
crumpleSize: 0.3,
|
|
56
56
|
folds: 1,
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
foldCount: 3,
|
|
58
|
+
fade: 0,
|
|
59
59
|
drops: 0.2,
|
|
60
60
|
seed: 2.2
|
|
61
61
|
}
|
|
@@ -73,12 +73,12 @@ const cardboardPreset = {
|
|
|
73
73
|
contrast: 0.4,
|
|
74
74
|
roughness: 0,
|
|
75
75
|
fiber: 0.35,
|
|
76
|
-
|
|
76
|
+
fiberSize: 0.14,
|
|
77
77
|
crumples: 0.7,
|
|
78
|
-
|
|
78
|
+
crumpleSize: 0.1,
|
|
79
79
|
folds: 0,
|
|
80
|
-
|
|
81
|
-
|
|
80
|
+
foldCount: 1,
|
|
81
|
+
fade: 0,
|
|
82
82
|
drops: 0.1,
|
|
83
83
|
seed: 1.6
|
|
84
84
|
}
|
|
@@ -96,12 +96,12 @@ const detailsPreset = {
|
|
|
96
96
|
contrast: 0,
|
|
97
97
|
roughness: 1,
|
|
98
98
|
fiber: 0.27,
|
|
99
|
-
|
|
99
|
+
fiberSize: 0.22,
|
|
100
100
|
crumples: 1,
|
|
101
|
-
|
|
101
|
+
crumpleSize: 0.5,
|
|
102
102
|
folds: 1,
|
|
103
|
-
|
|
104
|
-
|
|
103
|
+
foldCount: 15,
|
|
104
|
+
fade: 0,
|
|
105
105
|
drops: 0,
|
|
106
106
|
seed: 6
|
|
107
107
|
}
|
|
@@ -118,18 +118,23 @@ const PaperTexture = memo(function PaperTextureImpl({
|
|
|
118
118
|
frame = defaultPreset.params.frame,
|
|
119
119
|
colorFront = defaultPreset.params.colorFront,
|
|
120
120
|
colorBack = defaultPreset.params.colorBack,
|
|
121
|
-
image = "
|
|
121
|
+
image = "",
|
|
122
122
|
contrast = defaultPreset.params.contrast,
|
|
123
123
|
roughness = defaultPreset.params.roughness,
|
|
124
124
|
fiber = defaultPreset.params.fiber,
|
|
125
|
-
fiberScale = defaultPreset.params.fiberScale,
|
|
126
125
|
crumples = defaultPreset.params.crumples,
|
|
127
|
-
crumplesScale = defaultPreset.params.crumplesScale,
|
|
128
|
-
foldsNumber = defaultPreset.params.foldsNumber,
|
|
129
126
|
folds = defaultPreset.params.folds,
|
|
130
|
-
blur = defaultPreset.params.blur,
|
|
131
127
|
drops = defaultPreset.params.drops,
|
|
132
128
|
seed = defaultPreset.params.seed,
|
|
129
|
+
// Reworked props
|
|
130
|
+
fiberScale,
|
|
131
|
+
fiberSize = fiberScale === void 0 ? defaultPreset.params.fiberSize : 0.2 / fiberScale,
|
|
132
|
+
crumplesScale,
|
|
133
|
+
crumpleSize = crumplesScale === void 0 ? defaultPreset.params.crumpleSize : 0.2 / crumplesScale,
|
|
134
|
+
blur,
|
|
135
|
+
fade = blur === void 0 ? defaultPreset.params.fade : blur,
|
|
136
|
+
foldsNumber,
|
|
137
|
+
foldCount = foldsNumber === void 0 ? defaultPreset.params.foldCount : foldsNumber,
|
|
133
138
|
// Sizing props
|
|
134
139
|
fit = defaultPreset.params.fit,
|
|
135
140
|
scale = defaultPreset.params.scale,
|
|
@@ -151,12 +156,12 @@ const PaperTexture = memo(function PaperTextureImpl({
|
|
|
151
156
|
u_contrast: contrast,
|
|
152
157
|
u_roughness: roughness,
|
|
153
158
|
u_fiber: fiber,
|
|
154
|
-
|
|
159
|
+
u_fiberSize: fiberSize,
|
|
155
160
|
u_crumples: crumples,
|
|
156
|
-
|
|
157
|
-
|
|
161
|
+
u_crumpleSize: crumpleSize,
|
|
162
|
+
u_foldCount: foldCount,
|
|
158
163
|
u_folds: folds,
|
|
159
|
-
|
|
164
|
+
u_fade: fade,
|
|
160
165
|
u_drops: drops,
|
|
161
166
|
u_seed: seed,
|
|
162
167
|
...noiseTexture,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/paper-texture.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n paperTextureFragmentShader,\n ShaderFitOptions,\n type ImageShaderPreset,\n type PaperTextureParams,\n type PaperTextureUniforms,\n} from '@paper-design/shaders';\n\nexport interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {}\n\ntype PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;\n\nexport const defaultPreset: PaperTexturePreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n scale: 0.6,\n speed: 0,\n frame: 0,\n colorFront: '#9fadbc',\n colorBack: '#ffffff',\n contrast: 0.3,\n roughness: 0.4,\n fiber: 0.3,\n
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n paperTextureFragmentShader,\n ShaderFitOptions,\n type ImageShaderPreset,\n type PaperTextureParams,\n type PaperTextureUniforms,\n} from '@paper-design/shaders';\n\nexport interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {\n /** @deprecated use `fiberSize` instead */\n fiberScale?: number;\n /** @deprecated use `crumpleSize` instead */\n crumplesScale?: number;\n /** @deprecated use `foldCount` instead */\n foldsNumber?: number;\n /** @deprecated use `fade` instead */\n blur?: number;\n}\n\ntype PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;\n\nexport const defaultPreset: PaperTexturePreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n scale: 0.6,\n speed: 0,\n frame: 0,\n colorFront: '#9fadbc',\n colorBack: '#ffffff',\n contrast: 0.3,\n roughness: 0.4,\n fiber: 0.3,\n fiberSize: 0.2,\n crumples: 0.3,\n crumpleSize: 0.35,\n folds: 0.65,\n foldCount: 5,\n fade: 0,\n drops: 0.2,\n seed: 5.8,\n },\n};\n\nexport const abstractPreset: PaperTexturePreset = {\n name: 'Abstract',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n scale: 0.6,\n colorFront: '#00eeff',\n colorBack: '#ff0a81',\n contrast: 0.85,\n roughness: 0,\n fiber: 0.1,\n fiberSize: 0.2,\n crumples: 0,\n crumpleSize: 0.3,\n folds: 1,\n foldCount: 3,\n fade: 0,\n drops: 0.2,\n seed: 2.2,\n },\n};\n\nexport const cardboardPreset: PaperTexturePreset = {\n name: 'Cardboard',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n scale: 0.6,\n colorFront: '#c7b89e',\n colorBack: '#999180',\n contrast: 0.4,\n roughness: 0,\n fiber: 0.35,\n fiberSize: 0.14,\n crumples: 0.7,\n crumpleSize: 0.1,\n folds: 0,\n foldCount: 1,\n fade: 0,\n drops: 0.1,\n seed: 1.6,\n },\n};\n\nexport const detailsPreset: PaperTexturePreset = {\n name: 'Details',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n fit: 'cover',\n scale: 3,\n colorFront: '#00000000',\n colorBack: '#00000000',\n contrast: 0,\n roughness: 1,\n fiber: 0.27,\n fiberSize: 0.22,\n crumples: 1,\n crumpleSize: 0.5,\n folds: 1,\n foldCount: 15,\n fade: 0,\n drops: 0,\n seed: 6,\n },\n};\n\nexport const paperTexturePresets: PaperTexturePreset[] = [\n defaultPreset,\n cardboardPreset,\n abstractPreset,\n detailsPreset,\n] as const;\n\nexport const PaperTexture: React.FC<PaperTextureProps> = memo(function PaperTextureImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorBack = defaultPreset.params.colorBack,\n image = '',\n contrast = defaultPreset.params.contrast,\n roughness = defaultPreset.params.roughness,\n fiber = defaultPreset.params.fiber,\n crumples = defaultPreset.params.crumples,\n folds = defaultPreset.params.folds,\n drops = defaultPreset.params.drops,\n seed = defaultPreset.params.seed,\n\n // Reworked props\n fiberScale,\n fiberSize = fiberScale === undefined ? defaultPreset.params.fiberSize : 0.2 / fiberScale,\n crumplesScale,\n crumpleSize = crumplesScale === undefined ? defaultPreset.params.crumpleSize : 0.2 / crumplesScale,\n blur,\n fade = blur === undefined ? defaultPreset.params.fade : blur,\n foldsNumber,\n foldCount = foldsNumber === undefined ? defaultPreset.params.foldCount : foldsNumber,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: PaperTextureProps) {\n const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\n\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_colorFront: getShaderColorFromString(colorFront),\n u_colorBack: getShaderColorFromString(colorBack),\n u_contrast: contrast,\n u_roughness: roughness,\n u_fiber: fiber,\n u_fiberSize: fiberSize,\n u_crumples: crumples,\n u_crumpleSize: crumpleSize,\n u_foldCount: foldCount,\n u_folds: folds,\n u_fade: fade,\n u_drops: drops,\n u_seed: seed,\n ...noiseTexture,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies PaperTextureUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={paperTextureFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -13,25 +13,32 @@ import {
|
|
|
13
13
|
pulsingBorderFragmentShader,
|
|
14
14
|
ShaderFitOptions
|
|
15
15
|
} from "@paper-design/shaders";
|
|
16
|
+
import { PulsingBorderAspectRatios } from "@paper-design/shaders";
|
|
16
17
|
import { jsx } from "react/jsx-runtime";
|
|
17
18
|
const defaultPreset = {
|
|
18
19
|
name: "Default",
|
|
19
20
|
params: {
|
|
20
21
|
...defaultObjectSizing,
|
|
21
|
-
scale: 0.6,
|
|
22
22
|
speed: 1,
|
|
23
23
|
frame: 0,
|
|
24
|
+
scale: 0.6,
|
|
24
25
|
colorBack: "#000000",
|
|
25
26
|
colors: ["#0dc1fd", "#d915ef", "#ff3f2ecc"],
|
|
26
27
|
roundness: 0.25,
|
|
27
|
-
thickness: 0.
|
|
28
|
+
thickness: 0.1,
|
|
29
|
+
margin: 0,
|
|
30
|
+
marginLeft: 0,
|
|
31
|
+
marginRight: 0,
|
|
32
|
+
marginTop: 0,
|
|
33
|
+
marginBottom: 0,
|
|
34
|
+
aspectRatio: "auto",
|
|
28
35
|
softness: 0.75,
|
|
29
36
|
intensity: 0.2,
|
|
30
|
-
bloom: 0.
|
|
31
|
-
spots:
|
|
32
|
-
spotSize: 0.
|
|
33
|
-
pulse: 0.
|
|
34
|
-
smoke: 0.
|
|
37
|
+
bloom: 0.25,
|
|
38
|
+
spots: 5,
|
|
39
|
+
spotSize: 0.5,
|
|
40
|
+
pulse: 0.25,
|
|
41
|
+
smoke: 0.3,
|
|
35
42
|
smokeSize: 0.6
|
|
36
43
|
}
|
|
37
44
|
};
|
|
@@ -39,23 +46,27 @@ const circlePreset = {
|
|
|
39
46
|
name: "Circle",
|
|
40
47
|
params: {
|
|
41
48
|
...defaultObjectSizing,
|
|
42
|
-
|
|
43
|
-
worldHeight: 400,
|
|
49
|
+
aspectRatio: "square",
|
|
44
50
|
scale: 0.6,
|
|
45
51
|
speed: 1,
|
|
46
52
|
frame: 0,
|
|
47
53
|
colorBack: "#000000",
|
|
48
54
|
colors: ["#0dc1fd", "#d915ef", "#ff3f2ecc"],
|
|
49
55
|
roundness: 1,
|
|
50
|
-
|
|
56
|
+
margin: 0,
|
|
57
|
+
marginLeft: 0,
|
|
58
|
+
marginRight: 0,
|
|
59
|
+
marginTop: 0,
|
|
60
|
+
marginBottom: 0,
|
|
61
|
+
thickness: 0,
|
|
51
62
|
softness: 0.75,
|
|
52
63
|
intensity: 0.2,
|
|
53
64
|
bloom: 0.45,
|
|
54
65
|
spots: 3,
|
|
55
66
|
spotSize: 0.4,
|
|
56
67
|
pulse: 0.5,
|
|
57
|
-
smoke:
|
|
58
|
-
smokeSize: 0
|
|
68
|
+
smoke: 1,
|
|
69
|
+
smokeSize: 0
|
|
59
70
|
}
|
|
60
71
|
};
|
|
61
72
|
const northernLightsPreset = {
|
|
@@ -63,19 +74,26 @@ const northernLightsPreset = {
|
|
|
63
74
|
params: {
|
|
64
75
|
...defaultObjectSizing,
|
|
65
76
|
speed: 0.18,
|
|
77
|
+
scale: 1.1,
|
|
66
78
|
frame: 0,
|
|
67
|
-
colors: ["#
|
|
79
|
+
colors: ["#4c4794", "#774a7d", "#12694a", "#0aff78", "#4733cc"],
|
|
68
80
|
colorBack: "#0c182c",
|
|
69
81
|
roundness: 0,
|
|
70
82
|
thickness: 1,
|
|
71
83
|
softness: 1,
|
|
72
|
-
|
|
73
|
-
|
|
84
|
+
margin: 0,
|
|
85
|
+
marginLeft: 0,
|
|
86
|
+
marginRight: 0,
|
|
87
|
+
marginTop: 0,
|
|
88
|
+
marginBottom: 0,
|
|
89
|
+
aspectRatio: "auto",
|
|
90
|
+
intensity: 0.1,
|
|
91
|
+
bloom: 0.2,
|
|
74
92
|
spots: 4,
|
|
75
|
-
spotSize: 0,
|
|
93
|
+
spotSize: 0.25,
|
|
76
94
|
pulse: 0,
|
|
77
|
-
smoke: 0.
|
|
78
|
-
smokeSize: 0.
|
|
95
|
+
smoke: 0.32,
|
|
96
|
+
smokeSize: 0.5
|
|
79
97
|
}
|
|
80
98
|
};
|
|
81
99
|
const solidLinePreset = {
|
|
@@ -84,15 +102,21 @@ const solidLinePreset = {
|
|
|
84
102
|
...defaultObjectSizing,
|
|
85
103
|
speed: 1,
|
|
86
104
|
frame: 0,
|
|
87
|
-
colors: ["#
|
|
105
|
+
colors: ["#81ADEC"],
|
|
88
106
|
colorBack: "#00000000",
|
|
89
107
|
roundness: 0,
|
|
90
|
-
thickness: 0.
|
|
108
|
+
thickness: 0.05,
|
|
109
|
+
margin: 0,
|
|
110
|
+
marginLeft: 0,
|
|
111
|
+
marginRight: 0,
|
|
112
|
+
marginTop: 0,
|
|
113
|
+
marginBottom: 0,
|
|
114
|
+
aspectRatio: "auto",
|
|
91
115
|
softness: 0,
|
|
92
116
|
intensity: 0,
|
|
93
117
|
bloom: 0.15,
|
|
94
118
|
spots: 4,
|
|
95
|
-
spotSize:
|
|
119
|
+
spotSize: 1,
|
|
96
120
|
pulse: 0,
|
|
97
121
|
smoke: 0,
|
|
98
122
|
smokeSize: 0
|
|
@@ -112,6 +136,7 @@ const PulsingBorder = memo(function PulsingBorderImpl({
|
|
|
112
136
|
colorBack = defaultPreset.params.colorBack,
|
|
113
137
|
roundness = defaultPreset.params.roundness,
|
|
114
138
|
thickness = defaultPreset.params.thickness,
|
|
139
|
+
aspectRatio = defaultPreset.params.aspectRatio,
|
|
115
140
|
softness = defaultPreset.params.softness,
|
|
116
141
|
bloom = defaultPreset.params.bloom,
|
|
117
142
|
intensity = defaultPreset.params.intensity,
|
|
@@ -120,6 +145,11 @@ const PulsingBorder = memo(function PulsingBorderImpl({
|
|
|
120
145
|
pulse = defaultPreset.params.pulse,
|
|
121
146
|
smoke = defaultPreset.params.smoke,
|
|
122
147
|
smokeSize = defaultPreset.params.smokeSize,
|
|
148
|
+
margin,
|
|
149
|
+
marginLeft = margin ?? defaultPreset.params.marginLeft,
|
|
150
|
+
marginRight = margin ?? defaultPreset.params.marginRight,
|
|
151
|
+
marginTop = margin ?? defaultPreset.params.marginTop,
|
|
152
|
+
marginBottom = margin ?? defaultPreset.params.marginBottom,
|
|
123
153
|
// Sizing props
|
|
124
154
|
fit = defaultPreset.params.fit,
|
|
125
155
|
rotation = defaultPreset.params.rotation,
|
|
@@ -139,6 +169,11 @@ const PulsingBorder = memo(function PulsingBorderImpl({
|
|
|
139
169
|
u_colorsCount: colors.length,
|
|
140
170
|
u_roundness: roundness,
|
|
141
171
|
u_thickness: thickness,
|
|
172
|
+
u_marginLeft: marginLeft,
|
|
173
|
+
u_marginRight: marginRight,
|
|
174
|
+
u_marginTop: marginTop,
|
|
175
|
+
u_marginBottom: marginBottom,
|
|
176
|
+
u_aspectRatio: PulsingBorderAspectRatios[aspectRatio],
|
|
142
177
|
u_softness: softness,
|
|
143
178
|
u_intensity: intensity,
|
|
144
179
|
u_bloom: bloom,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/pulsing-border.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n pulsingBorderFragmentShader,\n ShaderFitOptions,\n type PulsingBorderParams,\n type PulsingBorderUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface PulsingBorderProps extends ShaderComponentProps, PulsingBorderParams {}\n\ntype PulsingBorderPreset = ShaderPreset<PulsingBorderParams>;\n\nexport const defaultPreset: PulsingBorderPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n pulsingBorderFragmentShader,\n ShaderFitOptions,\n type PulsingBorderParams,\n type PulsingBorderUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\nimport { PulsingBorderAspectRatios } from '@paper-design/shaders';\n\nexport interface PulsingBorderProps extends ShaderComponentProps, PulsingBorderParams {}\n\ntype PulsingBorderPreset = ShaderPreset<PulsingBorderParams>;\n\nexport const defaultPreset: PulsingBorderPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n scale: 0.6,\n colorBack: '#000000',\n colors: ['#0dc1fd', '#d915ef', '#ff3f2ecc'],\n roundness: 0.25,\n thickness: 0.1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n aspectRatio: 'auto',\n softness: 0.75,\n intensity: 0.2,\n bloom: 0.25,\n spots: 5,\n spotSize: 0.5,\n pulse: 0.25,\n smoke: 0.3,\n smokeSize: 0.6,\n },\n};\n\nexport const circlePreset: PulsingBorderPreset = {\n name: 'Circle',\n params: {\n ...defaultObjectSizing,\n aspectRatio: 'square',\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#0dc1fd', '#d915ef', '#ff3f2ecc'],\n roundness: 1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n thickness: 0,\n softness: 0.75,\n intensity: 0.2,\n bloom: 0.45,\n spots: 3,\n spotSize: 0.4,\n pulse: 0.5,\n smoke: 1,\n smokeSize: 0,\n },\n};\n\nexport const northernLightsPreset: PulsingBorderPreset = {\n name: 'Northern lights',\n params: {\n ...defaultObjectSizing,\n speed: 0.18,\n scale: 1.1,\n frame: 0,\n colors: ['#4c4794', '#774a7d', '#12694a', '#0aff78', '#4733cc'],\n colorBack: '#0c182c',\n roundness: 0,\n thickness: 1,\n softness: 1,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n aspectRatio: 'auto',\n intensity: 0.1,\n bloom: 0.2,\n spots: 4,\n spotSize: 0.25,\n pulse: 0,\n smoke: 0.32,\n smokeSize: 0.5,\n },\n};\n\nexport const solidLinePreset: PulsingBorderPreset = {\n name: 'Solid line',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['#81ADEC'],\n colorBack: '#00000000',\n roundness: 0,\n thickness: 0.05,\n margin: 0,\n marginLeft: 0,\n marginRight: 0,\n marginTop: 0,\n marginBottom: 0,\n aspectRatio: 'auto',\n softness: 0.0,\n intensity: 0.0,\n bloom: 0.15,\n spots: 4,\n spotSize: 1,\n pulse: 0,\n smoke: 0,\n smokeSize: 0,\n },\n};\n\nexport const pulsingBorderPresets: PulsingBorderPreset[] = [\n defaultPreset,\n circlePreset,\n northernLightsPreset,\n solidLinePreset,\n];\n\nexport const PulsingBorder: React.FC<PulsingBorderProps> = memo(function PulsingBorderImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n colorBack = defaultPreset.params.colorBack,\n roundness = defaultPreset.params.roundness,\n thickness = defaultPreset.params.thickness,\n aspectRatio = defaultPreset.params.aspectRatio,\n softness = defaultPreset.params.softness,\n bloom = defaultPreset.params.bloom,\n intensity = defaultPreset.params.intensity,\n spots = defaultPreset.params.spots,\n spotSize = defaultPreset.params.spotSize,\n pulse = defaultPreset.params.pulse,\n smoke = defaultPreset.params.smoke,\n smokeSize = defaultPreset.params.smokeSize,\n margin,\n marginLeft = margin ?? defaultPreset.params.marginLeft,\n marginRight = margin ?? defaultPreset.params.marginRight,\n marginTop = margin ?? defaultPreset.params.marginTop,\n marginBottom = margin ?? defaultPreset.params.marginBottom,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: PulsingBorderProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_roundness: roundness,\n u_thickness: thickness,\n u_marginLeft: marginLeft,\n u_marginRight: marginRight,\n u_marginTop: marginTop,\n u_marginBottom: marginBottom,\n u_aspectRatio: PulsingBorderAspectRatios[aspectRatio],\n u_softness: softness,\n u_intensity: intensity,\n u_bloom: bloom,\n u_spots: spots,\n u_spotSize: spotSize,\n u_pulse: pulse,\n u_smoke: smoke,\n u_smokeSize: smokeSize,\n u_noiseTexture: getShaderNoiseTexture(),\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_rotation: rotation,\n u_scale: scale,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies PulsingBorderUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={pulsingBorderFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|