@paper-design/shaders-react 0.0.46 → 0.0.49

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.
Files changed (53) hide show
  1. package/dist/index.d.ts +3 -0
  2. package/dist/index.js +3 -0
  3. package/dist/index.js.map +2 -2
  4. package/dist/shader-mount.js +7 -1
  5. package/dist/shader-mount.js.map +2 -2
  6. package/dist/shaders/color-panels.js +4 -3
  7. package/dist/shaders/color-panels.js.map +2 -2
  8. package/dist/shaders/dithering.js +3 -2
  9. package/dist/shaders/dithering.js.map +2 -2
  10. package/dist/shaders/dot-orbit.js +4 -4
  11. package/dist/shaders/dot-orbit.js.map +2 -2
  12. package/dist/shaders/fluted-glass.js +12 -9
  13. package/dist/shaders/fluted-glass.js.map +2 -2
  14. package/dist/shaders/god-rays.js +1 -1
  15. package/dist/shaders/god-rays.js.map +1 -1
  16. package/dist/shaders/grain-gradient.js +1 -1
  17. package/dist/shaders/grain-gradient.js.map +1 -1
  18. package/dist/shaders/heatmap.d.ts +10 -0
  19. package/dist/shaders/heatmap.js +151 -0
  20. package/dist/shaders/heatmap.js.map +7 -0
  21. package/dist/shaders/image-dithering.js +5 -5
  22. package/dist/shaders/image-dithering.js.map +2 -2
  23. package/dist/shaders/liquid-metal.js +1 -1
  24. package/dist/shaders/liquid-metal.js.map +1 -1
  25. package/dist/shaders/metaballs.js +1 -1
  26. package/dist/shaders/metaballs.js.map +1 -1
  27. package/dist/shaders/neuro-noise.js +1 -1
  28. package/dist/shaders/neuro-noise.js.map +1 -1
  29. package/dist/shaders/paper-texture.js +10 -8
  30. package/dist/shaders/paper-texture.js.map +2 -2
  31. package/dist/shaders/perlin-noise.js +1 -1
  32. package/dist/shaders/perlin-noise.js.map +1 -1
  33. package/dist/shaders/pulsing-border.js +22 -22
  34. package/dist/shaders/pulsing-border.js.map +2 -2
  35. package/dist/shaders/simplex-noise.js +1 -1
  36. package/dist/shaders/simplex-noise.js.map +1 -1
  37. package/dist/shaders/smoke-ring.d.ts +1 -1
  38. package/dist/shaders/smoke-ring.js +18 -15
  39. package/dist/shaders/smoke-ring.js.map +2 -2
  40. package/dist/shaders/static-radial-gradient.js +1 -1
  41. package/dist/shaders/static-radial-gradient.js.map +1 -1
  42. package/dist/shaders/swirl.js +23 -11
  43. package/dist/shaders/swirl.js.map +2 -2
  44. package/dist/shaders/voronoi.js +1 -1
  45. package/dist/shaders/voronoi.js.map +1 -1
  46. package/dist/shaders/water.js +16 -17
  47. package/dist/shaders/water.js.map +2 -2
  48. package/dist/shaders/waves.js +2 -2
  49. package/dist/shaders/waves.js.map +1 -1
  50. package/dist/transparent-pixel.d.ts +1 -0
  51. package/dist/transparent-pixel.js +10 -0
  52. package/dist/transparent-pixel.js.map +7 -0
  53. package/package.json +3 -3
@@ -0,0 +1,151 @@
1
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
+ * Paper Shaders *
3
+ * https://github.com/paper-design/shaders *
4
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
+
6
+ import React, { memo, useLayoutEffect, useMemo, useState } from "react";
7
+ import { ShaderMount } from "../shader-mount.js";
8
+ import {
9
+ getShaderColorFromString,
10
+ heatmapFragmentShader,
11
+ ShaderFitOptions,
12
+ defaultObjectSizing,
13
+ toProcessedHeatmap
14
+ } from "@paper-design/shaders";
15
+ import { preload } from "react-dom";
16
+ import { transparentPixel } from "../transparent-pixel.js";
17
+ import { jsx } from "react/jsx-runtime";
18
+ const defaultPreset = {
19
+ name: "Default",
20
+ params: {
21
+ ...defaultObjectSizing,
22
+ scale: 0.75,
23
+ speed: 1,
24
+ frame: 0,
25
+ image: "./heatmap-temporary/logo-pics/apple.svg",
26
+ contour: 0.5,
27
+ angle: 0,
28
+ noise: 0,
29
+ innerGlow: 0.5,
30
+ outerGlow: 0.5,
31
+ colorBack: "#000000",
32
+ colors: ["#11206a", "#1f3ba2", "#2f63e7", "#6bd7ff", "#ffe679", "#ff991e", "#ff4c00"]
33
+ }
34
+ };
35
+ const sepiaPreset = {
36
+ name: "Sepia",
37
+ params: {
38
+ ...defaultObjectSizing,
39
+ scale: 0.75,
40
+ speed: 0.5,
41
+ frame: 0,
42
+ image: "./heatmap-temporary/logo-pics/apple.svg",
43
+ contour: 0.5,
44
+ angle: 0,
45
+ noise: 0.75,
46
+ innerGlow: 0.5,
47
+ outerGlow: 0.5,
48
+ colorBack: "#000000",
49
+ colors: ["#997F45", "#ffffff"]
50
+ }
51
+ };
52
+ const heatmapPresets = [defaultPreset, sepiaPreset];
53
+ const Heatmap = memo(function HeatmapImpl({
54
+ // Own props
55
+ speed = defaultPreset.params.speed,
56
+ frame = defaultPreset.params.frame,
57
+ contour = defaultPreset.params.contour,
58
+ angle = defaultPreset.params.angle,
59
+ noise = defaultPreset.params.noise,
60
+ innerGlow = defaultPreset.params.innerGlow,
61
+ outerGlow = defaultPreset.params.outerGlow,
62
+ colorBack = defaultPreset.params.colorBack,
63
+ colors = defaultPreset.params.colors,
64
+ // Sizing props
65
+ fit = defaultPreset.params.fit,
66
+ image = transparentPixel,
67
+ offsetX = defaultPreset.params.offsetX,
68
+ offsetY = defaultPreset.params.offsetY,
69
+ originX = defaultPreset.params.originX,
70
+ originY = defaultPreset.params.originY,
71
+ rotation = defaultPreset.params.rotation,
72
+ scale = defaultPreset.params.scale,
73
+ worldHeight = defaultPreset.params.worldHeight,
74
+ worldWidth = defaultPreset.params.worldWidth,
75
+ ...props
76
+ }) {
77
+ const [processedImage, setProcessedImage] = useState(transparentPixel);
78
+ const imageUrl = typeof image === "string" ? image : image.src;
79
+ preload(imageUrl, { as: "image", crossOrigin: "anonymous", fetchPriority: "high" });
80
+ useLayoutEffect(() => {
81
+ if (!imageUrl) {
82
+ setProcessedImage(transparentPixel);
83
+ return;
84
+ }
85
+ let url;
86
+ let current = true;
87
+ toProcessedHeatmap(imageUrl).then((result) => {
88
+ if (current) {
89
+ url = URL.createObjectURL(result.blob);
90
+ setProcessedImage(url);
91
+ }
92
+ });
93
+ return () => {
94
+ current = false;
95
+ URL.revokeObjectURL(url);
96
+ };
97
+ }, [imageUrl]);
98
+ const uniforms = useMemo(
99
+ () => ({
100
+ // Own uniforms
101
+ u_image: processedImage,
102
+ u_contour: contour,
103
+ u_angle: angle,
104
+ u_noise: noise,
105
+ u_innerGlow: innerGlow,
106
+ u_outerGlow: outerGlow,
107
+ u_colorBack: getShaderColorFromString(colorBack),
108
+ u_colors: colors.map(getShaderColorFromString),
109
+ u_colorsCount: colors.length,
110
+ // Sizing uniforms
111
+ u_fit: ShaderFitOptions[fit],
112
+ u_offsetX: offsetX,
113
+ u_offsetY: offsetY,
114
+ u_originX: originX,
115
+ u_originY: originY,
116
+ u_rotation: rotation,
117
+ u_scale: scale,
118
+ u_worldHeight: worldHeight,
119
+ u_worldWidth: worldWidth
120
+ }),
121
+ [
122
+ speed,
123
+ frame,
124
+ contour,
125
+ angle,
126
+ noise,
127
+ innerGlow,
128
+ outerGlow,
129
+ colors,
130
+ colorBack,
131
+ processedImage,
132
+ fit,
133
+ offsetX,
134
+ offsetY,
135
+ originX,
136
+ originY,
137
+ rotation,
138
+ scale,
139
+ worldHeight,
140
+ worldWidth
141
+ ]
142
+ );
143
+ return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: heatmapFragmentShader, uniforms });
144
+ });
145
+ export {
146
+ Heatmap,
147
+ defaultPreset,
148
+ heatmapPresets,
149
+ sepiaPreset
150
+ };
151
+ //# sourceMappingURL=heatmap.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 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 type ShaderPreset,\n defaultObjectSizing,\n toProcessedHeatmap,\n} from '@paper-design/shaders';\n\nimport { preload } from 'react-dom';\nimport { transparentPixel } from '../transparent-pixel.js';\n\nexport interface HeatmapProps extends ShaderComponentProps, HeatmapParams {}\n\nexport type HeatmapPreset = ShaderPreset<HeatmapParams>;\n\nexport const defaultPreset: HeatmapPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 1,\n frame: 0,\n image: './heatmap-temporary/logo-pics/apple.svg',\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 image: './heatmap-temporary/logo-pics/apple.svg',\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 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\n // Sizing props\n fit = defaultPreset.params.fit,\n image = transparentPixel,\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 [processedImage, setProcessedImage] = useState<string>(transparentPixel);\n\n const imageUrl = typeof image === 'string' ? image : image.src;\n preload(imageUrl, { as: 'image', crossOrigin: 'anonymous', fetchPriority: 'high' });\n\n useLayoutEffect(() => {\n if (!imageUrl) {\n setProcessedImage(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 setProcessedImage(url);\n }\n });\n\n return () => {\n current = false;\n URL.revokeObjectURL(url);\n };\n }, [imageUrl]);\n\n const uniforms = useMemo(\n () => ({\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 speed,\n frame,\n contour,\n angle,\n noise,\n innerGlow,\n outerGlow,\n colors,\n colorBack,\n processedImage,\n fit,\n offsetX,\n offsetY,\n originX,\n originY,\n rotation,\n scale,\n worldHeight,\n worldWidth,\n ]\n ) satisfies HeatmapUniforms;\n\n return <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={heatmapFragmentShader} uniforms={uniforms} />;\n});\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -18,14 +18,14 @@ const defaultPreset = {
18
18
  name: "Default",
19
19
  params: {
20
20
  ...defaultObjectSizing,
21
- // fit: 'cover',
21
+ fit: "cover",
22
22
  // scale: 0.95,
23
23
  speed: 0,
24
24
  frame: 0,
25
25
  colorFront: "#94ffaf",
26
26
  colorBack: "#000c38",
27
27
  colorHighlight: "#eaff94",
28
- image: "/images/image-filters/0018.webp",
28
+ image: "https://shaders.paper.design/images/image-filters/0018.webp",
29
29
  type: "8x8",
30
30
  pxSize: 2,
31
31
  colorSteps: 2,
@@ -41,7 +41,7 @@ const retroPreset = {
41
41
  colorFront: "#eeeeee",
42
42
  colorBack: "#5452ff",
43
43
  colorHighlight: "#eeeeee",
44
- image: "/images/image-filters/0018.webp",
44
+ image: "https://shaders.paper.design/images/image-filters/0018.webp",
45
45
  type: "2x2",
46
46
  pxSize: 3,
47
47
  colorSteps: 1,
@@ -57,7 +57,7 @@ const noisePreset = {
57
57
  colorFront: "#a2997c",
58
58
  colorBack: "#000000",
59
59
  colorHighlight: "#ededed",
60
- image: "/images/image-filters/0018.webp",
60
+ image: "https://shaders.paper.design/images/image-filters/0018.webp",
61
61
  type: "random",
62
62
  pxSize: 1,
63
63
  colorSteps: 1,
@@ -73,7 +73,7 @@ const naturalPreset = {
73
73
  colorFront: "#ffffff",
74
74
  colorBack: "#000000",
75
75
  colorHighlight: "#ffffff",
76
- image: "/images/image-filters/0018.webp",
76
+ image: "https://shaders.paper.design/images/image-filters/0018.webp",
77
77
  type: "8x8",
78
78
  pxSize: 2,
79
79
  colorSteps: 5,
@@ -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 type ShaderPreset,\n defaultObjectSizing,\n DitheringTypes,\n} from '@paper-design/shaders';\n\nexport interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {}\n\ntype ImageDitheringPreset = ShaderPreset<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 image: '/images/image-filters/0018.webp',\n type: '8x8',\n pxSize: 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 image: '/images/image-filters/0018.webp',\n type: '2x2',\n pxSize: 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 image: '/images/image-filters/0018.webp',\n type: 'random',\n pxSize: 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 image: '/images/image-filters/0018.webp',\n type: '8x8',\n pxSize: 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 = defaultPreset.params.image,\n type = defaultPreset.params.type,\n pxSize = defaultPreset.params.pxSize,\n colorSteps = defaultPreset.params.colorSteps,\n originalColors = defaultPreset.params.originalColors,\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: pxSize,\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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",
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 type ShaderPreset,\n defaultObjectSizing,\n DitheringTypes,\n} from '@paper-design/shaders';\n\nexport interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {}\n\ntype ImageDitheringPreset = ShaderPreset<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 image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n type: '8x8',\n pxSize: 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 image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n type: '2x2',\n pxSize: 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 image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n type: 'random',\n pxSize: 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 image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n type: '8x8',\n pxSize: 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 = defaultPreset.params.image,\n type = defaultPreset.params.type,\n pxSize = defaultPreset.params.pxSize,\n colorSteps = defaultPreset.params.colorSteps,\n originalColors = defaultPreset.params.originalColors,\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: pxSize,\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": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,OACK;AA+HH;AAzHG,MAAM,gBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA;AAAA,IAEL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF;AAEO,MAAM,cAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF;AAEO,MAAM,cAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF;AAEO,MAAM,gBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF;AAEO,MAAM,wBAAgD,CAAC,eAAe,aAAa,aAAa,aAAa;AAE7G,MAAM,iBAAgD,KAAK,SAAS,mBAAmB;AAAA;AAAA,EAE5F,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,aAAa,cAAc,OAAO;AAAA,EAClC,YAAY,cAAc,OAAO;AAAA,EACjC,iBAAiB,cAAc,OAAO;AAAA,EACtC,QAAQ,cAAc,OAAO;AAAA,EAC7B,OAAO,cAAc,OAAO;AAAA,EAC5B,SAAS,cAAc,OAAO;AAAA,EAC9B,aAAa,cAAc,OAAO;AAAA,EAClC,iBAAiB,cAAc,OAAO;AAAA;AAAA,EAGtC,MAAM,cAAc,OAAO;AAAA,EAC3B,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAwB;AACtB,QAAM,WAAW;AAAA;AAAA,IAEf,SAAS;AAAA,IACT,cAAc,yBAAyB,UAAU;AAAA,IACjD,aAAa,yBAAyB,SAAS;AAAA,IAC/C,kBAAkB,yBAAyB,cAAc;AAAA,IACzD,QAAQ,eAAe,IAAI;AAAA,IAC3B,UAAU;AAAA,IACV,cAAc;AAAA,IACd,kBAAkB;AAAA;AAAA,IAGlB,OAAO,iBAAiB,GAAG;AAAA,IAC3B,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
6
6
  "names": []
7
7
  }
@@ -18,7 +18,7 @@ const defaultPreset = {
18
18
  name: "Default",
19
19
  params: {
20
20
  ...defaultObjectSizing,
21
- scale: 0.7,
21
+ scale: 0.6,
22
22
  speed: 1,
23
23
  frame: 8e3,
24
24
  colorBack: "#000000",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/shaders/liquid-metal.tsx"],
4
- "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n liquidMetalFragmentShader,\n ShaderFitOptions,\n type LiquidMetalUniforms,\n type LiquidMetalParams,\n type ShaderPreset,\n defaultObjectSizing,\n getShaderColorFromString,\n LiquidMetalShapes,\n} from '@paper-design/shaders';\n\nexport interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {}\n\ntype LiquidMetalPreset = ShaderPreset<LiquidMetalParams>;\n\nexport const defaultPreset: LiquidMetalPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.7,\n speed: 1,\n frame: 8000,\n colorBack: '#000000',\n colorTint: '#ffffff',\n softness: 0.3,\n repetition: 4,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.1,\n contour: 1,\n shape: 'circle',\n },\n};\n\nexport const dropsPreset: LiquidMetalPreset = {\n name: 'Drops',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#ffffff00',\n colorTint: '#ffffff',\n softness: 0.3,\n repetition: 3,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.3,\n contour: 0.88,\n shape: 'metaballs',\n },\n};\n\nexport const containedPreset: LiquidMetalPreset = {\n name: 'Contained',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#ffffff00',\n colorTint: '#ffffff',\n softness: 0.3,\n repetition: 3,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.07,\n contour: 0,\n shape: 'none',\n worldWidth: 0,\n worldHeight: 0,\n },\n};\n\nexport const fullScreenPreset: LiquidMetalPreset = {\n name: 'Full Screen',\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: 'none',\n },\n};\n\nexport const liquidMetalPresets: LiquidMetalPreset[] = [defaultPreset, containedPreset, 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"],
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n liquidMetalFragmentShader,\n ShaderFitOptions,\n type LiquidMetalUniforms,\n type LiquidMetalParams,\n type ShaderPreset,\n defaultObjectSizing,\n getShaderColorFromString,\n LiquidMetalShapes,\n} from '@paper-design/shaders';\n\nexport interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {}\n\ntype LiquidMetalPreset = ShaderPreset<LiquidMetalParams>;\n\nexport const defaultPreset: LiquidMetalPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.6,\n speed: 1,\n frame: 8000,\n colorBack: '#000000',\n colorTint: '#ffffff',\n softness: 0.3,\n repetition: 4,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.1,\n contour: 1,\n shape: 'circle',\n },\n};\n\nexport const dropsPreset: LiquidMetalPreset = {\n name: 'Drops',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#ffffff00',\n colorTint: '#ffffff',\n softness: 0.3,\n repetition: 3,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.3,\n contour: 0.88,\n shape: 'metaballs',\n },\n};\n\nexport const containedPreset: LiquidMetalPreset = {\n name: 'Contained',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#ffffff00',\n colorTint: '#ffffff',\n softness: 0.3,\n repetition: 3,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.07,\n contour: 0,\n shape: 'none',\n worldWidth: 0,\n worldHeight: 0,\n },\n};\n\nexport const fullScreenPreset: LiquidMetalPreset = {\n name: 'Full Screen',\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: 'none',\n },\n};\n\nexport const liquidMetalPresets: LiquidMetalPreset[] = [defaultPreset, containedPreset, dropsPreset, fullScreenPreset];\n\nexport const LiquidMetal: React.FC<LiquidMetalProps> = memo(function LiquidMetalImpl({\n // Own props\n colorBack = defaultPreset.params.colorBack,\n colorTint = defaultPreset.params.colorTint,\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n softness = defaultPreset.params.softness,\n repetition = defaultPreset.params.repetition,\n shiftRed = defaultPreset.params.shiftRed,\n shiftBlue = defaultPreset.params.shiftBlue,\n distortion = defaultPreset.params.distortion,\n contour = defaultPreset.params.contour,\n shape = defaultPreset.params.shape,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: LiquidMetalProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorTint: getShaderColorFromString(colorTint),\n\n u_softness: softness,\n u_repetition: repetition,\n u_shiftRed: shiftRed,\n u_shiftBlue: shiftBlue,\n u_distortion: distortion,\n u_contour: contour,\n u_shape: LiquidMetalShapes[shape],\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies LiquidMetalUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={liquidMetalFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -21,7 +21,7 @@ const defaultPreset = {
21
21
  scale: 1,
22
22
  speed: 1,
23
23
  frame: 0,
24
- colorBack: "#121212",
24
+ colorBack: "#000000",
25
25
  colors: ["#6e33cc", "#ff5500", "#ffc105", "#ffc800", "#f585ff"],
26
26
  count: 10,
27
27
  size: 0.83
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/shaders/metaballs.tsx"],
4
- "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\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: '#121212',\n colors: ['#6e33cc', '#ff5500', '#ffc105', '#ffc800', '#f585ff'],\n count: 10,\n size: 0.83,\n },\n};\n\nexport const inkDropsPreset: MetaballsPreset = {\n name: 'Ink Drops',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 2,\n frame: 0,\n colorBack: '#ffffff00',\n colors: ['#000000'],\n count: 18,\n size: 0.1,\n },\n};\n\nexport const backgroundPreset: MetaballsPreset = {\n name: 'Background',\n params: {\n ...defaultObjectSizing,\n speed: 0.5,\n frame: 0,\n colors: ['#ae00ff', '#00ff95', '#ffc105'],\n colorBack: '#2a273f',\n count: 13,\n size: 0.81,\n scale: 4.0,\n rotation: 0,\n offsetX: -0.3,\n },\n};\n\nexport const solarPreset: MetaballsPreset = {\n name: 'Solar',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['#ffc800', '#ff5500', '#ffc105'],\n colorBack: '#102f84',\n count: 7,\n size: 0.75,\n scale: 1,\n },\n};\n\nexport const metaballsPresets: MetaballsPreset[] = [defaultPreset, inkDropsPreset, solarPreset, backgroundPreset];\n\nexport const Metaballs: React.FC<MetaballsProps> = memo(function MetaballsImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n size = defaultPreset.params.size,\n count = defaultPreset.params.count,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: MetaballsProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_size: size,\n u_count: count,\n 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 MetaballsUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={metaballsFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
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 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: '#000000',\n colors: ['#6e33cc', '#ff5500', '#ffc105', '#ffc800', '#f585ff'],\n count: 10,\n size: 0.83,\n },\n};\n\nexport const inkDropsPreset: MetaballsPreset = {\n name: 'Ink Drops',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 2,\n frame: 0,\n colorBack: '#ffffff00',\n colors: ['#000000'],\n count: 18,\n size: 0.1,\n },\n};\n\nexport const backgroundPreset: MetaballsPreset = {\n name: 'Background',\n params: {\n ...defaultObjectSizing,\n speed: 0.5,\n frame: 0,\n colors: ['#ae00ff', '#00ff95', '#ffc105'],\n colorBack: '#2a273f',\n count: 13,\n size: 0.81,\n scale: 4.0,\n rotation: 0,\n offsetX: -0.3,\n },\n};\n\nexport const solarPreset: MetaballsPreset = {\n name: 'Solar',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colors: ['#ffc800', '#ff5500', '#ffc105'],\n colorBack: '#102f84',\n count: 7,\n size: 0.75,\n scale: 1,\n },\n};\n\nexport const metaballsPresets: MetaballsPreset[] = [defaultPreset, inkDropsPreset, solarPreset, backgroundPreset];\n\nexport const Metaballs: React.FC<MetaballsProps> = memo(function MetaballsImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n size = defaultPreset.params.size,\n count = defaultPreset.params.count,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: MetaballsProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_size: size,\n u_count: count,\n 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 MetaballsUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={metaballsFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
5
5
  "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AA6GH;AAvGG,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,WAAW,SAAS;AAAA,IAC9D,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,iBAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,SAAS;AAAA,IAClB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,mBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,WAAW;AAAA,IACX,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,cAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,WAAW;AAAA,IACX,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,MAAM,mBAAsC,CAAC,eAAe,gBAAgB,aAAa,gBAAgB;AAEzG,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,IACT,gBAAgB,sBAAsB;AAAA;AAAA,IAGtC,OAAO,iBAAiB,GAAG;AAAA,IAC3B,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,yBAAyB,UAAoB;AAErH,GAAG,kBAAkB;",
6
6
  "names": []
7
7
  }
@@ -20,7 +20,7 @@ const defaultPreset = {
20
20
  speed: 1,
21
21
  frame: 0,
22
22
  colorFront: "#ffffff",
23
- colorMid: "#00a2ff",
23
+ colorMid: "#47a6ff",
24
24
  colorBack: "#000000",
25
25
  brightness: 0.05,
26
26
  contrast: 0.3
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/shaders/neuro-noise.tsx"],
4
- "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultPatternSizing,\n getShaderColorFromString,\n neuroNoiseFragmentShader,\n ShaderFitOptions,\n type NeuroNoiseParams,\n type NeuroNoiseUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams {}\n\ntype NeuroNoisePreset = ShaderPreset<NeuroNoiseParams>;\n\nexport const defaultPreset: NeuroNoisePreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#ffffff',\n colorMid: '#00a2ff',\n colorBack: '#000000',\n brightness: 0.05,\n contrast: 0.3,\n },\n};\n\nexport const sensationPreset: NeuroNoisePreset = {\n name: 'Sensation',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#00c8ff',\n colorMid: '#fbff00',\n colorBack: '#8b42ff',\n brightness: 0.19,\n contrast: 0.12,\n scale: 3,\n },\n};\n\nexport const bloodstreamPreset: NeuroNoisePreset = {\n name: 'Bloodstream',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#ff0000',\n colorMid: '#ff0000',\n colorBack: '#ffffff',\n brightness: 0.24,\n contrast: 0.17,\n scale: 0.7,\n },\n};\n\nexport const ghostPreset: NeuroNoisePreset = {\n name: 'Ghost',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#ffffff',\n colorMid: '#000000',\n colorBack: '#ffffff',\n brightness: 0.0,\n contrast: 1.0,\n scale: 0.55,\n },\n};\n\nexport const neuroNoisePresets: NeuroNoisePreset[] = [\n defaultPreset,\n sensationPreset,\n bloodstreamPreset,\n ghostPreset,\n] as const;\n\nexport const NeuroNoise: React.FC<NeuroNoiseProps> = memo(function NeuroNoiseImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorMid = defaultPreset.params.colorMid,\n colorBack = defaultPreset.params.colorBack,\n brightness = defaultPreset.params.brightness,\n contrast = defaultPreset.params.contrast,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: NeuroNoiseProps) {\n const uniforms = {\n // Own uniforms\n u_colorFront: getShaderColorFromString(colorFront),\n u_colorMid: getShaderColorFromString(colorMid),\n u_colorBack: getShaderColorFromString(colorBack),\n u_brightness: brightness,\n u_contrast: contrast,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies NeuroNoiseUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={neuroNoiseFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultPatternSizing,\n getShaderColorFromString,\n neuroNoiseFragmentShader,\n ShaderFitOptions,\n type NeuroNoiseParams,\n type NeuroNoiseUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams {}\n\ntype NeuroNoisePreset = ShaderPreset<NeuroNoiseParams>;\n\nexport const defaultPreset: NeuroNoisePreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#ffffff',\n colorMid: '#47a6ff',\n colorBack: '#000000',\n brightness: 0.05,\n contrast: 0.3,\n },\n};\n\nexport const sensationPreset: NeuroNoisePreset = {\n name: 'Sensation',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#00c8ff',\n colorMid: '#fbff00',\n colorBack: '#8b42ff',\n brightness: 0.19,\n contrast: 0.12,\n scale: 3,\n },\n};\n\nexport const bloodstreamPreset: NeuroNoisePreset = {\n name: 'Bloodstream',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#ff0000',\n colorMid: '#ff0000',\n colorBack: '#ffffff',\n brightness: 0.24,\n contrast: 0.17,\n scale: 0.7,\n },\n};\n\nexport const ghostPreset: NeuroNoisePreset = {\n name: 'Ghost',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorFront: '#ffffff',\n colorMid: '#000000',\n colorBack: '#ffffff',\n brightness: 0.0,\n contrast: 1.0,\n scale: 0.55,\n },\n};\n\nexport const neuroNoisePresets: NeuroNoisePreset[] = [\n defaultPreset,\n sensationPreset,\n bloodstreamPreset,\n ghostPreset,\n] as const;\n\nexport const NeuroNoise: React.FC<NeuroNoiseProps> = memo(function NeuroNoiseImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorMid = defaultPreset.params.colorMid,\n colorBack = defaultPreset.params.colorBack,\n brightness = defaultPreset.params.brightness,\n contrast = defaultPreset.params.contrast,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: NeuroNoiseProps) {\n const uniforms = {\n // Own uniforms\n u_colorFront: getShaderColorFromString(colorFront),\n u_colorMid: getShaderColorFromString(colorMid),\n u_colorBack: getShaderColorFromString(colorBack),\n u_brightness: brightness,\n u_contrast: contrast,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies NeuroNoiseUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={neuroNoiseFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
5
5
  "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAmHH;AA7GG,MAAM,gBAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,kBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAEO,MAAM,oBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAEO,MAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAEO,MAAM,oBAAwC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,aAAwC,KAAK,SAAS,eAAe;AAAA;AAAA,EAEhF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,aAAa,cAAc,OAAO;AAAA,EAClC,WAAW,cAAc,OAAO;AAAA,EAChC,YAAY,cAAc,OAAO;AAAA,EACjC,aAAa,cAAc,OAAO;AAAA,EAClC,WAAW,cAAc,OAAO;AAAA;AAAA,EAGhC,MAAM,cAAc,OAAO;AAAA,EAC3B,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAoB;AAClB,QAAM,WAAW;AAAA;AAAA,IAEf,cAAc,yBAAyB,UAAU;AAAA,IACjD,YAAY,yBAAyB,QAAQ;AAAA,IAC7C,aAAa,yBAAyB,SAAS;AAAA,IAC/C,cAAc;AAAA,IACd,YAAY;AAAA;AAAA,IAGZ,OAAO,iBAAiB,GAAG;AAAA,IAC3B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,0BAA0B,UAAoB;AAEtH,GAAG,kBAAkB;",
6
6
  "names": []
7
7
  }
@@ -18,13 +18,13 @@ const defaultPreset = {
18
18
  name: "Default",
19
19
  params: {
20
20
  ...defaultObjectSizing,
21
- // fit: 'cover',
21
+ fit: "cover",
22
22
  scale: 0.6,
23
23
  speed: 0,
24
24
  frame: 0,
25
25
  colorFront: "#9fadbc",
26
26
  colorBack: "#ffffff",
27
- image: "/images/image-filters/0018.webp",
27
+ image: "https://shaders.paper.design/images/image-filters/0018.webp",
28
28
  contrast: 0.3,
29
29
  roughness: 0.4,
30
30
  fiber: 0.3,
@@ -42,12 +42,13 @@ const abstractPreset = {
42
42
  name: "Abstract",
43
43
  params: {
44
44
  ...defaultObjectSizing,
45
+ fit: "cover",
45
46
  speed: 0,
46
47
  frame: 0,
47
48
  scale: 0.6,
48
49
  colorFront: "#00eeff",
49
50
  colorBack: "#ff0a81",
50
- image: "/images/image-filters/0018.webp",
51
+ image: "https://shaders.paper.design/images/image-filters/0018.webp",
51
52
  contrast: 0.85,
52
53
  roughness: 0,
53
54
  fiber: 0.1,
@@ -65,12 +66,13 @@ const cardboardPreset = {
65
66
  name: "Cardboard",
66
67
  params: {
67
68
  ...defaultObjectSizing,
69
+ fit: "cover",
68
70
  speed: 0,
69
71
  frame: 0,
70
72
  scale: 0.6,
71
- colorFront: "#c98e26",
72
- colorBack: "#573b0a",
73
- image: "/images/image-filters/0018.webp",
73
+ colorFront: "#c7b89e",
74
+ colorBack: "#999180",
75
+ image: "https://shaders.paper.design/images/image-filters/0018.webp",
74
76
  contrast: 0.4,
75
77
  roughness: 0,
76
78
  fiber: 0.35,
@@ -93,8 +95,8 @@ const detailsPreset = {
93
95
  fit: "cover",
94
96
  scale: 3,
95
97
  colorFront: "#00000000",
96
- colorBack: "#ffffff",
97
- image: "/images/image-filters/0018.webp",
98
+ colorBack: "#00000000",
99
+ image: "https://shaders.paper.design/images/image-filters/0018.webp",
98
100
  contrast: 0,
99
101
  roughness: 1,
100
102
  fiber: 0.27,
@@ -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 PaperTextureParams,\n type PaperTextureUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {}\n\ntype PaperTexturePreset = ShaderPreset<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 image: '/images/image-filters/0018.webp',\n contrast: 0.3,\n roughness: 0.4,\n fiber: 0.3,\n fiberScale: 1,\n crumples: 0.3,\n crumplesScale: 0.6,\n folds: 0.65,\n foldsNumber: 5,\n blur: 0,\n drops: 0.2,\n seed: 5.8,\n },\n};\n\nexport const abstractPreset: PaperTexturePreset = {\n name: 'Abstract',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n scale: 0.6,\n colorFront: '#00eeff',\n colorBack: '#ff0a81',\n image: '/images/image-filters/0018.webp',\n contrast: 0.85,\n roughness: 0,\n fiber: 0.1,\n fiberScale: 1,\n crumples: 0,\n crumplesScale: 1,\n folds: 1,\n foldsNumber: 3,\n blur: 0,\n drops: 0.2,\n seed: 2.2,\n },\n};\n\nexport const cardboardPreset: PaperTexturePreset = {\n name: 'Cardboard',\n params: {\n ...defaultObjectSizing,\n speed: 0,\n frame: 0,\n scale: 0.6,\n colorFront: '#c98e26',\n colorBack: '#573b0a',\n image: '/images/image-filters/0018.webp',\n contrast: 0.4,\n roughness: 0,\n fiber: 0.35,\n fiberScale: 2,\n crumples: 0.7,\n crumplesScale: 0.6,\n folds: 0,\n foldsNumber: 1,\n blur: 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: '#ffffff',\n image: '/images/image-filters/0018.webp',\n contrast: 0,\n roughness: 1,\n fiber: 0.27,\n fiberScale: 2,\n crumples: 1,\n crumplesScale: 3,\n folds: 1,\n foldsNumber: 15,\n blur: 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 = defaultPreset.params.image,\n contrast = defaultPreset.params.contrast,\n roughness = defaultPreset.params.roughness,\n fiber = defaultPreset.params.fiber,\n fiberScale = defaultPreset.params.fiberScale,\n crumples = defaultPreset.params.crumples,\n crumplesScale = defaultPreset.params.crumplesScale,\n foldsNumber = defaultPreset.params.foldsNumber,\n folds = defaultPreset.params.folds,\n blur = defaultPreset.params.blur,\n drops = defaultPreset.params.drops,\n seed = defaultPreset.params.seed,\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_fiberScale: fiberScale,\n u_crumples: crumples,\n u_crumplesScale: crumplesScale,\n u_foldsNumber: foldsNumber,\n u_folds: folds,\n u_blur: blur,\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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",
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 PaperTextureParams,\n type PaperTextureUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {}\n\ntype PaperTexturePreset = ShaderPreset<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 image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n contrast: 0.3,\n roughness: 0.4,\n fiber: 0.3,\n fiberScale: 1,\n crumples: 0.3,\n crumplesScale: 0.6,\n folds: 0.65,\n foldsNumber: 5,\n blur: 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 image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n contrast: 0.85,\n roughness: 0,\n fiber: 0.1,\n fiberScale: 1,\n crumples: 0,\n crumplesScale: 1,\n folds: 1,\n foldsNumber: 3,\n blur: 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 image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n contrast: 0.4,\n roughness: 0,\n fiber: 0.35,\n fiberScale: 2,\n crumples: 0.7,\n crumplesScale: 0.6,\n folds: 0,\n foldsNumber: 1,\n blur: 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 image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n contrast: 0,\n roughness: 1,\n fiber: 0.27,\n fiberScale: 2,\n crumples: 1,\n crumplesScale: 3,\n folds: 1,\n foldsNumber: 15,\n blur: 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 = defaultPreset.params.image,\n contrast = defaultPreset.params.contrast,\n roughness = defaultPreset.params.roughness,\n fiber = defaultPreset.params.fiber,\n fiberScale = defaultPreset.params.fiberScale,\n crumples = defaultPreset.params.crumples,\n crumplesScale = defaultPreset.params.crumplesScale,\n foldsNumber = defaultPreset.params.foldsNumber,\n folds = defaultPreset.params.folds,\n blur = defaultPreset.params.blur,\n drops = defaultPreset.params.drops,\n seed = defaultPreset.params.seed,\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_fiberScale: fiberScale,\n u_crumples: crumples,\n u_crumplesScale: crumplesScale,\n u_foldsNumber: foldsNumber,\n u_folds: folds,\n u_blur: blur,\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
  }
@@ -67,7 +67,7 @@ const wormsPreset = {
67
67
  scale: 0.9,
68
68
  speed: 0,
69
69
  frame: 0,
70
- colorBack: "#ffffff",
70
+ colorBack: "#ffffff00",
71
71
  colorFront: "#595959",
72
72
  proportion: 0.5,
73
73
  softness: 0,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/shaders/perlin-noise.tsx"],
4
- "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultPatternSizing,\n getShaderColorFromString,\n perlinNoiseFragmentShader,\n ShaderFitOptions,\n type PerlinNoiseParams,\n type PerlinNoiseUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface PerlinNoiseProps extends ShaderComponentProps, PerlinNoiseParams {}\n\ntype PerlinNoisePreset = ShaderPreset<PerlinNoiseParams>;\n\nexport const defaultPreset: PerlinNoisePreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 0.5,\n frame: 0,\n colorBack: '#632ad5',\n colorFront: '#fccff7',\n proportion: 0.35,\n softness: 0.1,\n octaveCount: 1,\n persistence: 1,\n lacunarity: 1.5,\n },\n};\n\nexport const nintendoWaterPreset: PerlinNoisePreset = {\n name: 'Nintendo Water',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.2,\n speed: 0.4,\n frame: 0,\n colorBack: '#2d69d4',\n colorFront: '#d1eefc',\n proportion: 0.42,\n softness: 0,\n octaveCount: 2,\n persistence: 0.55,\n lacunarity: 1.8,\n },\n};\n\nexport const mossPreset: PerlinNoisePreset = {\n name: 'Moss',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.15,\n speed: 0.02,\n frame: 0,\n colorBack: '#05ff4a',\n colorFront: '#262626',\n proportion: 0.65,\n softness: 0.35,\n octaveCount: 6,\n persistence: 1,\n lacunarity: 2.55,\n },\n};\n\nexport const wormsPreset: PerlinNoisePreset = {\n name: 'Worms',\n params: {\n ...defaultPatternSizing,\n scale: 0.9,\n speed: 0,\n frame: 0,\n colorBack: '#ffffff',\n colorFront: '#595959',\n proportion: 0.5,\n softness: 0,\n octaveCount: 1,\n persistence: 1,\n lacunarity: 1.5,\n },\n};\n\nexport const perlinNoisePresets: PerlinNoisePreset[] = [defaultPreset, nintendoWaterPreset, mossPreset, wormsPreset];\n\nexport const PerlinNoise: React.FC<PerlinNoiseProps> = memo(function PerlinNoiseImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorBack = defaultPreset.params.colorBack,\n proportion = defaultPreset.params.proportion,\n softness = defaultPreset.params.softness,\n octaveCount = defaultPreset.params.octaveCount,\n persistence = defaultPreset.params.persistence,\n lacunarity,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n ...props\n}: PerlinNoiseProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorFront: getShaderColorFromString(colorFront),\n u_proportion: proportion,\n u_softness: softness ?? defaultPreset.params.softness,\n u_octaveCount: octaveCount ?? defaultPreset.params.octaveCount,\n u_persistence: persistence ?? defaultPreset.params.persistence,\n u_lacunarity: lacunarity ?? defaultPreset.params.lacunarity,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies PerlinNoiseUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={perlinNoiseFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
4
+ "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultPatternSizing,\n getShaderColorFromString,\n perlinNoiseFragmentShader,\n ShaderFitOptions,\n type PerlinNoiseParams,\n type PerlinNoiseUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface PerlinNoiseProps extends ShaderComponentProps, PerlinNoiseParams {}\n\ntype PerlinNoisePreset = ShaderPreset<PerlinNoiseParams>;\n\nexport const defaultPreset: PerlinNoisePreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 0.5,\n frame: 0,\n colorBack: '#632ad5',\n colorFront: '#fccff7',\n proportion: 0.35,\n softness: 0.1,\n octaveCount: 1,\n persistence: 1,\n lacunarity: 1.5,\n },\n};\n\nexport const nintendoWaterPreset: PerlinNoisePreset = {\n name: 'Nintendo Water',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.2,\n speed: 0.4,\n frame: 0,\n colorBack: '#2d69d4',\n colorFront: '#d1eefc',\n proportion: 0.42,\n softness: 0,\n octaveCount: 2,\n persistence: 0.55,\n lacunarity: 1.8,\n },\n};\n\nexport const mossPreset: PerlinNoisePreset = {\n name: 'Moss',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.15,\n speed: 0.02,\n frame: 0,\n colorBack: '#05ff4a',\n colorFront: '#262626',\n proportion: 0.65,\n softness: 0.35,\n octaveCount: 6,\n persistence: 1,\n lacunarity: 2.55,\n },\n};\n\nexport const wormsPreset: PerlinNoisePreset = {\n name: 'Worms',\n params: {\n ...defaultPatternSizing,\n scale: 0.9,\n speed: 0,\n frame: 0,\n colorBack: '#ffffff00',\n colorFront: '#595959',\n proportion: 0.5,\n softness: 0,\n octaveCount: 1,\n persistence: 1,\n lacunarity: 1.5,\n },\n};\n\nexport const perlinNoisePresets: PerlinNoisePreset[] = [defaultPreset, nintendoWaterPreset, mossPreset, wormsPreset];\n\nexport const PerlinNoise: React.FC<PerlinNoiseProps> = memo(function PerlinNoiseImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorBack = defaultPreset.params.colorBack,\n proportion = defaultPreset.params.proportion,\n softness = defaultPreset.params.softness,\n octaveCount = defaultPreset.params.octaveCount,\n persistence = defaultPreset.params.persistence,\n lacunarity,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n ...props\n}: PerlinNoiseProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorFront: getShaderColorFromString(colorFront),\n u_proportion: proportion,\n u_softness: softness ?? defaultPreset.params.softness,\n u_octaveCount: octaveCount ?? defaultPreset.params.octaveCount,\n u_persistence: persistence ?? defaultPreset.params.persistence,\n u_lacunarity: lacunarity ?? defaultPreset.params.lacunarity,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies PerlinNoiseUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={perlinNoiseFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -18,11 +18,11 @@ const defaultPreset = {
18
18
  name: "Default",
19
19
  params: {
20
20
  ...defaultObjectSizing,
21
- scale: 0.5,
21
+ scale: 0.6,
22
22
  speed: 1,
23
23
  frame: 0,
24
24
  colorBack: "#000000",
25
- colors: ["#f22652", "#4da6e6", "#ffa600"],
25
+ colors: ["#0dc1fd", "#d915ef", "#ff3f2ecc"],
26
26
  roundness: 0.25,
27
27
  thickness: 0.2,
28
28
  softness: 0.75,
@@ -30,7 +30,7 @@ const defaultPreset = {
30
30
  bloom: 0.45,
31
31
  spots: 3,
32
32
  spotSize: 0.4,
33
- pulse: 0.2,
33
+ pulse: 0.5,
34
34
  smoke: 0.35,
35
35
  smokeSize: 0.6
36
36
  }
@@ -44,18 +44,18 @@ const circlePreset = {
44
44
  scale: 0.6,
45
45
  speed: 1,
46
46
  frame: 0,
47
- colorBack: "#110222",
48
- colors: ["#ffdd33", "#ff0000", "#00ffff"],
47
+ colorBack: "#000000",
48
+ colors: ["#0dc1fd", "#d915ef", "#ff3f2ecc"],
49
49
  roundness: 1,
50
- thickness: 0.4,
51
- softness: 1,
52
- intensity: 0.8,
53
- bloom: 0.8,
54
- spots: 2,
55
- spotSize: 0.45,
56
- pulse: 0,
57
- smoke: 0.25,
58
- smokeSize: 0.62
50
+ thickness: 0.05,
51
+ softness: 0.75,
52
+ intensity: 0.2,
53
+ bloom: 0.45,
54
+ spots: 3,
55
+ spotSize: 0.4,
56
+ pulse: 0.5,
57
+ smoke: 0.35,
58
+ smokeSize: 0.6
59
59
  }
60
60
  };
61
61
  const northernLightsPreset = {
@@ -65,7 +65,7 @@ const northernLightsPreset = {
65
65
  speed: 0.18,
66
66
  frame: 0,
67
67
  colors: ["#3426f2", "#156ba8", "#126964", "#0affba", "#4733cc"],
68
- colorBack: "#002942",
68
+ colorBack: "#0c182c",
69
69
  roundness: 0,
70
70
  thickness: 1,
71
71
  softness: 1,
@@ -82,20 +82,20 @@ const solidLinePreset = {
82
82
  name: "Solid line",
83
83
  params: {
84
84
  ...defaultObjectSizing,
85
- speed: 2,
85
+ speed: 1,
86
86
  frame: 0,
87
- colors: ["#759717", "#ff0073", "#00ffb3"],
88
- colorBack: "#000000",
89
- roundness: 0.05,
90
- thickness: 0.03,
87
+ colors: ["#ffade4", "#e13381", "#fa389f"],
88
+ colorBack: "#00000000",
89
+ roundness: 0,
90
+ thickness: 0.1,
91
91
  softness: 0,
92
92
  intensity: 0,
93
93
  bloom: 0.15,
94
94
  spots: 4,
95
- spotSize: 0.28,
95
+ spotSize: 0.5,
96
96
  pulse: 0,
97
97
  smoke: 0,
98
- smokeSize: 0.63
98
+ smokeSize: 0
99
99
  }
100
100
  };
101
101
  const pulsingBorderPresets = [