@paper-design/shaders-react 0.0.33 → 0.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -4
- package/dist/index.d.ts +41 -38
- package/dist/index.js +22 -19
- package/dist/index.js.map +2 -2
- package/dist/shader-mount.d.ts +4 -1
- package/dist/shader-mount.js +1 -1
- package/dist/shader-mount.js.map +2 -2
- package/dist/shaders/color-panels.d.ts +9 -0
- package/dist/shaders/color-panels.js +107 -0
- package/dist/shaders/color-panels.js.map +7 -0
- package/dist/shaders/dithering.d.ts +1 -1
- package/dist/shaders/dithering.js +19 -19
- package/dist/shaders/dithering.js.map +2 -2
- package/dist/shaders/dot-grid.d.ts +1 -1
- package/dist/shaders/dot-grid.js +2 -2
- package/dist/shaders/dot-grid.js.map +2 -2
- package/dist/shaders/dot-orbit.d.ts +1 -1
- package/dist/shaders/dot-orbit.js +6 -3
- package/dist/shaders/dot-orbit.js.map +2 -2
- package/dist/shaders/god-rays.d.ts +1 -1
- package/dist/shaders/god-rays.js +16 -9
- package/dist/shaders/god-rays.js.map +2 -2
- package/dist/shaders/grain-gradient.d.ts +1 -1
- package/dist/shaders/grain-gradient.js +19 -9
- package/dist/shaders/grain-gradient.js.map +2 -2
- package/dist/shaders/liquid-metal.d.ts +4 -1
- package/dist/shaders/liquid-metal.js +89 -20
- package/dist/shaders/liquid-metal.js.map +2 -2
- package/dist/shaders/mesh-gradient.d.ts +1 -1
- package/dist/shaders/mesh-gradient.js +2 -2
- package/dist/shaders/mesh-gradient.js.map +2 -2
- package/dist/shaders/metaballs.d.ts +1 -1
- package/dist/shaders/metaballs.js +5 -2
- package/dist/shaders/metaballs.js.map +2 -2
- package/dist/shaders/neuro-noise.d.ts +1 -1
- package/dist/shaders/neuro-noise.js +11 -17
- package/dist/shaders/neuro-noise.js.map +2 -2
- package/dist/shaders/perlin-noise.d.ts +1 -1
- package/dist/shaders/perlin-noise.js +18 -18
- package/dist/shaders/perlin-noise.js.map +2 -2
- package/dist/shaders/pulsing-border.d.ts +1 -1
- package/dist/shaders/pulsing-border.js +2 -2
- package/dist/shaders/pulsing-border.js.map +2 -2
- package/dist/shaders/simplex-noise.d.ts +1 -1
- package/dist/shaders/simplex-noise.js +2 -2
- package/dist/shaders/simplex-noise.js.map +2 -2
- package/dist/shaders/smoke-ring.d.ts +1 -1
- package/dist/shaders/smoke-ring.js +2 -2
- package/dist/shaders/smoke-ring.js.map +2 -2
- package/dist/shaders/spiral.d.ts +1 -1
- package/dist/shaders/spiral.js +20 -20
- package/dist/shaders/spiral.js.map +2 -2
- package/dist/shaders/swirl.d.ts +1 -1
- package/dist/shaders/swirl.js +12 -6
- package/dist/shaders/swirl.js.map +2 -2
- package/dist/shaders/voronoi.d.ts +1 -1
- package/dist/shaders/voronoi.js +10 -10
- package/dist/shaders/voronoi.js.map +2 -2
- package/dist/shaders/warp.d.ts +1 -1
- package/dist/shaders/warp.js +8 -8
- package/dist/shaders/warp.js.map +2 -2
- package/dist/shaders/waves.d.ts +1 -1
- package/dist/shaders/waves.js +18 -18
- package/dist/shaders/waves.js.map +2 -2
- package/package.json +2 -2
|
@@ -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';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n liquidMetalFragmentShader,\n ShaderFitOptions,\n type LiquidMetalUniforms,\n type LiquidMetalParams,\n type ShaderPreset,\n defaultObjectSizing,\n getShaderColorFromString,\n LiquidMetalShapes,\n} from '@paper-design/shaders';\n\nexport interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {}\n\ntype LiquidMetalPreset = ShaderPreset<LiquidMetalParams>;\n\nexport const defaultPreset: LiquidMetalPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#ffffff',\n colorTint: '#ffffff',\n softness: 0.3,\n repetition: 3,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.3,\n contour: 0.88,\n shape: 'metaballs',\n },\n};\n\nexport const fullScreenPreset: LiquidMetalPreset = {\n name: 'Full Screen',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#111111',\n colorTint: '#ffffff',\n softness: 0.3,\n repetition: 3,\n shiftRed: 0.3,\n shiftBlue: 0.3,\n distortion: 0.07,\n contour: 0,\n shape: 'none',\n worldWidth: 0,\n worldHeight: 0,\n },\n};\n\nexport const spherePreset: LiquidMetalPreset = {\n name: 'Sphere',\n params: {\n ...defaultObjectSizing,\n scale: 0.7,\n speed: 2,\n frame: 0,\n colorBack: '#ffffff',\n colorTint: '#d1e0ff',\n softness: 0.45,\n repetition: 4,\n shiftRed: 1,\n shiftBlue: 0.3,\n distortion: 0.1,\n contour: 0.4,\n shape: 'circle',\n },\n};\n\nexport const dropsPreset: LiquidMetalPreset = {\n name: 'Drops',\n params: {\n ...defaultObjectSizing,\n scale: 2.2,\n speed: 1,\n frame: 0,\n colorBack: '#00042e',\n colorTint: '#5b4dc7',\n softness: 0.45,\n repetition: 4,\n shiftRed: -0.5,\n shiftBlue: -1,\n distortion: 0.1,\n contour: 1,\n shape: 'metaballs',\n },\n};\n\nexport const liquidMetalPresets: LiquidMetalPreset[] = [defaultPreset, spherePreset, dropsPreset, fullScreenPreset];\n\nexport const LiquidMetal: React.FC<LiquidMetalProps> = memo(function LiquidMetalImpl({\n // Own props\n colorBack = defaultPreset.params.colorBack,\n colorTint = defaultPreset.params.colorTint,\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n softness = defaultPreset.params.softness,\n repetition = defaultPreset.params.repetition,\n shiftRed = defaultPreset.params.shiftRed,\n shiftBlue = defaultPreset.params.shiftBlue,\n distortion = defaultPreset.params.distortion,\n contour = defaultPreset.params.contour,\n shape = defaultPreset.params.shape,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: LiquidMetalProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorTint: getShaderColorFromString(colorTint),\n\n u_softness: softness,\n u_repetition: repetition,\n u_shiftRed: shiftRed,\n u_shiftBlue: shiftBlue,\n u_distortion: distortion,\n u_contour: contour,\n u_shape: LiquidMetalShapes[shape],\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies LiquidMetalUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={liquidMetalFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ShaderComponentProps } from '../shader-mount';
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type MeshGradientParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
3
|
export interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {
|
|
4
4
|
}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
6
|
import { memo } from "react";
|
|
7
|
-
import { ShaderMount } from "../shader-mount";
|
|
8
|
-
import { colorPropsAreEqual } from "../color-props-are-equal";
|
|
7
|
+
import { ShaderMount } from "../shader-mount.js";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
9
9
|
import {
|
|
10
10
|
defaultObjectSizing,
|
|
11
11
|
getShaderColorFromString,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/mesh-gradient.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n meshGradientFragmentShader,\n ShaderFitOptions,\n type MeshGradientParams,\n type MeshGradientUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {}\n\ntype MeshGradientPreset = ShaderPreset<MeshGradientParams>;\n\
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n meshGradientFragmentShader,\n ShaderFitOptions,\n type MeshGradientParams,\n type MeshGradientUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {}\n\ntype MeshGradientPreset = ShaderPreset<MeshGradientParams>;\n\nexport const defaultPreset: MeshGradientPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 40000,\n colors: ['#5100ff', '#00ff80', '#ffcc00', '#ea00ff'],\n distortion: 0.8,\n swirl: 0.1,\n },\n};\n\nexport const purplePreset: MeshGradientPreset = {\n name: 'Purple',\n params: {\n ...defaultObjectSizing,\n speed: 0.6,\n frame: 100,\n colors: ['#aaa7d7', '#3c2b8e', '#f4eabb', '#c99cd5'],\n distortion: 0.3,\n swirl: 0.5,\n },\n};\n\nexport const beachPreset: MeshGradientPreset = {\n name: 'Beach',\n params: {\n ...defaultObjectSizing,\n speed: 0.1,\n frame: 0,\n colors: ['#bcecf6', '#80c3e4', '#f3eccb', '#f3d987'],\n distortion: 0.8,\n swirl: 0.35,\n },\n};\n\nexport const meshGradientPresets: MeshGradientPreset[] = [defaultPreset, purplePreset, beachPreset];\n\nexport const MeshGradient: React.FC<MeshGradientProps> = memo(function MeshGradientImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n distortion = defaultPreset.params.distortion,\n swirl = defaultPreset.params.swirl,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: MeshGradientProps) {\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_distortion: distortion,\n u_swirl: swirl,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_rotation: rotation,\n u_scale: scale,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies MeshGradientUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={meshGradientFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAoFH;AA9EG,MAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF;AAEO,MAAM,eAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF;AAEO,MAAM,cAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF;AAEO,MAAM,sBAA4C,CAAC,eAAe,cAAc,WAAW;AAE3F,MAAM,eAA4C,KAAK,SAAS,iBAAiB;AAAA;AAAA,EAEtF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,aAAa,cAAc,OAAO;AAAA,EAClC,QAAQ,cAAc,OAAO;AAAA;AAAA,EAG7B,MAAM,cAAc,OAAO;AAAA,EAC3B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAsB;AACpB,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,cAAc;AAAA,IACd,SAAS;AAAA;AAAA,IAGT,OAAO,iBAAiB,GAAG;AAAA,IAC3B,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ShaderComponentProps } from '../shader-mount';
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type MetaballsParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
3
|
export interface MetaballsProps extends ShaderComponentProps, MetaballsParams {
|
|
4
4
|
}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
6
|
import { memo } from "react";
|
|
7
|
-
import { ShaderMount } from "../shader-mount";
|
|
8
|
-
import { colorPropsAreEqual } from "../color-props-are-equal";
|
|
7
|
+
import { ShaderMount } from "../shader-mount.js";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
9
9
|
import {
|
|
10
10
|
defaultObjectSizing,
|
|
11
11
|
getShaderColorFromString,
|
|
@@ -20,6 +20,7 @@ const defaultPreset = {
|
|
|
20
20
|
scale: 1,
|
|
21
21
|
speed: 1,
|
|
22
22
|
frame: 0,
|
|
23
|
+
colorBack: "#ffffff",
|
|
23
24
|
colors: ["#b399ff", "#99ffc4", "#ffe699", "#e099ff"],
|
|
24
25
|
count: 7,
|
|
25
26
|
size: 1
|
|
@@ -30,6 +31,7 @@ const Metaballs = memo(function MetaballsImpl({
|
|
|
30
31
|
// Own props
|
|
31
32
|
speed = defaultPreset.params.speed,
|
|
32
33
|
frame = defaultPreset.params.frame,
|
|
34
|
+
colorBack = defaultPreset.params.colorBack,
|
|
33
35
|
colors = defaultPreset.params.colors,
|
|
34
36
|
size = defaultPreset.params.size,
|
|
35
37
|
count = defaultPreset.params.count,
|
|
@@ -47,6 +49,7 @@ const Metaballs = memo(function MetaballsImpl({
|
|
|
47
49
|
}) {
|
|
48
50
|
const uniforms = {
|
|
49
51
|
// Own uniforms
|
|
52
|
+
u_colorBack: getShaderColorFromString(colorBack),
|
|
50
53
|
u_colors: colors.map(getShaderColorFromString),
|
|
51
54
|
u_colorsCount: colors.length,
|
|
52
55
|
u_size: size,
|
|
@@ -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';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n metaballsFragmentShader,\n ShaderFitOptions,\n type MetaballsParams,\n type MetaballsUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MetaballsProps extends ShaderComponentProps, MetaballsParams {}\n\ntype MetaballsPreset = ShaderPreset<MetaballsParams>;\n\
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n metaballsFragmentShader,\n ShaderFitOptions,\n type MetaballsParams,\n type MetaballsUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MetaballsProps extends ShaderComponentProps, MetaballsParams {}\n\ntype MetaballsPreset = ShaderPreset<MetaballsParams>;\n\nexport const defaultPreset: MetaballsPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 1,\n frame: 0,\n colorBack: '#ffffff',\n colors: ['#b399ff', '#99ffc4', '#ffe699', '#e099ff'],\n count: 7,\n size: 1,\n },\n};\n\nexport const metaballsPresets: MetaballsPreset[] = [defaultPreset];\n\nexport const Metaballs: React.FC<MetaballsProps> = memo(function MetaballsImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n size = defaultPreset.params.size,\n count = defaultPreset.params.count,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: MetaballsProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_size: size,\n u_count: count,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_rotation: rotation,\n u_scale: scale,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies MetaballsUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={metaballsFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAgEH;AA1DG,MAAM,gBAAiC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,mBAAsC,CAAC,aAAa;AAE1D,MAAM,YAAsC,KAAK,SAAS,cAAc;AAAA;AAAA,EAE7E,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA,EACjC,SAAS,cAAc,OAAO;AAAA,EAC9B,OAAO,cAAc,OAAO;AAAA,EAC5B,QAAQ,cAAc,OAAO;AAAA;AAAA,EAG7B,MAAM,cAAc,OAAO;AAAA,EAC3B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAmB;AACjB,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,QAAQ;AAAA,IACR,SAAS;AAAA;AAAA,IAGT,OAAO,iBAAiB,GAAG;AAAA,IAC3B,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,yBAAyB,UAAoB;AAErH,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ShaderComponentProps } from '../shader-mount';
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type NeuroNoiseParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
3
|
export interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams {
|
|
4
4
|
}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
6
|
import { memo } from "react";
|
|
7
|
-
import { ShaderMount } from "../shader-mount";
|
|
8
|
-
import { colorPropsAreEqual } from "../color-props-are-equal";
|
|
7
|
+
import { ShaderMount } from "../shader-mount.js";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
9
9
|
import {
|
|
10
10
|
defaultPatternSizing,
|
|
11
11
|
getShaderColorFromString,
|
|
@@ -19,31 +19,23 @@ const defaultPreset = {
|
|
|
19
19
|
...defaultPatternSizing,
|
|
20
20
|
speed: 1,
|
|
21
21
|
frame: 0,
|
|
22
|
-
colorFront: "#
|
|
22
|
+
colorFront: "#ffffff",
|
|
23
|
+
colorMid: "#bf9eff",
|
|
23
24
|
colorBack: "#000000",
|
|
24
|
-
brightness:
|
|
25
|
+
brightness: 0.3,
|
|
26
|
+
contrast: 0.6
|
|
25
27
|
}
|
|
26
28
|
};
|
|
27
|
-
const
|
|
28
|
-
name: "Marble",
|
|
29
|
-
params: {
|
|
30
|
-
...defaultPatternSizing,
|
|
31
|
-
scale: 0.4,
|
|
32
|
-
speed: 0,
|
|
33
|
-
frame: 0,
|
|
34
|
-
colorFront: "#1d2131",
|
|
35
|
-
colorBack: "#f7f7f7",
|
|
36
|
-
brightness: 1.1
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
const neuroNoisePresets = [defaultPreset, marblePreset];
|
|
29
|
+
const neuroNoisePresets = [defaultPreset];
|
|
40
30
|
const NeuroNoise = memo(function NeuroNoiseImpl({
|
|
41
31
|
// Own props
|
|
42
32
|
speed = defaultPreset.params.speed,
|
|
43
33
|
frame = defaultPreset.params.frame,
|
|
44
34
|
colorFront = defaultPreset.params.colorFront,
|
|
35
|
+
colorMid = defaultPreset.params.colorMid,
|
|
45
36
|
colorBack = defaultPreset.params.colorBack,
|
|
46
37
|
brightness = defaultPreset.params.brightness,
|
|
38
|
+
contrast = defaultPreset.params.contrast,
|
|
47
39
|
// Sizing props
|
|
48
40
|
fit = defaultPreset.params.fit,
|
|
49
41
|
scale = defaultPreset.params.scale,
|
|
@@ -59,8 +51,10 @@ const NeuroNoise = memo(function NeuroNoiseImpl({
|
|
|
59
51
|
const uniforms = {
|
|
60
52
|
// Own uniforms
|
|
61
53
|
u_colorFront: getShaderColorFromString(colorFront),
|
|
54
|
+
u_colorMid: getShaderColorFromString(colorMid),
|
|
62
55
|
u_colorBack: getShaderColorFromString(colorBack),
|
|
63
56
|
u_brightness: brightness,
|
|
57
|
+
u_contrast: contrast,
|
|
64
58
|
// Sizing uniforms
|
|
65
59
|
u_fit: ShaderFitOptions[fit],
|
|
66
60
|
u_scale: scale,
|
|
@@ -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';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\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\
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n 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: '#bf9eff',\n colorBack: '#000000',\n brightness: 0.3,\n contrast: 0.6,\n },\n};\n\nexport const neuroNoisePresets: NeuroNoisePreset[] = [defaultPreset] 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
|
+
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAiEH;AA3DG,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,oBAAwC,CAAC,aAAa;AAE5D,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
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ShaderComponentProps } from '../shader-mount';
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type PerlinNoiseParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
3
|
export interface PerlinNoiseProps extends ShaderComponentProps, PerlinNoiseParams {
|
|
4
4
|
}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
6
|
import { memo } from "react";
|
|
7
|
-
import { ShaderMount } from "../shader-mount";
|
|
8
|
-
import { colorPropsAreEqual } from "../color-props-are-equal";
|
|
7
|
+
import { ShaderMount } from "../shader-mount.js";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
9
9
|
import {
|
|
10
10
|
defaultPatternSizing,
|
|
11
11
|
getShaderColorFromString,
|
|
@@ -19,8 +19,8 @@ const defaultPreset = {
|
|
|
19
19
|
...defaultPatternSizing,
|
|
20
20
|
speed: 0.5,
|
|
21
21
|
frame: 0,
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
colorBack: "#262626",
|
|
23
|
+
colorFront: "#d9d9d9",
|
|
24
24
|
proportion: 0.35,
|
|
25
25
|
softness: 0.1,
|
|
26
26
|
octaveCount: 2,
|
|
@@ -35,8 +35,8 @@ const nintendoWaterPreset = {
|
|
|
35
35
|
scale: 1 / 0.2,
|
|
36
36
|
speed: 0.4,
|
|
37
37
|
frame: 0,
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
colorBack: "#2d69d4",
|
|
39
|
+
colorFront: "#d1eefc",
|
|
40
40
|
proportion: 0.42,
|
|
41
41
|
softness: 0,
|
|
42
42
|
octaveCount: 2,
|
|
@@ -51,8 +51,8 @@ const colonyPreset = {
|
|
|
51
51
|
scale: 1 / 0.15,
|
|
52
52
|
speed: 0,
|
|
53
53
|
frame: 0,
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
colorBack: "#f4f0ae",
|
|
55
|
+
colorFront: "#0a1a5e",
|
|
56
56
|
octaveCount: 6,
|
|
57
57
|
persistence: 1,
|
|
58
58
|
lacunarity: 2.55,
|
|
@@ -67,8 +67,8 @@ const phosphenesPreset = {
|
|
|
67
67
|
scale: 1 / 0.03,
|
|
68
68
|
speed: 0.15,
|
|
69
69
|
frame: 0,
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
colorBack: "#ec7c8b",
|
|
71
|
+
colorFront: "#66cc99",
|
|
72
72
|
proportion: 0.45,
|
|
73
73
|
softness: 0.45,
|
|
74
74
|
octaveCount: 6,
|
|
@@ -83,8 +83,8 @@ const mossPreset = {
|
|
|
83
83
|
scale: 1 / 0.15,
|
|
84
84
|
speed: 0.02,
|
|
85
85
|
frame: 0,
|
|
86
|
-
|
|
87
|
-
|
|
86
|
+
colorBack: "#05ff4a",
|
|
87
|
+
colorFront: "#262626",
|
|
88
88
|
proportion: 0.65,
|
|
89
89
|
softness: 0.35,
|
|
90
90
|
octaveCount: 6,
|
|
@@ -99,8 +99,8 @@ const wormsPreset = {
|
|
|
99
99
|
scale: 1 / 2,
|
|
100
100
|
speed: 0,
|
|
101
101
|
frame: 0,
|
|
102
|
-
|
|
103
|
-
|
|
102
|
+
colorBack: "#ffffff",
|
|
103
|
+
colorFront: "#595959",
|
|
104
104
|
proportion: 0.5,
|
|
105
105
|
softness: 0,
|
|
106
106
|
octaveCount: 1,
|
|
@@ -120,8 +120,8 @@ const PerlinNoise = memo(function PerlinNoiseImpl({
|
|
|
120
120
|
// Own props
|
|
121
121
|
speed = defaultPreset.params.speed,
|
|
122
122
|
frame = defaultPreset.params.frame,
|
|
123
|
-
|
|
124
|
-
|
|
123
|
+
colorFront = defaultPreset.params.colorFront,
|
|
124
|
+
colorBack = defaultPreset.params.colorBack,
|
|
125
125
|
proportion = defaultPreset.params.proportion,
|
|
126
126
|
softness = defaultPreset.params.softness,
|
|
127
127
|
octaveCount = defaultPreset.params.octaveCount,
|
|
@@ -141,8 +141,8 @@ const PerlinNoise = memo(function PerlinNoiseImpl({
|
|
|
141
141
|
}) {
|
|
142
142
|
const uniforms = {
|
|
143
143
|
// Own uniforms
|
|
144
|
-
|
|
145
|
-
|
|
144
|
+
u_colorBack: getShaderColorFromString(colorBack),
|
|
145
|
+
u_colorFront: getShaderColorFromString(colorFront),
|
|
146
146
|
u_proportion: proportion,
|
|
147
147
|
u_softness: softness ?? defaultPreset.params.softness,
|
|
148
148
|
u_octaveCount: octaveCount ?? defaultPreset.params.octaveCount,
|
|
@@ -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';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\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\
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n 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: '#262626',\n colorFront: '#d9d9d9',\n proportion: 0.35,\n softness: 0.1,\n octaveCount: 2,\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 colonyPreset: PerlinNoisePreset = {\n name: 'Colony',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.15,\n speed: 0,\n frame: 0,\n colorBack: '#f4f0ae',\n colorFront: '#0a1a5e',\n octaveCount: 6,\n persistence: 1,\n lacunarity: 2.55,\n proportion: 0.65,\n softness: 0.35,\n },\n};\n\nexport const phosphenesPreset: PerlinNoisePreset = {\n name: 'Phosphenes',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.03,\n speed: 0.15,\n frame: 0,\n colorBack: '#ec7c8b',\n colorFront: '#66cc99',\n proportion: 0.45,\n softness: 0.45,\n octaveCount: 6,\n persistence: 0.3,\n lacunarity: 3,\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: 1 / 2,\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[] = [\n defaultPreset,\n nintendoWaterPreset,\n colonyPreset,\n phosphenesPreset,\n mossPreset,\n wormsPreset,\n];\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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ShaderComponentProps } from '../shader-mount';
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type PulsingBorderParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
3
|
export interface PulsingBorderProps extends ShaderComponentProps, PulsingBorderParams {
|
|
4
4
|
}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
6
|
import { memo } from "react";
|
|
7
|
-
import { ShaderMount } from "../shader-mount";
|
|
8
|
-
import { colorPropsAreEqual } from "../color-props-are-equal";
|
|
7
|
+
import { ShaderMount } from "../shader-mount.js";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
9
9
|
import {
|
|
10
10
|
defaultObjectSizing,
|
|
11
11
|
getShaderColorFromString,
|
|
@@ -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';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\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\
|
|
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';\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 scale: 0.7,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#f2244f', '#4da6e6'],\n roundness: 0.5,\n thickness: 0.02,\n softness: 0.5,\n intensity: 2.4,\n spotsPerColor: 4,\n spotSize: 0.15,\n pulse: 0,\n smoke: 1,\n smokeSize: 1.3,\n },\n};\n\nexport const circlePreset: PulsingBorderPreset = {\n name: 'Circle',\n params: {\n ...defaultObjectSizing,\n worldWidth: 200,\n worldHeight: 200,\n scale: 0.5,\n speed: 1,\n frame: 0,\n colorBack: '#0f191f',\n colors: ['#ffdd33', '#ff8c00', '#ff002b'],\n roundness: 1,\n thickness: 0.03,\n softness: 0.2,\n intensity: 2,\n spotsPerColor: 4,\n spotSize: 0.15,\n pulse: 0,\n smoke: 0,\n smokeSize: 1,\n },\n};\n\nexport const innerBorderPreset: PulsingBorderPreset = {\n name: 'Inner Border',\n params: {\n ...defaultObjectSizing,\n speed: 1.0,\n frame: 0,\n colorBack: '#181821',\n colors: ['#f5ad2b', '#2294d9', '#bf00ff'],\n roundness: 0,\n thickness: 0,\n softness: 0.4,\n intensity: 0,\n spotsPerColor: 3,\n spotSize: 0.18,\n pulse: 0.04,\n smoke: 0.75,\n smokeSize: 0.92,\n },\n};\n\nexport const pulsingBorderPresets: PulsingBorderPreset[] = [defaultPreset, circlePreset, innerBorderPreset];\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 softness = defaultPreset.params.softness,\n intensity = defaultPreset.params.intensity,\n spotsPerColor = defaultPreset.params.spotsPerColor,\n spotSize = defaultPreset.params.spotSize,\n pulse = defaultPreset.params.pulse,\n smoke = defaultPreset.params.smoke,\n smokeSize = defaultPreset.params.smokeSize,\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 noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture(0) };\n const pulseTexture = typeof window !== 'undefined' && { u_pulseTexture: getShaderNoiseTexture(1) };\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_softness: softness,\n u_intensity: intensity,\n u_spotsPerColor: spotsPerColor,\n u_spotSize: spotSize,\n u_pulse: pulse,\n u_smoke: smoke,\n u_smokeSize: smokeSize,\n ...pulseTexture,\n ...noiseTexture,\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": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAoIH;AA9HG,MAAM,gBAAqC;AAAA,EAChD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,SAAS;AAAA,IAC7B,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AACF;AAEO,MAAM,eAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AACF;AAEO,MAAM,oBAAyC;AAAA,EACpD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,EACb;AACF;AAEO,MAAM,uBAA8C,CAAC,eAAe,cAAc,iBAAiB;AAEnG,MAAM,gBAA8C,KAAK,SAAS,kBAAkB;AAAA;AAAA,EAEzF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,WAAW,cAAc,OAAO;AAAA,EAChC,YAAY,cAAc,OAAO;AAAA,EACjC,gBAAgB,cAAc,OAAO;AAAA,EACrC,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA;AAAA,EAGjC,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,GAAuB;AACrB,QAAM,eAAe,OAAO,WAAW,eAAe,EAAE,gBAAgB,sBAAsB,CAAC,EAAE;AACjG,QAAM,eAAe,OAAO,WAAW,eAAe,EAAE,gBAAgB,sBAAsB,CAAC,EAAE;AACjG,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS;AAAA,IACT,aAAa;AAAA,IACb,GAAG;AAAA,IACH,GAAG;AAAA;AAAA,IAGH,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
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ShaderComponentProps } from '../shader-mount';
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type SimplexNoiseParams, type ShaderPreset } from '@paper-design/shaders';
|
|
3
3
|
export interface SimplexNoiseProps extends ShaderComponentProps, SimplexNoiseParams {
|
|
4
4
|
}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
6
|
import { memo } from "react";
|
|
7
|
-
import { ShaderMount } from "../shader-mount";
|
|
8
|
-
import { colorPropsAreEqual } from "../color-props-are-equal";
|
|
7
|
+
import { ShaderMount } from "../shader-mount.js";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
9
9
|
import {
|
|
10
10
|
getShaderColorFromString,
|
|
11
11
|
simplexNoiseFragmentShader,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/simplex-noise.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n getShaderColorFromString,\n simplexNoiseFragmentShader,\n ShaderFitOptions,\n type SimplexNoiseUniforms,\n type SimplexNoiseParams,\n type ShaderPreset,\n defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface SimplexNoiseProps extends ShaderComponentProps, SimplexNoiseParams {}\n\ntype SimplexNoisePreset = ShaderPreset<SimplexNoiseParams>;\n\
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n getShaderColorFromString,\n simplexNoiseFragmentShader,\n ShaderFitOptions,\n type SimplexNoiseUniforms,\n type SimplexNoiseParams,\n type ShaderPreset,\n defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface SimplexNoiseProps extends ShaderComponentProps, SimplexNoiseParams {}\n\ntype SimplexNoisePreset = ShaderPreset<SimplexNoiseParams>;\n\nexport const defaultPreset: SimplexNoisePreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colors: ['#40a0bf', '#bf4040', '#ffcc00'],\n stepsPerColor: 3,\n softness: 0,\n },\n};\n\nexport const simplexNoisePresets: SimplexNoisePreset[] = [defaultPreset];\n\nexport const SimplexNoise: React.FC<SimplexNoiseProps> = memo(function SimplexNoiseImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n stepsPerColor = defaultPreset.params.stepsPerColor,\n softness = defaultPreset.params.softness,\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}: SimplexNoiseProps) {\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_stepsPerColor: stepsPerColor,\n u_softness: softness,\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 SimplexNoiseUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={simplexNoiseFragmentShader}\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,OACK;AA4DH;AAtDG,MAAM,gBAAoC;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,eAAe;AAAA,IACf,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,sBAA4C,CAAC,aAAa;AAEhE,MAAM,eAA4C,KAAK,SAAS,iBAAiB;AAAA;AAAA,EAEtF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,gBAAgB,cAAc,OAAO;AAAA,EACrC,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,GAAsB;AACpB,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,iBAAiB;AAAA,IACjB,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;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
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ShaderComponentProps } from '../shader-mount';
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type ShaderPreset, type SmokeRingParams } from '@paper-design/shaders';
|
|
3
3
|
export interface SmokeRingProps extends ShaderComponentProps, SmokeRingParams {
|
|
4
4
|
}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
6
|
import { memo } from "react";
|
|
7
|
-
import { ShaderMount } from "../shader-mount";
|
|
8
|
-
import { colorPropsAreEqual } from "../color-props-are-equal";
|
|
7
|
+
import { ShaderMount } from "../shader-mount.js";
|
|
8
|
+
import { colorPropsAreEqual } from "../color-props-are-equal.js";
|
|
9
9
|
import {
|
|
10
10
|
defaultObjectSizing,
|
|
11
11
|
getShaderColorFromString,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/smoke-ring.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n smokeRingFragmentShader,\n ShaderFitOptions,\n type ShaderPreset,\n type SmokeRingParams,\n type SmokeRingUniforms,\n} from '@paper-design/shaders';\n\nexport interface SmokeRingProps extends ShaderComponentProps, SmokeRingParams {}\n\ntype SmokeRingPreset = ShaderPreset<SmokeRingParams>;\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 smokeRingFragmentShader,\n ShaderFitOptions,\n type ShaderPreset,\n type SmokeRingParams,\n type SmokeRingUniforms,\n} from '@paper-design/shaders';\n\nexport interface SmokeRingProps extends ShaderComponentProps, SmokeRingParams {}\n\ntype SmokeRingPreset = ShaderPreset<SmokeRingParams>;\n\nexport const defaultPreset: SmokeRingPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 0.4,\n frame: 0,\n colorBack: '#ffffff',\n colors: ['#136c5e', '#0f0224'],\n noiseScale: 5,\n noiseIterations: 10,\n radius: 0.5,\n thickness: 0.25,\n innerShape: 1.2,\n },\n};\n\nexport const poisonPreset: SmokeRingPreset = {\n name: 'Poison',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#d4ff00', '#0c7f08'],\n noiseScale: 2.2,\n noiseIterations: 10,\n radius: 0.4,\n thickness: 0.2,\n innerShape: 0.6,\n },\n};\n\nexport const linePreset: SmokeRingPreset = {\n name: 'Line',\n params: {\n ...defaultObjectSizing,\n frame: 0,\n colorBack: '#000000',\n colors: ['#1fe8ff', '#4540a4'],\n noiseScale: 1.1,\n noiseIterations: 2,\n radius: 0.38,\n thickness: 0.01,\n innerShape: 0.88,\n speed: 4,\n },\n};\n\nexport const cloudPreset: SmokeRingPreset = {\n name: 'Cloud',\n params: {\n ...defaultObjectSizing,\n frame: 0,\n colorBack: '#3b9bff',\n colors: ['#ffffff'],\n noiseScale: 1.5,\n noiseIterations: 10,\n radius: 0.5,\n thickness: 0.65,\n innerShape: 0.9,\n speed: 0.5,\n },\n};\n\nexport const smokeRingPresets: SmokeRingPreset[] = [defaultPreset, linePreset, poisonPreset, cloudPreset];\n\nexport const SmokeRing: React.FC<SmokeRingProps> = memo(function SmokeRingImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n noiseScale = defaultPreset.params.noiseScale,\n thickness = defaultPreset.params.thickness,\n radius = defaultPreset.params.radius,\n innerShape = defaultPreset.params.innerShape,\n noiseIterations = defaultPreset.params.noiseIterations,\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}: SmokeRingProps) {\n const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\n\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_noiseScale: noiseScale,\n u_thickness: thickness,\n u_radius: radius,\n u_innerShape: innerShape,\n u_noiseIterations: noiseIterations,\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 SmokeRingUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={smokeRingFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AA2HH;AArHG,MAAM,gBAAiC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,SAAS;AAAA,IAC7B,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF;AAEO,MAAM,eAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,SAAS;AAAA,IAC7B,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF;AAEO,MAAM,aAA8B;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,SAAS;AAAA,IAC7B,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF;AAEO,MAAM,cAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,SAAS;AAAA,IAClB,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF;AAEO,MAAM,mBAAsC,CAAC,eAAe,YAAY,cAAc,WAAW;AAEjG,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,aAAa,cAAc,OAAO;AAAA,EAClC,YAAY,cAAc,OAAO;AAAA,EACjC,SAAS,cAAc,OAAO;AAAA,EAC9B,aAAa,cAAc,OAAO;AAAA,EAClC,kBAAkB,cAAc,OAAO;AAAA;AAAA,EAGvC,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,GAAmB;AACjB,QAAM,eAAe,OAAO,WAAW,eAAe,EAAE,gBAAgB,sBAAsB,EAAE;AAEhG,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,cAAc;AAAA,IACd,aAAa;AAAA,IACb,UAAU;AAAA,IACV,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,GAAG;AAAA;AAAA,IAGH,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,yBAAyB,UAAoB;AAErH,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/shaders/spiral.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ShaderComponentProps } from '../shader-mount';
|
|
1
|
+
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
2
2
|
import { type ShaderPreset, type SpiralParams } from '@paper-design/shaders';
|
|
3
3
|
export interface SpiralProps extends ShaderComponentProps, SpiralParams {
|
|
4
4
|
}
|