@paper-design/shaders-react 0.0.40 → 0.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js.map +1 -1
- package/dist/shader-mount.d.ts +5 -6
- package/dist/shader-mount.js +2 -1
- package/dist/shader-mount.js.map +2 -2
- package/dist/shaders/dithering.js +2 -2
- package/dist/shaders/dithering.js.map +1 -1
- package/dist/shaders/dot-orbit.js +2 -2
- package/dist/shaders/dot-orbit.js.map +2 -2
- package/dist/shaders/god-rays.js +8 -8
- package/dist/shaders/god-rays.js.map +1 -1
- package/dist/shaders/grain-gradient.d.ts +0 -1
- package/dist/shaders/grain-gradient.js +3 -16
- package/dist/shaders/grain-gradient.js.map +2 -2
- package/dist/shaders/metaballs.js +3 -3
- package/dist/shaders/metaballs.js.map +2 -2
- package/dist/shaders/pulsing-border.js +9 -9
- package/dist/shaders/pulsing-border.js.map +1 -1
- package/dist/shaders/smoke-ring.js +6 -6
- package/dist/shaders/smoke-ring.js.map +2 -2
- package/dist/shaders/spiral.js +1 -1
- package/dist/shaders/spiral.js.map +1 -1
- package/dist/shaders/swirl.js +2 -2
- package/dist/shaders/swirl.js.map +2 -2
- package/dist/shaders/voronoi.d.ts +1 -1
- package/dist/shaders/voronoi.js +11 -10
- package/dist/shaders/voronoi.js.map +2 -2
- package/dist/shaders/warp.js +6 -6
- package/dist/shaders/warp.js.map +1 -1
- package/dist/shaders/waves.d.ts +0 -2
- package/dist/shaders/waves.js +18 -60
- package/dist/shaders/waves.js.map +2 -2
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { ShaderMount } from './shader-mount.js';
|
|
2
|
-
export type { ShaderMountProps, ShaderComponentProps
|
|
2
|
+
export type { ShaderMountProps, ShaderComponentProps } from './shader-mount.js';
|
|
3
3
|
export { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient.js';
|
|
4
4
|
export type { MeshGradientProps } from './shaders/mesh-gradient.js';
|
|
5
5
|
export type { MeshGradientUniforms, MeshGradientParams } from '@paper-design/shaders';
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export { ShaderMount } from './shader-mount.js';\nexport type { ShaderMountProps, ShaderComponentProps
|
|
4
|
+
"sourcesContent": ["export { ShaderMount } from './shader-mount.js';\nexport type { ShaderMountProps, ShaderComponentProps } from './shader-mount.js';\n\nexport { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient.js';\nexport type { MeshGradientProps } from './shaders/mesh-gradient.js';\nexport type { MeshGradientUniforms, MeshGradientParams } from '@paper-design/shaders';\n\nexport { SmokeRing, smokeRingPresets } from './shaders/smoke-ring.js';\nexport type { SmokeRingProps } from './shaders/smoke-ring.js';\nexport type { SmokeRingUniforms, SmokeRingParams } from '@paper-design/shaders';\n\nexport { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise.js';\nexport type { NeuroNoiseProps } from './shaders/neuro-noise.js';\nexport type { NeuroNoiseUniforms, NeuroNoiseParams } from '@paper-design/shaders';\n\nexport { DotOrbit, dotOrbitPresets } from './shaders/dot-orbit.js';\nexport type { DotOrbitProps } from './shaders/dot-orbit.js';\nexport type { DotOrbitUniforms, DotOrbitParams } from '@paper-design/shaders';\n\nexport { DotGrid, dotGridPresets } from './shaders/dot-grid.js';\nexport type { DotGridProps } from './shaders/dot-grid.js';\nexport type { DotGridUniforms, DotGridParams } from '@paper-design/shaders';\n\nexport { SimplexNoise, simplexNoisePresets } from './shaders/simplex-noise.js';\nexport type { SimplexNoiseProps } from './shaders/simplex-noise.js';\nexport type { SimplexNoiseUniforms, SimplexNoiseParams } from '@paper-design/shaders';\n\nexport { Metaballs, metaballsPresets } from './shaders/metaballs.js';\nexport type { MetaballsProps } from './shaders/metaballs.js';\nexport type { MetaballsUniforms, MetaballsParams } from '@paper-design/shaders';\n\nexport { Waves, wavesPresets } from './shaders/waves.js';\nexport type { WavesProps } from './shaders/waves.js';\nexport type { WavesUniforms, WavesParams } from '@paper-design/shaders';\n\nexport { PerlinNoise, perlinNoisePresets } from './shaders/perlin-noise.js';\nexport type { PerlinNoiseProps } from './shaders/perlin-noise.js';\nexport type { PerlinNoiseUniforms, PerlinNoiseParams } from '@paper-design/shaders';\n\nexport { Voronoi, voronoiPresets } from './shaders/voronoi.js';\nexport type { VoronoiProps } from './shaders/voronoi.js';\nexport type { VoronoiUniforms, VoronoiParams } from '@paper-design/shaders';\n\nexport { Warp, warpPresets } from './shaders/warp.js';\nexport type { WarpProps } from './shaders/warp.js';\nexport type { WarpUniforms, WarpParams, WarpPattern } from '@paper-design/shaders';\n\nexport { GodRays, godRaysPresets } from './shaders/god-rays.js';\nexport type { GodRaysProps } from './shaders/god-rays.js';\nexport type { GodRaysUniforms, GodRaysParams } from '@paper-design/shaders';\n\nexport { Spiral, spiralPresets } from './shaders/spiral.js';\nexport type { SpiralProps } from './shaders/spiral.js';\nexport type { SpiralUniforms, SpiralParams } from '@paper-design/shaders';\n\nexport { Swirl, swirlPresets } from './shaders/swirl.js';\nexport type { SwirlProps } from './shaders/swirl.js';\nexport type { SwirlUniforms, SwirlParams } from '@paper-design/shaders';\n\nexport { Dithering, ditheringPresets } from './shaders/dithering.js';\nexport type { DitheringProps } from './shaders/dithering.js';\nexport type { DitheringUniforms, DitheringParams } from '@paper-design/shaders';\n\nexport { GrainGradient, grainGradientPresets } from './shaders/grain-gradient.js';\nexport type { GrainGradientProps } from './shaders/grain-gradient.js';\nexport type { GrainGradientUniforms, GrainGradientParams } from '@paper-design/shaders';\n\nexport { LiquidMetal, liquidMetalPresets } from './shaders/liquid-metal.js';\nexport type { LiquidMetalProps } from './shaders/liquid-metal.js';\nexport type { LiquidMetalUniforms, LiquidMetalParams } from '@paper-design/shaders';\n\nexport { PulsingBorder, pulsingBorderPresets } from './shaders/pulsing-border.js';\nexport type { PulsingBorderProps } from './shaders/pulsing-border.js';\nexport type { PulsingBorderUniforms, PulsingBorderParams } from '@paper-design/shaders';\n\nexport { ColorPanels, colorPanelsPresets } from './shaders/color-panels.js';\nexport type { ColorPanelsProps } from './shaders/color-panels.js';\nexport type { ColorPanelsUniforms, ColorPanelsParams } from '@paper-design/shaders';\n\nexport { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';\nexport type { ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';\n\nexport {\n colorPanelsMeta,\n dotOrbitMeta,\n godRaysMeta,\n grainGradientMeta,\n meshGradientMeta,\n metaballsMeta,\n pulsingBorderMeta,\n simplexNoiseMeta,\n smokeRingMeta,\n swirlMeta,\n voronoiMeta,\n warpMeta,\n} from '@paper-design/shaders';\n"],
|
|
5
5
|
"mappings": ";;;;;AAAA,SAAS,mBAAmB;AAG5B,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,YAAY,yBAAyB;AAI9C,SAAS,UAAU,uBAAuB;AAI1C,SAAS,SAAS,sBAAsB;AAIxC,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,OAAO,oBAAoB;AAIpC,SAAS,aAAa,0BAA0B;AAIhD,SAAS,SAAS,sBAAsB;AAIxC,SAAS,MAAM,mBAAmB;AAIlC,SAAS,SAAS,sBAAsB;AAIxC,SAAS,QAAQ,qBAAqB;AAItC,SAAS,OAAO,oBAAoB;AAIpC,SAAS,WAAW,wBAAwB;AAI5C,SAAS,eAAe,4BAA4B;AAIpD,SAAS,aAAa,0BAA0B;AAIhD,SAAS,eAAe,4BAA4B;AAIpD,SAAS,aAAa,0BAA0B;AAIhD,SAAS,sBAAsB,gCAAgC;AAG/D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/shader-mount.d.ts
CHANGED
|
@@ -1,19 +1,18 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export interface ShaderMountRef extends HTMLDivElement {
|
|
3
|
-
paperShaderMount?: ShaderMountVanilla;
|
|
4
|
-
}
|
|
1
|
+
import { type PaperShaderElement, type ShaderMotionParams } from '@paper-design/shaders';
|
|
5
2
|
/** React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images */
|
|
6
3
|
interface ShaderMountUniformsReact {
|
|
7
4
|
[key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement;
|
|
8
5
|
}
|
|
9
|
-
export interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color'>, ShaderMotionParams {
|
|
6
|
+
export interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {
|
|
7
|
+
ref?: React.RefObject<PaperShaderElement>;
|
|
10
8
|
fragmentShader: string;
|
|
11
9
|
uniforms: ShaderMountUniformsReact;
|
|
12
10
|
minPixelRatio?: number;
|
|
13
11
|
maxPixelCount?: number;
|
|
14
12
|
webGlContextAttributes?: WebGLContextAttributes;
|
|
15
13
|
}
|
|
16
|
-
export interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color'> {
|
|
14
|
+
export interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'> {
|
|
15
|
+
ref?: React.RefObject<PaperShaderElement>;
|
|
17
16
|
minPixelRatio?: number;
|
|
18
17
|
maxPixelCount?: number;
|
|
19
18
|
webGlContextAttributes?: WebGLContextAttributes;
|
package/dist/shader-mount.js
CHANGED
|
@@ -116,7 +116,8 @@ const ShaderMount = forwardRef(
|
|
|
116
116
|
useEffect(() => {
|
|
117
117
|
shaderMountRef.current?.setFrame(frame);
|
|
118
118
|
}, [frame, isInitialized]);
|
|
119
|
-
|
|
119
|
+
const mergedRef = useMergeRefs([divRef, forwardedRef]);
|
|
120
|
+
return /* @__PURE__ */ jsx("div", { ref: mergedRef, ...divProps });
|
|
120
121
|
}
|
|
121
122
|
);
|
|
122
123
|
ShaderMount.displayName = "ShaderMount";
|
package/dist/shader-mount.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/shader-mount.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState } from 'react';\nimport {\n ShaderMount as ShaderMountVanilla,\n type ShaderMotionParams,\n type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\n\
|
|
5
|
-
"mappings": ";;;;;;AAEA,SAAS,WAAW,QAAQ,YAAY,gBAAgB;AACxD;AAAA,EACE,eAAe;AAAA,
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState } from 'react';\nimport {\n ShaderMount as ShaderMountVanilla,\n type PaperShaderElement,\n type ShaderMotionParams,\n type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\n\n/** React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images */\ninterface ShaderMountUniformsReact {\n [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement;\n}\n\nexport interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {\n ref?: React.RefObject<PaperShaderElement>;\n fragmentShader: string;\n uniforms: ShaderMountUniformsReact;\n minPixelRatio?: number;\n maxPixelCount?: number;\n webGlContextAttributes?: WebGLContextAttributes;\n}\n\nexport interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'> {\n ref?: React.RefObject<PaperShaderElement>;\n minPixelRatio?: number;\n maxPixelCount?: number;\n webGlContextAttributes?: WebGLContextAttributes;\n}\n\n/** Parse the provided uniforms, turning URL strings into loaded images */\nasync function processUniforms(uniformsProp: ShaderMountUniformsReact): Promise<ShaderMountUniforms> {\n const processedUniforms = {} as ShaderMountUniforms;\n const imageLoadPromises: Promise<void>[] = [];\n\n const isValidUrl = (url: string): boolean => {\n try {\n // Handle absolute paths\n if (url.startsWith('/')) return true;\n // Check if it's a valid URL\n new URL(url);\n return true;\n } catch {\n return false;\n }\n };\n\n const isExternalUrl = (url: string): boolean => {\n try {\n if (url.startsWith('/')) return false;\n const urlObject = new URL(url, window.location.origin);\n return urlObject.origin !== window.location.origin;\n } catch {\n return false;\n }\n };\n\n Object.entries(uniformsProp).forEach(([key, value]) => {\n if (typeof value === 'string') {\n // Make sure the provided string is a valid URL or just skip trying to set this uniform entirely\n if (!isValidUrl(value)) {\n console.warn(`Uniform \"${key}\" has invalid URL \"${value}\". Skipping image loading.`);\n return;\n }\n\n const imagePromise = new Promise<void>((resolve, reject) => {\n const img = new Image();\n if (isExternalUrl(value)) {\n img.crossOrigin = 'anonymous';\n }\n img.onload = () => {\n processedUniforms[key] = img;\n resolve();\n };\n img.onerror = () => {\n console.error(`Could not set uniforms. Failed to load image at ${value}`);\n reject();\n };\n img.src = value;\n });\n imageLoadPromises.push(imagePromise);\n } else {\n processedUniforms[key] = value;\n }\n });\n\n await Promise.all(imageLoadPromises);\n return processedUniforms;\n}\n\n/**\n * A React component that mounts a shader and updates its uniforms as the component's props change\n * If you pass a string as a uniform value, it will be assumed to be a URL and attempted to be loaded as an image\n */\nexport const ShaderMount: React.FC<ShaderMountProps> = forwardRef<PaperShaderElement, ShaderMountProps>(\n function ShaderMountImpl(\n {\n fragmentShader,\n uniforms: uniformsProp,\n webGlContextAttributes,\n speed = 0,\n frame = 0,\n minPixelRatio,\n maxPixelCount,\n ...divProps\n },\n forwardedRef\n ) {\n const [isInitialized, setIsInitialized] = useState(false);\n const divRef = useRef<PaperShaderElement>(null);\n const shaderMountRef: React.RefObject<ShaderMountVanilla | null> = useRef<ShaderMountVanilla>(null);\n\n // Initialize the ShaderMountVanilla\n useEffect(() => {\n const initShader = async () => {\n const uniforms = await processUniforms(uniformsProp);\n\n if (divRef.current && !shaderMountRef.current) {\n shaderMountRef.current = new ShaderMountVanilla(\n divRef.current,\n fragmentShader,\n uniforms,\n webGlContextAttributes,\n speed,\n frame,\n minPixelRatio,\n maxPixelCount\n );\n\n setIsInitialized(true);\n }\n };\n\n initShader();\n\n return () => {\n shaderMountRef.current?.dispose();\n shaderMountRef.current = null;\n };\n }, [fragmentShader, webGlContextAttributes]);\n\n // Uniforms\n useEffect(() => {\n const updateUniforms = async () => {\n const uniforms = await processUniforms(uniformsProp);\n shaderMountRef.current?.setUniforms(uniforms);\n };\n\n updateUniforms();\n }, [uniformsProp, isInitialized]);\n\n // Speed\n useEffect(() => {\n shaderMountRef.current?.setSpeed(speed);\n }, [speed, isInitialized]);\n\n // Max Pixel Count\n useEffect(() => {\n shaderMountRef.current?.setMaxPixelCount(maxPixelCount);\n }, [maxPixelCount, isInitialized]);\n\n // Min Pixel Ratio\n useEffect(() => {\n shaderMountRef.current?.setMinPixelRatio(minPixelRatio);\n }, [minPixelRatio, isInitialized]);\n\n // Frame\n useEffect(() => {\n shaderMountRef.current?.setFrame(frame);\n }, [frame, isInitialized]);\n\n const mergedRef = useMergeRefs([divRef, forwardedRef]) as unknown as React.RefObject<HTMLDivElement>;\n return <div ref={mergedRef} {...divProps} />;\n }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -87,7 +87,7 @@ const swirlPreset = {
|
|
|
87
87
|
speed: 1,
|
|
88
88
|
frame: 0,
|
|
89
89
|
colorBack: "#000000",
|
|
90
|
-
colorFront: "#
|
|
90
|
+
colorFront: "#89a7b8",
|
|
91
91
|
shape: "swirl",
|
|
92
92
|
type: "8x8",
|
|
93
93
|
pxSize: 2
|
|
@@ -100,7 +100,7 @@ const spherePreset = {
|
|
|
100
100
|
speed: 1,
|
|
101
101
|
frame: 0,
|
|
102
102
|
colorBack: "#301c2a",
|
|
103
|
-
colorFront: "#
|
|
103
|
+
colorFront: "#56ae6c",
|
|
104
104
|
shape: "sphere",
|
|
105
105
|
type: "4x4",
|
|
106
106
|
pxSize: 2.5
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/dithering.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n ditheringFragmentShader,\n ShaderFitOptions,\n type DitheringUniforms,\n type DitheringParams,\n type ShaderPreset,\n defaultPatternSizing,\n defaultObjectSizing,\n DitheringTypes,\n} from '@paper-design/shaders';\nimport { DitheringShapes } from '@paper-design/shaders';\n\nexport interface DitheringProps extends ShaderComponentProps, DitheringParams {}\n\ntype DitheringPreset = ShaderPreset<DitheringParams>;\n\nexport const defaultPreset: DitheringPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#252531',\n colorFront: '#b59f82',\n shape: 'simplex',\n type: '4x4',\n pxSize: 2,\n },\n};\n\nexport const warpPreset: DitheringPreset = {\n name: 'Warp',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#2f6e83',\n colorFront: '#dceae8',\n shape: 'warp',\n type: '4x4',\n pxSize: 2,\n },\n} as const;\n\nexport const sinePreset: DitheringPreset = {\n name: 'Sine Wave',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#730d54',\n colorFront: '#00becc',\n shape: 'wave',\n type: '4x4',\n pxSize: 11,\n },\n} as const;\n\nexport const bugsPreset: DitheringPreset = {\n name: 'Bugs',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colorFront: '#008000',\n shape: 'dots',\n type: 'random',\n pxSize: 9,\n },\n} as const;\n\nexport const ripplePreset: DitheringPreset = {\n name: 'Ripple',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#603520',\n colorFront: '#c67953',\n shape: 'ripple',\n type: '2x2',\n pxSize: 3,\n },\n} as const;\n\nexport const swirlPreset: DitheringPreset = {\n name: 'Swirl',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colorFront: '#
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n ditheringFragmentShader,\n ShaderFitOptions,\n type DitheringUniforms,\n type DitheringParams,\n type ShaderPreset,\n defaultPatternSizing,\n defaultObjectSizing,\n DitheringTypes,\n} from '@paper-design/shaders';\nimport { DitheringShapes } from '@paper-design/shaders';\n\nexport interface DitheringProps extends ShaderComponentProps, DitheringParams {}\n\ntype DitheringPreset = ShaderPreset<DitheringParams>;\n\nexport const defaultPreset: DitheringPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#252531',\n colorFront: '#b59f82',\n shape: 'simplex',\n type: '4x4',\n pxSize: 2,\n },\n};\n\nexport const warpPreset: DitheringPreset = {\n name: 'Warp',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#2f6e83',\n colorFront: '#dceae8',\n shape: 'warp',\n type: '4x4',\n pxSize: 2,\n },\n} as const;\n\nexport const sinePreset: DitheringPreset = {\n name: 'Sine Wave',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#730d54',\n colorFront: '#00becc',\n shape: 'wave',\n type: '4x4',\n pxSize: 11,\n },\n} as const;\n\nexport const bugsPreset: DitheringPreset = {\n name: 'Bugs',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colorFront: '#008000',\n shape: 'dots',\n type: 'random',\n pxSize: 9,\n },\n} as const;\n\nexport const ripplePreset: DitheringPreset = {\n name: 'Ripple',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#603520',\n colorFront: '#c67953',\n shape: 'ripple',\n type: '2x2',\n pxSize: 3,\n },\n} as const;\n\nexport const swirlPreset: DitheringPreset = {\n name: 'Swirl',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colorFront: '#89a7b8',\n shape: 'swirl',\n type: '8x8',\n pxSize: 2,\n },\n} as const;\n\nexport const spherePreset: DitheringPreset = {\n name: 'Sphere',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#301c2a',\n colorFront: '#56ae6c',\n shape: 'sphere',\n type: '4x4',\n pxSize: 2.5,\n },\n} as const;\n\nexport const ditheringPresets: DitheringPreset[] = [\n defaultPreset,\n spherePreset,\n sinePreset,\n warpPreset,\n ripplePreset,\n bugsPreset,\n swirlPreset,\n];\n\nexport const Dithering: React.FC<DitheringProps> = memo(function DitheringImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colorFront = defaultPreset.params.colorFront,\n shape = defaultPreset.params.shape,\n type = defaultPreset.params.type,\n pxSize = defaultPreset.params.pxSize,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorFront: getShaderColorFromString(colorFront),\n u_shape: DitheringShapes[shape],\n u_type: DitheringTypes[type],\n u_pxSize: pxSize,\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 DitheringUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={ditheringFragmentShader} uniforms={uniforms} />\n );\n});\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -19,8 +19,8 @@ const defaultPreset = {
|
|
|
19
19
|
...defaultPatternSizing,
|
|
20
20
|
speed: 2,
|
|
21
21
|
frame: 0,
|
|
22
|
-
colorBack: "#
|
|
23
|
-
colors: ["#
|
|
22
|
+
colorBack: "#000000",
|
|
23
|
+
colors: ["#D2822D", "#0C3D80", "#B41A57", "#37A166"],
|
|
24
24
|
size: 0.9,
|
|
25
25
|
sizeRange: 0,
|
|
26
26
|
spreading: 1,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/dot-orbit.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n getShaderColorFromString,\n dotOrbitFragmentShader,\n ShaderFitOptions,\n type DotOrbitParams,\n type DotOrbitUniforms,\n type ShaderPreset,\n defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {}\n\ntype DotOrbitPreset = ShaderPreset<DotOrbitParams>;\n\nexport const defaultPreset: DotOrbitPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 2,\n frame: 0,\n colorBack: '#
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;AAqEH;AA/DG,MAAM,gBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,SAAS;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 getShaderColorFromString,\n dotOrbitFragmentShader,\n ShaderFitOptions,\n type DotOrbitParams,\n type DotOrbitUniforms,\n type ShaderPreset,\n defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {}\n\ntype DotOrbitPreset = ShaderPreset<DotOrbitParams>;\n\nexport const defaultPreset: DotOrbitPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 2,\n frame: 0,\n colorBack: '#000000',\n colors: ['#D2822D', '#0C3D80', '#B41A57', '#37A166'],\n size: 0.9,\n sizeRange: 0,\n spreading: 1,\n stepsPerColor: 2,\n },\n};\n\nexport const dotOrbitPresets: DotOrbitPreset[] = [defaultPreset];\n\nexport const DotOrbit: React.FC<DotOrbitProps> = memo(function DotOrbitImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n size = defaultPreset.params.size,\n sizeRange = defaultPreset.params.sizeRange,\n spreading = defaultPreset.params.spreading,\n stepsPerColor = defaultPreset.params.stepsPerColor,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: DotOrbitProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_size: size,\n u_sizeRange: sizeRange,\n u_spreading: spreading,\n u_stepsPerColor: stepsPerColor,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies DotOrbitUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={dotOrbitFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;AAqEH;AA/DG,MAAM,gBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,eAAe;AAAA,EACjB;AACF;AAEO,MAAM,kBAAoC,CAAC,aAAa;AAExD,MAAM,WAAoC,KAAK,SAAS,aAAa;AAAA;AAAA,EAE1E,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,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,gBAAgB,cAAc,OAAO;AAAA;AAAA,EAGrC,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,GAAkB;AAChB,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa;AAAA,IACb,iBAAiB;AAAA;AAAA,IAGjB,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,wBAAwB,UAAoB;AAEpH,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/shaders/god-rays.js
CHANGED
|
@@ -22,10 +22,10 @@ const defaultPreset = {
|
|
|
22
22
|
colorBack: "#002238",
|
|
23
23
|
colorBloom: "#555522",
|
|
24
24
|
colors: ["#ffcd66", "#ffb899", "#a8fffb"],
|
|
25
|
-
density:
|
|
25
|
+
density: 0.55,
|
|
26
26
|
spotty: 0.28,
|
|
27
27
|
midIntensity: 1,
|
|
28
|
-
midSize:
|
|
28
|
+
midSize: 0.4,
|
|
29
29
|
intensity: 0.3,
|
|
30
30
|
bloom: 0,
|
|
31
31
|
speed: 1,
|
|
@@ -40,10 +40,10 @@ const auroraPreset = {
|
|
|
40
40
|
colorBack: "#404040",
|
|
41
41
|
colorBloom: "#ff8888",
|
|
42
42
|
colors: ["#666eff", "#66ff99", "#66d9ff"],
|
|
43
|
-
density:
|
|
43
|
+
density: 0.5,
|
|
44
44
|
spotty: 0.9,
|
|
45
45
|
midIntensity: 0.8,
|
|
46
|
-
midSize: 2
|
|
46
|
+
midSize: 0.2,
|
|
47
47
|
intensity: 0.5,
|
|
48
48
|
bloom: 1,
|
|
49
49
|
speed: 0.5,
|
|
@@ -57,7 +57,7 @@ const warpPreset = {
|
|
|
57
57
|
colorBack: "#000000",
|
|
58
58
|
colorBloom: "#222288",
|
|
59
59
|
colors: ["#ff00c4", "#ff8c00", "#ffffff"],
|
|
60
|
-
density:
|
|
60
|
+
density: 0.45,
|
|
61
61
|
spotty: 0.15,
|
|
62
62
|
midIntensity: 0,
|
|
63
63
|
midSize: 0,
|
|
@@ -76,9 +76,9 @@ const linearPreset = {
|
|
|
76
76
|
colorBack: "#000000",
|
|
77
77
|
colorBloom: "#eeeeee",
|
|
78
78
|
colors: ["#ffffff1f", "#ffffff3d", "#ffffff29"],
|
|
79
|
-
density:
|
|
79
|
+
density: 0.41,
|
|
80
80
|
spotty: 0.25,
|
|
81
|
-
midSize:
|
|
81
|
+
midSize: 0.1,
|
|
82
82
|
midIntensity: 0.75,
|
|
83
83
|
intensity: 0.79,
|
|
84
84
|
bloom: 1,
|
|
@@ -96,7 +96,7 @@ const etherPreset = {
|
|
|
96
96
|
colors: ["#148effa6", "#c4dffebe", "#232a47"],
|
|
97
97
|
density: 0.3,
|
|
98
98
|
spotty: 0.77,
|
|
99
|
-
midSize:
|
|
99
|
+
midSize: 0.1,
|
|
100
100
|
midIntensity: 0.5,
|
|
101
101
|
intensity: 0.6,
|
|
102
102
|
bloom: 0.6,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/god-rays.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n godRaysFragmentShader,\n ShaderFitOptions,\n type GodRaysParams,\n type GodRaysUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface GodRaysProps extends ShaderComponentProps, GodRaysParams {}\n\ntype GodRaysPreset = ShaderPreset<GodRaysParams>;\n\nexport const defaultPreset: GodRaysPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n offsetX: -0.4,\n offsetY: -0.4,\n colorBack: '#002238',\n colorBloom: '#555522',\n colors: ['#ffcd66', '#ffb899', '#a8fffb'],\n density:
|
|
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 godRaysFragmentShader,\n ShaderFitOptions,\n type GodRaysParams,\n type GodRaysUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface GodRaysProps extends ShaderComponentProps, GodRaysParams {}\n\ntype GodRaysPreset = ShaderPreset<GodRaysParams>;\n\nexport const defaultPreset: GodRaysPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n offsetX: -0.4,\n offsetY: -0.4,\n colorBack: '#002238',\n colorBloom: '#555522',\n colors: ['#ffcd66', '#ffb899', '#a8fffb'],\n density: 0.55,\n spotty: 0.28,\n midIntensity: 1,\n midSize: 0.4,\n intensity: 0.3,\n bloom: 0,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const auroraPreset: GodRaysPreset = {\n name: 'Aurora',\n params: {\n ...defaultObjectSizing,\n offsetY: 1,\n colorBack: '#404040',\n colorBloom: '#ff8888',\n colors: ['#666eff', '#66ff99', '#66d9ff'],\n density: 0.5,\n spotty: 0.9,\n midIntensity: 0.8,\n midSize: 0.2,\n intensity: 0.5,\n bloom: 1,\n speed: 0.5,\n frame: 0,\n },\n};\n\nexport const warpPreset: GodRaysPreset = {\n name: 'Warp',\n params: {\n ...defaultObjectSizing,\n colorBack: '#000000',\n colorBloom: '#222288',\n colors: ['#ff00c4', '#ff8c00', '#ffffff'],\n density: 0.45,\n spotty: 0.15,\n midIntensity: 0,\n midSize: 0,\n intensity: 0.79,\n bloom: 0.4,\n speed: 2,\n frame: 0,\n },\n};\n\nexport const linearPreset: GodRaysPreset = {\n name: 'Linear',\n params: {\n ...defaultObjectSizing,\n offsetX: 0.2,\n offsetY: -0.7,\n colorBack: '#000000',\n colorBloom: '#eeeeee',\n colors: ['#ffffff1f', '#ffffff3d', '#ffffff29'],\n density: 0.41,\n spotty: 0.25,\n midSize: 0.1,\n midIntensity: 0.75,\n intensity: 0.79,\n bloom: 1,\n speed: 0.5,\n frame: 0,\n },\n};\n\nexport const etherPreset: GodRaysPreset = {\n name: 'Ether',\n params: {\n ...defaultObjectSizing,\n offsetX: -0.6,\n colorBack: '#090f1d',\n colorBloom: '#ffffff',\n colors: ['#148effa6', '#c4dffebe', '#232a47'],\n density: 0.3,\n spotty: 0.77,\n midSize: 0.1,\n midIntensity: 0.5,\n intensity: 0.6,\n bloom: 0.6,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const godRaysPresets: GodRaysPreset[] = [defaultPreset, auroraPreset, warpPreset, linearPreset, etherPreset];\n\nexport const GodRays: React.FC<GodRaysProps> = memo(function GodRaysImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBloom = defaultPreset.params.colorBloom,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n density = defaultPreset.params.density,\n spotty = defaultPreset.params.spotty,\n midIntensity = defaultPreset.params.midIntensity,\n midSize = defaultPreset.params.midSize,\n intensity = defaultPreset.params.intensity,\n bloom = defaultPreset.params.bloom,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: GodRaysProps) {\n const uniforms = {\n // Own uniforms\n u_colorBloom: getShaderColorFromString(colorBloom),\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_density: density,\n u_spotty: spotty,\n u_midIntensity: midIntensity,\n u_midSize: midSize,\n u_intensity: intensity,\n u_bloom: bloom,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies GodRaysUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={godRaysFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,7 +9,6 @@ export declare const truchetPreset: GrainGradientPreset;
|
|
|
9
9
|
export declare const cornersPreset: GrainGradientPreset;
|
|
10
10
|
export declare const ripplePreset: GrainGradientPreset;
|
|
11
11
|
export declare const blobPreset: GrainGradientPreset;
|
|
12
|
-
export declare const spherePreset: GrainGradientPreset;
|
|
13
12
|
export declare const moonPreset: GrainGradientPreset;
|
|
14
13
|
export declare const grainGradientPresets: GrainGradientPreset[];
|
|
15
14
|
export declare const GrainGradient: React.FC<GrainGradientProps>;
|
|
@@ -7,6 +7,7 @@ import { memo } from "react";
|
|
|
7
7
|
import { ShaderMount } from "../shader-mount.js";
|
|
8
8
|
import {
|
|
9
9
|
getShaderColorFromString,
|
|
10
|
+
getShaderNoiseTexture,
|
|
10
11
|
grainGradientFragmentShader,
|
|
11
12
|
ShaderFitOptions,
|
|
12
13
|
defaultPatternSizing,
|
|
@@ -101,20 +102,6 @@ const blobPreset = {
|
|
|
101
102
|
shape: "blob"
|
|
102
103
|
}
|
|
103
104
|
};
|
|
104
|
-
const spherePreset = {
|
|
105
|
-
name: "Sphere",
|
|
106
|
-
params: {
|
|
107
|
-
...defaultObjectSizing,
|
|
108
|
-
speed: 1,
|
|
109
|
-
frame: 0,
|
|
110
|
-
colorBack: "#000319",
|
|
111
|
-
colors: ["#0059b3", "#37f5f5", "#18c039"],
|
|
112
|
-
softness: 1,
|
|
113
|
-
intensity: 0.15,
|
|
114
|
-
noise: 0.5,
|
|
115
|
-
shape: "sphere"
|
|
116
|
-
}
|
|
117
|
-
};
|
|
118
105
|
const moonPreset = {
|
|
119
106
|
name: "Moon",
|
|
120
107
|
params: {
|
|
@@ -137,7 +124,6 @@ const grainGradientPresets = [
|
|
|
137
124
|
truchetPreset,
|
|
138
125
|
ripplePreset,
|
|
139
126
|
blobPreset,
|
|
140
|
-
spherePreset,
|
|
141
127
|
moonPreset
|
|
142
128
|
];
|
|
143
129
|
const GrainGradient = memo(function GrainGradientImpl({
|
|
@@ -162,6 +148,7 @@ const GrainGradient = memo(function GrainGradientImpl({
|
|
|
162
148
|
worldHeight = defaultPreset.params.worldHeight,
|
|
163
149
|
...props
|
|
164
150
|
}) {
|
|
151
|
+
const noiseTexture = typeof window !== "undefined" && { u_noiseTexture: getShaderNoiseTexture() };
|
|
165
152
|
const uniforms = {
|
|
166
153
|
// Own uniforms
|
|
167
154
|
u_colorBack: getShaderColorFromString(colorBack),
|
|
@@ -171,6 +158,7 @@ const GrainGradient = memo(function GrainGradientImpl({
|
|
|
171
158
|
u_intensity: intensity,
|
|
172
159
|
u_noise: noise,
|
|
173
160
|
u_shape: GrainGradientShapes[shape],
|
|
161
|
+
...noiseTexture,
|
|
174
162
|
// Sizing uniforms
|
|
175
163
|
u_fit: ShaderFitOptions[fit],
|
|
176
164
|
u_scale: scale,
|
|
@@ -202,7 +190,6 @@ export {
|
|
|
202
190
|
grainGradientPresets,
|
|
203
191
|
moonPreset,
|
|
204
192
|
ripplePreset,
|
|
205
|
-
spherePreset,
|
|
206
193
|
truchetPreset
|
|
207
194
|
};
|
|
208
195
|
//# sourceMappingURL=grain-gradient.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/grain-gradient.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n grainGradientFragmentShader,\n ShaderFitOptions,\n type GrainGradientUniforms,\n type GrainGradientParams,\n type ShaderPreset,\n defaultPatternSizing,\n defaultObjectSizing,\n GrainGradientShapes,\n} from '@paper-design/shaders';\n\nexport interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {}\n\ntype GrainGradientPreset = ShaderPreset<GrainGradientParams>;\n\nexport const defaultPreset: GrainGradientPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#000a0f',\n colors: ['#c4730b', '#bdad5f', '#d8ccc7'],\n softness: 0.7,\n intensity: 0.15,\n noise: 0.5,\n shape: 'wave',\n },\n};\n\nexport const dotsPreset: GrainGradientPreset = {\n name: 'Dots',\n params: {\n ...defaultPatternSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#0a0000',\n colors: ['#6f0000', '#0080ff', '#f2ebc9'],\n softness: 0.75,\n intensity: 0.15,\n noise: 0.7,\n shape: 'dots',\n },\n};\n\nexport const truchetPreset: GrainGradientPreset = {\n name: 'Truchet',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#0a0000',\n colors: ['#6f2200', '#eabb7c', '#39b523'],\n softness: 0,\n intensity: 0.2,\n noise: 1,\n shape: 'truchet',\n },\n};\n\nexport const cornersPreset: GrainGradientPreset = {\n name: 'Corners',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#031018',\n colors: ['#00aeff', '#00ffcc', '#ffc800'],\n softness: 0.4,\n intensity: 0.35,\n noise: 0.35,\n shape: 'corners',\n },\n};\n\nexport const ripplePreset: GrainGradientPreset = {\n name: 'Ripple',\n params: {\n ...defaultObjectSizing,\n scale: 0.5,\n speed: 1,\n frame: 0,\n colorBack: '#140a00',\n colors: ['#6f2d00', '#88ddae', '#2c0b1d'],\n softness: 0.5,\n intensity: 0.5,\n noise: 0.5,\n shape: 'ripple',\n },\n};\n\nexport const blobPreset: GrainGradientPreset = {\n name: 'Blob',\n params: {\n ...defaultObjectSizing,\n scale: 1.3,\n speed: 1,\n frame: 0,\n colorBack: '#0f0e18',\n colors: ['#3e6172', '#a49b74', '#568c50'],\n softness: 0,\n intensity: 0.15,\n noise: 0.5,\n shape: 'blob',\n },\n};\n\nexport const
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n getShaderNoiseTexture,\n grainGradientFragmentShader,\n ShaderFitOptions,\n type GrainGradientUniforms,\n type GrainGradientParams,\n type ShaderPreset,\n defaultPatternSizing,\n defaultObjectSizing,\n GrainGradientShapes,\n} from '@paper-design/shaders';\n\nexport interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {}\n\ntype GrainGradientPreset = ShaderPreset<GrainGradientParams>;\n\nexport const defaultPreset: GrainGradientPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#000a0f',\n colors: ['#c4730b', '#bdad5f', '#d8ccc7'],\n softness: 0.7,\n intensity: 0.15,\n noise: 0.5,\n shape: 'wave',\n },\n};\n\nexport const dotsPreset: GrainGradientPreset = {\n name: 'Dots',\n params: {\n ...defaultPatternSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#0a0000',\n colors: ['#6f0000', '#0080ff', '#f2ebc9'],\n softness: 0.75,\n intensity: 0.15,\n noise: 0.7,\n shape: 'dots',\n },\n};\n\nexport const truchetPreset: GrainGradientPreset = {\n name: 'Truchet',\n params: {\n ...defaultPatternSizing,\n speed: 1,\n frame: 0,\n colorBack: '#0a0000',\n colors: ['#6f2200', '#eabb7c', '#39b523'],\n softness: 0,\n intensity: 0.2,\n noise: 1,\n shape: 'truchet',\n },\n};\n\nexport const cornersPreset: GrainGradientPreset = {\n name: 'Corners',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#031018',\n colors: ['#00aeff', '#00ffcc', '#ffc800'],\n softness: 0.4,\n intensity: 0.35,\n noise: 0.35,\n shape: 'corners',\n },\n};\n\nexport const ripplePreset: GrainGradientPreset = {\n name: 'Ripple',\n params: {\n ...defaultObjectSizing,\n scale: 0.5,\n speed: 1,\n frame: 0,\n colorBack: '#140a00',\n colors: ['#6f2d00', '#88ddae', '#2c0b1d'],\n softness: 0.5,\n intensity: 0.5,\n noise: 0.5,\n shape: 'ripple',\n },\n};\n\nexport const blobPreset: GrainGradientPreset = {\n name: 'Blob',\n params: {\n ...defaultObjectSizing,\n scale: 1.3,\n speed: 1,\n frame: 0,\n colorBack: '#0f0e18',\n colors: ['#3e6172', '#a49b74', '#568c50'],\n softness: 0,\n intensity: 0.15,\n noise: 0.5,\n shape: 'blob',\n },\n};\n\nexport const moonPreset: GrainGradientPreset = {\n name: 'Moon',\n params: {\n ...defaultObjectSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#000000', '#28272d', '#ffeccc'],\n softness: 1,\n intensity: 0.56,\n noise: 1,\n shape: 'sphere',\n },\n};\n\nexport const grainGradientPresets: GrainGradientPreset[] = [\n cornersPreset,\n defaultPreset,\n dotsPreset,\n truchetPreset,\n ripplePreset,\n blobPreset,\n moonPreset,\n];\n\nexport const GrainGradient: React.FC<GrainGradientProps> = memo(function GrainGradientImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n softness = defaultPreset.params.softness,\n intensity = defaultPreset.params.intensity,\n noise = defaultPreset.params.noise,\n shape = defaultPreset.params.shape,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: GrainGradientProps) {\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_softness: softness,\n u_intensity: intensity,\n u_noise: noise,\n u_shape: GrainGradientShapes[shape],\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 GrainGradientUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={grainGradientFragmentShader}\n uniforms={uniforms}\n />\n );\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -20,10 +20,10 @@ const defaultPreset = {
|
|
|
20
20
|
scale: 1,
|
|
21
21
|
speed: 1,
|
|
22
22
|
frame: 0,
|
|
23
|
-
colorBack: "#
|
|
24
|
-
colors: ["#
|
|
23
|
+
colorBack: "#103086",
|
|
24
|
+
colors: ["#FFC802", "#FF5601", "#FFC206"],
|
|
25
25
|
count: 7,
|
|
26
|
-
size:
|
|
26
|
+
size: 0.75
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
29
|
const metaballsPresets = [defaultPreset];
|
|
@@ -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 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: '#
|
|
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,
|
|
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: '#103086',\n colors: ['#FFC802', '#FF5601', '#FFC206'],\n count: 7,\n size: 0.75,\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,SAAS;AAAA,IACxC,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
|
}
|
|
@@ -18,7 +18,7 @@ const defaultPreset = {
|
|
|
18
18
|
name: "Default",
|
|
19
19
|
params: {
|
|
20
20
|
...defaultObjectSizing,
|
|
21
|
-
scale: 0.
|
|
21
|
+
scale: 0.85,
|
|
22
22
|
speed: 1,
|
|
23
23
|
frame: 0,
|
|
24
24
|
colorBack: "#000000",
|
|
@@ -63,16 +63,16 @@ const innerBorderPreset = {
|
|
|
63
63
|
speed: 1,
|
|
64
64
|
frame: 0,
|
|
65
65
|
colorBack: "#181821",
|
|
66
|
-
colors: ["#
|
|
66
|
+
colors: ["#2294d9", "#79fac5", "#e39e22"],
|
|
67
67
|
roundness: 0,
|
|
68
|
-
thickness: 0,
|
|
69
|
-
softness:
|
|
70
|
-
intensity:
|
|
68
|
+
thickness: 0.05,
|
|
69
|
+
softness: 1,
|
|
70
|
+
intensity: 2,
|
|
71
71
|
spotsPerColor: 3,
|
|
72
|
-
spotSize: 0.
|
|
73
|
-
pulse: 0.
|
|
74
|
-
smoke: 0
|
|
75
|
-
smokeSize: 0
|
|
72
|
+
spotSize: 0.15,
|
|
73
|
+
pulse: 0.5,
|
|
74
|
+
smoke: 0,
|
|
75
|
+
smokeSize: 0
|
|
76
76
|
}
|
|
77
77
|
};
|
|
78
78
|
const pulsingBorderPresets = [defaultPreset, circlePreset, innerBorderPreset];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/pulsing-border.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n pulsingBorderFragmentShader,\n ShaderFitOptions,\n type PulsingBorderParams,\n type PulsingBorderUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface PulsingBorderProps extends ShaderComponentProps, PulsingBorderParams {}\n\ntype PulsingBorderPreset = ShaderPreset<PulsingBorderParams>;\n\nexport const defaultPreset: PulsingBorderPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.
|
|
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.85,\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: ['#2294d9', '#79fac5', '#e39e22'],\n roundness: 0,\n thickness: 0.05,\n softness: 1,\n intensity: 2,\n spotsPerColor: 3,\n spotSize: 0.15,\n pulse: 0.5,\n smoke: 0,\n smokeSize: 0,\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
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,13 +35,13 @@ const poisonPreset = {
|
|
|
35
35
|
...defaultObjectSizing,
|
|
36
36
|
speed: 1,
|
|
37
37
|
frame: 0,
|
|
38
|
-
colorBack: "#
|
|
39
|
-
colors: ["#d4ff00", "#
|
|
40
|
-
noiseScale:
|
|
41
|
-
noiseIterations:
|
|
38
|
+
colorBack: "#003d00",
|
|
39
|
+
colors: ["#d4ff00", "#077d52", "#aaff00"],
|
|
40
|
+
noiseScale: 3.3,
|
|
41
|
+
noiseIterations: 3,
|
|
42
42
|
radius: 0.4,
|
|
43
43
|
thickness: 0.2,
|
|
44
|
-
innerShape:
|
|
44
|
+
innerShape: 4
|
|
45
45
|
}
|
|
46
46
|
};
|
|
47
47
|
const linePreset = {
|
|
@@ -66,7 +66,7 @@ const cloudPreset = {
|
|
|
66
66
|
frame: 0,
|
|
67
67
|
colorBack: "#3b9bff",
|
|
68
68
|
colors: ["#ffffff"],
|
|
69
|
-
noiseScale:
|
|
69
|
+
noiseScale: 3,
|
|
70
70
|
noiseIterations: 10,
|
|
71
71
|
radius: 0.5,
|
|
72
72
|
thickness: 0.65,
|
|
@@ -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.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: '#
|
|
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,
|
|
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: '#003d00',\n colors: ['#d4ff00', '#077d52', '#aaff00'],\n noiseScale: 3.3,\n noiseIterations: 3,\n radius: 0.4,\n thickness: 0.2,\n innerShape: 4,\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: 3,\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/shaders/spiral.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/spiral.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 ShaderFitOptions,\n spiralFragmentShader,\n type ShaderPreset,\n type SpiralParams,\n type SpiralUniforms,\n} from '@paper-design/shaders';\n\nexport interface SpiralProps extends ShaderComponentProps, SpiralParams {}\n\ntype SpiralPreset = ShaderPreset<SpiralParams>;\n\nexport const defaultPreset: SpiralPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n colorBack: '#fafafa',\n colorFront: '#808080',\n density: 0,\n distortion: 0,\n strokeWidth: 0.5,\n strokeTaper: 0,\n strokeCap: 0,\n noiseFrequency: 0,\n noisePower: 0,\n softness: 0.01,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const noisyPreset: SpiralPreset = {\n name: 'Noisy',\n params: {\n ...defaultPatternSizing,\n colorBack: '#a1ef2a',\n colorFront: '#288918',\n scale: 1.3,\n density: 0.5,\n distortion: 0,\n strokeWidth: 0.5,\n strokeTaper: 0,\n strokeCap: 0.5,\n noiseFrequency: 0.1,\n noisePower: 1,\n softness: 0,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const dropletPreset: SpiralPreset = {\n name: 'Droplet',\n params: {\n ...defaultPatternSizing,\n colorBack: '#effafe',\n colorFront: '#bf40a0',\n scale: 0.65,\n density: 0,\n distortion: 0,\n strokeWidth: 0.05,\n strokeTaper: 0,\n strokeCap: 1,\n noiseFrequency: 0,\n noisePower: 0,\n softness: 0,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const sandPreset: SpiralPreset = {\n name: 'Sand',\n params: {\n ...defaultPatternSizing,\n colorBack: '#dedede',\n colorFront: '#a09560',\n scale:
|
|
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 ShaderFitOptions,\n spiralFragmentShader,\n type ShaderPreset,\n type SpiralParams,\n type SpiralUniforms,\n} from '@paper-design/shaders';\n\nexport interface SpiralProps extends ShaderComponentProps, SpiralParams {}\n\ntype SpiralPreset = ShaderPreset<SpiralParams>;\n\nexport const defaultPreset: SpiralPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n colorBack: '#fafafa',\n colorFront: '#808080',\n density: 0,\n distortion: 0,\n strokeWidth: 0.5,\n strokeTaper: 0,\n strokeCap: 0,\n noiseFrequency: 0,\n noisePower: 0,\n softness: 0.01,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const noisyPreset: SpiralPreset = {\n name: 'Noisy',\n params: {\n ...defaultPatternSizing,\n colorBack: '#a1ef2a',\n colorFront: '#288918',\n scale: 1.3,\n density: 0.5,\n distortion: 0,\n strokeWidth: 0.5,\n strokeTaper: 0,\n strokeCap: 0.5,\n noiseFrequency: 0.1,\n noisePower: 1,\n softness: 0,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const dropletPreset: SpiralPreset = {\n name: 'Droplet',\n params: {\n ...defaultPatternSizing,\n colorBack: '#effafe',\n colorFront: '#bf40a0',\n scale: 0.65,\n density: 0,\n distortion: 0,\n strokeWidth: 0.05,\n strokeTaper: 0,\n strokeCap: 1,\n noiseFrequency: 0,\n noisePower: 0,\n softness: 0,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const sandPreset: SpiralPreset = {\n name: 'Sand',\n params: {\n ...defaultPatternSizing,\n colorBack: '#dedede',\n colorFront: '#a09560',\n scale: 0.75,\n density: 0,\n distortion: 0,\n strokeWidth: 0.15,\n strokeTaper: 0,\n strokeCap: 0,\n noiseFrequency: 30,\n noisePower: 1,\n softness: 0.2,\n speed: 0,\n frame: 0,\n },\n};\n\nexport const swirlPreset: SpiralPreset = {\n name: 'Swirl',\n params: {\n ...defaultPatternSizing,\n colorBack: '#b3e6d9',\n colorFront: '#1a2b4d',\n scale: 4,\n density: 0.8,\n distortion: 0,\n strokeWidth: 0.5,\n strokeTaper: 0,\n strokeCap: 0,\n noiseFrequency: 0,\n noisePower: 0,\n softness: 0.5,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const hookPreset: SpiralPreset = {\n name: 'Hook',\n params: {\n ...defaultPatternSizing,\n colorBack: '#85c2e0',\n colorFront: '#000000',\n scale: 0.8,\n density: 0,\n distortion: 0,\n strokeWidth: 0.5,\n strokeTaper: 0.5,\n strokeCap: 0,\n noiseFrequency: 0,\n noisePower: 0,\n softness: 0.02,\n speed: 3,\n frame: 0,\n },\n};\n\nexport const vinylPreset: SpiralPreset = {\n name: 'Vinyl',\n params: {\n ...defaultPatternSizing,\n colorBack: '#c2babb',\n colorFront: '#262626',\n density: 0,\n distortion: 0.3,\n strokeWidth: 0.95,\n strokeTaper: 0,\n strokeCap: 1,\n noiseFrequency: 0,\n noisePower: 0,\n softness: 0.11,\n speed: 1,\n frame: 0,\n },\n};\n\nexport const spiralPresets: SpiralPreset[] = [\n defaultPreset,\n noisyPreset,\n dropletPreset,\n swirlPreset,\n sandPreset,\n hookPreset,\n vinylPreset,\n];\n\nexport const Spiral: React.FC<SpiralProps> = memo(function SpiralImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colorFront = defaultPreset.params.colorFront,\n density = defaultPreset.params.density,\n distortion = defaultPreset.params.distortion,\n strokeWidth = defaultPreset.params.strokeWidth,\n strokeTaper = defaultPreset.params.strokeTaper,\n strokeCap = defaultPreset.params.strokeCap,\n noiseFrequency = defaultPreset.params.noiseFrequency,\n noisePower = defaultPreset.params.noisePower,\n softness = defaultPreset.params.softness,\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}: SpiralProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorFront: getShaderColorFromString(colorFront),\n u_density: density,\n u_distortion: distortion,\n u_strokeWidth: strokeWidth,\n u_strokeTaper: strokeTaper,\n u_strokeCap: strokeCap,\n u_noiseFrequency: noiseFrequency,\n u_noisePower: noisePower,\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 SpiralUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={spiralFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/shaders/swirl.js
CHANGED
|
@@ -40,7 +40,7 @@ const openingPreset = {
|
|
|
40
40
|
speed: 0.6,
|
|
41
41
|
frame: 0,
|
|
42
42
|
colorBack: "#8b2e5f",
|
|
43
|
-
colors: ["#b14467", "#e67a62", "#
|
|
43
|
+
colors: ["#b14467", "#e67a62", "#ffbdb3"],
|
|
44
44
|
bandCount: 3,
|
|
45
45
|
twist: 0.3,
|
|
46
46
|
softness: 0,
|
|
@@ -70,7 +70,7 @@ const candyPreset = {
|
|
|
70
70
|
speed: 1,
|
|
71
71
|
frame: 0,
|
|
72
72
|
colorBack: "#ffcd66",
|
|
73
|
-
colors: ["#6bbceb", "#8a1fff"],
|
|
73
|
+
colors: ["#6bbceb", "#8a1fff", "#ff9fff"],
|
|
74
74
|
bandCount: 2.5,
|
|
75
75
|
twist: 0.2,
|
|
76
76
|
softness: 1,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/swirl.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n ShaderFitOptions,\n swirlFragmentShader,\n type ShaderPreset,\n type SwirlParams,\n type SwirlUniforms,\n} from '@paper-design/shaders';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\n\nexport interface SwirlProps extends ShaderComponentProps, SwirlParams {}\n\ntype SwirlPreset = ShaderPreset<SwirlParams>;\n\nexport const defaultPreset: SwirlPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 2.28,\n offsetX: -0.4,\n offsetY: 0.3,\n speed: 0.32,\n frame: 0,\n colorBack: '#452424',\n colors: ['#0b7f05', '#ffe785', '#ff335c'],\n bandCount: 5,\n twist: 0.11,\n softness: 0.01,\n noiseFrequency: 1.2,\n noisePower: 0.46,\n },\n};\n\nexport const openingPreset: SwirlPreset = {\n name: 'Opening',\n params: {\n ...defaultObjectSizing,\n offsetX: -0.4,\n offsetY: 0.86,\n speed: 0.6,\n frame: 0,\n colorBack: '#8b2e5f',\n colors: ['#b14467', '#e67a62', '#
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,0BAA0B;AA6H/B;AAvHG,MAAM,gBAA6B;AAAA,EACxC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AACF;AAEO,MAAM,gBAA6B;AAAA,EACxC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n ShaderFitOptions,\n swirlFragmentShader,\n type ShaderPreset,\n type SwirlParams,\n type SwirlUniforms,\n} from '@paper-design/shaders';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\n\nexport interface SwirlProps extends ShaderComponentProps, SwirlParams {}\n\ntype SwirlPreset = ShaderPreset<SwirlParams>;\n\nexport const defaultPreset: SwirlPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 2.28,\n offsetX: -0.4,\n offsetY: 0.3,\n speed: 0.32,\n frame: 0,\n colorBack: '#452424',\n colors: ['#0b7f05', '#ffe785', '#ff335c'],\n bandCount: 5,\n twist: 0.11,\n softness: 0.01,\n noiseFrequency: 1.2,\n noisePower: 0.46,\n },\n};\n\nexport const openingPreset: SwirlPreset = {\n name: 'Opening',\n params: {\n ...defaultObjectSizing,\n offsetX: -0.4,\n offsetY: 0.86,\n speed: 0.6,\n frame: 0,\n colorBack: '#8b2e5f',\n colors: ['#b14467', '#e67a62', '#ffbdb3'],\n bandCount: 3,\n twist: 0.3,\n softness: 0,\n noiseFrequency: 2,\n noisePower: 0,\n },\n} as const;\n\nexport const jamesBondPreset: SwirlPreset = {\n name: '007',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#2e2e2e', '#000000', '#ffffff'],\n bandCount: 4,\n twist: 0.4,\n softness: 0,\n noiseFrequency: 0,\n noisePower: 0,\n },\n} as const;\n\nexport const candyPreset: SwirlPreset = {\n name: 'Candy',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#ffcd66',\n colors: ['#6bbceb', '#8a1fff', '#ff9fff'],\n bandCount: 2.5,\n twist: 0.2,\n softness: 1,\n noiseFrequency: 0,\n noisePower: 0,\n },\n} as const;\n\nexport const swirlPresets: SwirlPreset[] = [defaultPreset, openingPreset, jamesBondPreset, candyPreset];\n\nexport const Swirl: React.FC<SwirlProps> = memo(function SwirlImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n bandCount = defaultPreset.params.bandCount,\n twist = defaultPreset.params.twist,\n softness = defaultPreset.params.softness,\n noiseFrequency = defaultPreset.params.noiseFrequency,\n noisePower = defaultPreset.params.noisePower,\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}: SwirlProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_bandCount: bandCount,\n u_twist: twist,\n u_softness: softness,\n u_noiseFrequency: noiseFrequency,\n u_noisePower: noisePower,\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 SwirlUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={swirlFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,7 +4,7 @@ export interface VoronoiProps extends ShaderComponentProps, VoronoiParams {
|
|
|
4
4
|
}
|
|
5
5
|
type VoronoiPreset = ShaderPreset<VoronoiParams>;
|
|
6
6
|
export declare const defaultPreset: VoronoiPreset;
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const cellsPreset: VoronoiPreset;
|
|
8
8
|
export declare const voronoiPresets: VoronoiPreset[];
|
|
9
9
|
export declare const Voronoi: React.FC<VoronoiProps>;
|
|
10
10
|
export {};
|
package/dist/shaders/voronoi.js
CHANGED
|
@@ -21,7 +21,7 @@ const defaultPreset = {
|
|
|
21
21
|
speed: 0.5,
|
|
22
22
|
frame: 0,
|
|
23
23
|
colors: ["#e65c1a", "#e6c31a", "#1aace6"],
|
|
24
|
-
stepsPerColor:
|
|
24
|
+
stepsPerColor: 2,
|
|
25
25
|
colorGlow: "#5500ff",
|
|
26
26
|
colorGap: "#ffffff",
|
|
27
27
|
distortion: 0.42,
|
|
@@ -29,22 +29,23 @@ const defaultPreset = {
|
|
|
29
29
|
glow: 0
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
|
-
const
|
|
33
|
-
name: "
|
|
32
|
+
const cellsPreset = {
|
|
33
|
+
name: "Cells",
|
|
34
34
|
params: {
|
|
35
35
|
...defaultPatternSizing,
|
|
36
|
+
scale: 0.5,
|
|
36
37
|
speed: 0.5,
|
|
37
38
|
frame: 0,
|
|
38
|
-
colors: ["#
|
|
39
|
+
colors: ["#ffffff"],
|
|
39
40
|
stepsPerColor: 1,
|
|
40
|
-
colorGlow: "#
|
|
41
|
-
colorGap: "#
|
|
42
|
-
distortion: 0.
|
|
43
|
-
gap: 0,
|
|
41
|
+
colorGlow: "#ffffff",
|
|
42
|
+
colorGap: "#ff0073",
|
|
43
|
+
distortion: 0.5,
|
|
44
|
+
gap: 0.03,
|
|
44
45
|
glow: 0.8
|
|
45
46
|
}
|
|
46
47
|
};
|
|
47
|
-
const voronoiPresets = [defaultPreset,
|
|
48
|
+
const voronoiPresets = [defaultPreset, cellsPreset];
|
|
48
49
|
const Voronoi = memo(function VoronoiImpl({
|
|
49
50
|
// Own props
|
|
50
51
|
speed = defaultPreset.params.speed,
|
|
@@ -95,8 +96,8 @@ const Voronoi = memo(function VoronoiImpl({
|
|
|
95
96
|
}, colorPropsAreEqual);
|
|
96
97
|
export {
|
|
97
98
|
Voronoi,
|
|
99
|
+
cellsPreset,
|
|
98
100
|
defaultPreset,
|
|
99
|
-
shadowPreset,
|
|
100
101
|
voronoiPresets
|
|
101
102
|
};
|
|
102
103
|
//# sourceMappingURL=voronoi.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/voronoi.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 getShaderNoiseTexture,\n voronoiFragmentShader,\n ShaderFitOptions,\n type VoronoiParams,\n type VoronoiUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface VoronoiProps extends ShaderComponentProps, VoronoiParams {}\n\ntype VoronoiPreset = ShaderPreset<VoronoiParams>;\n\nexport const defaultPreset: VoronoiPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 0.5,\n frame: 0,\n colors: ['#e65c1a', '#e6c31a', '#1aace6'],\n stepsPerColor:
|
|
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 defaultPatternSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n voronoiFragmentShader,\n ShaderFitOptions,\n type VoronoiParams,\n type VoronoiUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface VoronoiProps extends ShaderComponentProps, VoronoiParams {}\n\ntype VoronoiPreset = ShaderPreset<VoronoiParams>;\n\nexport const defaultPreset: VoronoiPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n speed: 0.5,\n frame: 0,\n colors: ['#e65c1a', '#e6c31a', '#1aace6'],\n stepsPerColor: 2,\n colorGlow: '#5500ff',\n colorGap: '#ffffff',\n distortion: 0.42,\n gap: 0.06,\n glow: 0,\n },\n};\n\nexport const cellsPreset: VoronoiPreset = {\n name: 'Cells',\n params: {\n ...defaultPatternSizing,\n scale: 0.5,\n speed: 0.5,\n frame: 0,\n colors: ['#ffffff'],\n stepsPerColor: 1,\n colorGlow: '#ffffff',\n colorGap: '#ff0073',\n distortion: 0.5,\n gap: 0.03,\n glow: 0.8,\n },\n};\n\nexport const voronoiPresets: VoronoiPreset[] = [defaultPreset, cellsPreset];\n\nexport const Voronoi: React.FC<VoronoiProps> = memo(function VoronoiImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n stepsPerColor = defaultPreset.params.stepsPerColor,\n colorGlow = defaultPreset.params.colorGlow,\n colorGap = defaultPreset.params.colorGap,\n distortion = defaultPreset.params.distortion,\n gap = defaultPreset.params.gap,\n glow = defaultPreset.params.glow,\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}: VoronoiProps) {\n const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\n\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_stepsPerColor: stepsPerColor,\n u_colorGlow: getShaderColorFromString(colorGlow),\n u_colorGap: getShaderColorFromString(colorGap),\n u_distortion: distortion,\n u_gap: gap,\n u_glow: glow,\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 VoronoiUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={voronoiFragmentShader} 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;AA4FH;AAtFG,MAAM,gBAA+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,eAAe;AAAA,IACf,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AACF;AAEO,MAAM,cAA6B;AAAA,EACxC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,SAAS;AAAA,IAClB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AACF;AAEO,MAAM,iBAAkC,CAAC,eAAe,WAAW;AAEnE,MAAM,UAAkC,KAAK,SAAS,YAAY;AAAA;AAAA,EAEvE,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,gBAAgB,cAAc,OAAO;AAAA,EACrC,YAAY,cAAc,OAAO;AAAA,EACjC,WAAW,cAAc,OAAO;AAAA,EAChC,aAAa,cAAc,OAAO;AAAA,EAClC,MAAM,cAAc,OAAO;AAAA,EAC3B,OAAO,cAAc,OAAO;AAAA;AAAA,EAG5B,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,GAAiB;AACf,QAAM,eAAe,OAAO,WAAW,eAAe,EAAE,gBAAgB,sBAAsB,EAAE;AAEhG,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,iBAAiB;AAAA,IACjB,aAAa,yBAAyB,SAAS;AAAA,IAC/C,YAAY,yBAAyB,QAAQ;AAAA,IAC7C,cAAc;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,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,uBAAuB,UAAoB;AAEnH,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/shaders/warp.js
CHANGED
|
@@ -55,7 +55,7 @@ const presetCauldron = {
|
|
|
55
55
|
...defaultPatternSizing,
|
|
56
56
|
scale: 0.9,
|
|
57
57
|
rotation: 160,
|
|
58
|
-
speed:
|
|
58
|
+
speed: 10,
|
|
59
59
|
frame: 0,
|
|
60
60
|
colors: ["#a7e58b", "#324472", "#0a180d"],
|
|
61
61
|
proportion: 0.64,
|
|
@@ -111,7 +111,7 @@ const presetInk = {
|
|
|
111
111
|
scale: 1.2,
|
|
112
112
|
rotation: 44,
|
|
113
113
|
offsetY: -0.3,
|
|
114
|
-
speed:
|
|
114
|
+
speed: 2.5,
|
|
115
115
|
frame: 0,
|
|
116
116
|
colors: ["#111314", "#9faeab", "#f3fee7", "#f3fee7"],
|
|
117
117
|
proportion: 0.05,
|
|
@@ -129,7 +129,7 @@ const presetKelp = {
|
|
|
129
129
|
...defaultPatternSizing,
|
|
130
130
|
scale: 0.65,
|
|
131
131
|
rotation: 50,
|
|
132
|
-
speed:
|
|
132
|
+
speed: 20,
|
|
133
133
|
frame: 0,
|
|
134
134
|
colors: ["#dbff8f", "#404f3e", "#091316"],
|
|
135
135
|
proportion: 0.67,
|
|
@@ -148,7 +148,7 @@ const presetNectar = {
|
|
|
148
148
|
scale: 2,
|
|
149
149
|
offsetY: 0.6,
|
|
150
150
|
rotation: 0,
|
|
151
|
-
speed:
|
|
151
|
+
speed: 4.2,
|
|
152
152
|
frame: 0,
|
|
153
153
|
colors: ["#151310", "#d3a86b", "#f0edea"],
|
|
154
154
|
proportion: 0.24,
|
|
@@ -166,7 +166,7 @@ const presetPassion = {
|
|
|
166
166
|
...defaultPatternSizing,
|
|
167
167
|
scale: 2.5,
|
|
168
168
|
rotation: 1.35,
|
|
169
|
-
speed:
|
|
169
|
+
speed: 3,
|
|
170
170
|
frame: 0,
|
|
171
171
|
colors: ["#3b1515", "#954751", "#ffc085"],
|
|
172
172
|
proportion: 0.5,
|
|
@@ -185,7 +185,7 @@ const presetPhantom = {
|
|
|
185
185
|
scale: 1.2,
|
|
186
186
|
rotation: 180,
|
|
187
187
|
offsetY: -0.2,
|
|
188
|
-
speed:
|
|
188
|
+
speed: 12.5,
|
|
189
189
|
frame: 0,
|
|
190
190
|
colors: ["#12112c", "#7b89f2", "#d7dcfb"],
|
|
191
191
|
proportion: 0.5,
|
package/dist/shaders/warp.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/warp.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 warpFragmentShader,\n ShaderFitOptions,\n type WarpParams,\n type WarpUniforms,\n type ShaderPreset,\n WarpPatterns,\n} from '@paper-design/shaders';\n\nexport interface WarpProps extends ShaderComponentProps, WarpParams {}\n\ntype WarpPreset = ShaderPreset<WarpParams>;\n\nexport const defaultPreset: WarpPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n rotation: 0,\n speed: 1,\n frame: 0,\n colors: ['#262626', '#2e383d', '#64a5ce', '#ffffff'],\n proportion: 0.45,\n softness: 1,\n distortion: 0.25,\n swirl: 0.8,\n swirlIterations: 10,\n shapeScale: 0.1,\n shape: 'checks',\n },\n};\n\nexport const presetAbyss: WarpPreset = {\n name: 'The Abyss',\n params: {\n ...defaultPatternSizing,\n scale: 3,\n rotation: 2,\n speed: 0.6,\n frame: 0,\n colors: ['#15122e', '#7b89f2', '#ffffff'],\n proportion: 0,\n softness: 1,\n distortion: 0.09,\n swirl: 0.48,\n swirlIterations: 5,\n shapeScale: 0.85,\n shape: 'edge',\n },\n};\n\nexport const presetCauldron: WarpPreset = {\n name: 'Cauldron Pot',\n params: {\n ...defaultPatternSizing,\n scale: 0.9,\n rotation: 160,\n speed:
|
|
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 warpFragmentShader,\n ShaderFitOptions,\n type WarpParams,\n type WarpUniforms,\n type ShaderPreset,\n WarpPatterns,\n} from '@paper-design/shaders';\n\nexport interface WarpProps extends ShaderComponentProps, WarpParams {}\n\ntype WarpPreset = ShaderPreset<WarpParams>;\n\nexport const defaultPreset: WarpPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n rotation: 0,\n speed: 1,\n frame: 0,\n colors: ['#262626', '#2e383d', '#64a5ce', '#ffffff'],\n proportion: 0.45,\n softness: 1,\n distortion: 0.25,\n swirl: 0.8,\n swirlIterations: 10,\n shapeScale: 0.1,\n shape: 'checks',\n },\n};\n\nexport const presetAbyss: WarpPreset = {\n name: 'The Abyss',\n params: {\n ...defaultPatternSizing,\n scale: 3,\n rotation: 2,\n speed: 0.6,\n frame: 0,\n colors: ['#15122e', '#7b89f2', '#ffffff'],\n proportion: 0,\n softness: 1,\n distortion: 0.09,\n swirl: 0.48,\n swirlIterations: 5,\n shapeScale: 0.85,\n shape: 'edge',\n },\n};\n\nexport const presetCauldron: WarpPreset = {\n name: 'Cauldron Pot',\n params: {\n ...defaultPatternSizing,\n scale: 0.9,\n rotation: 160,\n speed: 10,\n frame: 0,\n colors: ['#a7e58b', '#324472', '#0a180d'],\n proportion: 0.64,\n softness: 1.5,\n distortion: 0.2,\n swirl: 0.86,\n swirlIterations: 7,\n shapeScale: 0.6,\n shape: 'edge',\n },\n};\n\nexport const presetFilteredLight: WarpPreset = {\n name: 'Filtered Light',\n params: {\n ...defaultPatternSizing,\n scale: 0.3,\n rotation: 45,\n speed: 3.2,\n frame: 0,\n colors: ['#171714', '#d4d8be', '#f9f9e0'],\n proportion: 0.4,\n softness: 1,\n distortion: 0.09,\n swirl: 0.1,\n swirlIterations: 0,\n shapeScale: 0.1,\n shape: 'stripes',\n },\n};\n\nexport const presetIceberg: WarpPreset = {\n name: 'Iceberg',\n params: {\n ...defaultPatternSizing,\n scale: 0.8,\n rotation: 190,\n offsetX: 0.3,\n speed: 0.5,\n frame: 0,\n colors: ['#ffffff', '#324771', '#0a180d'],\n proportion: 0.3,\n softness: 1.2,\n distortion: 0.2,\n swirl: 0.86,\n swirlIterations: 7,\n shapeScale: 0,\n shape: 'checks',\n },\n};\n\nexport const presetInk: WarpPreset = {\n name: 'Live Ink',\n params: {\n ...defaultPatternSizing,\n scale: 1.2,\n rotation: 44,\n offsetY: -0.3,\n speed: 2.5,\n frame: 0,\n colors: ['#111314', '#9faeab', '#f3fee7', '#f3fee7'],\n proportion: 0.05,\n softness: 0,\n distortion: 0.25,\n swirl: 0.8,\n swirlIterations: 10,\n shapeScale: 0.28,\n shape: 'checks',\n },\n};\n\nexport const presetKelp: WarpPreset = {\n name: 'Kelp',\n params: {\n ...defaultPatternSizing,\n scale: 0.65,\n rotation: 50,\n speed: 20,\n frame: 0,\n colors: ['#dbff8f', '#404f3e', '#091316'],\n proportion: 0.67,\n softness: 0.05,\n distortion: 0,\n swirl: 0.15,\n swirlIterations: 0,\n shapeScale: 0.74,\n shape: 'stripes',\n },\n};\n\nexport const presetNectar: WarpPreset = {\n name: 'Nectar',\n params: {\n ...defaultPatternSizing,\n scale: 2,\n offsetY: 0.6,\n rotation: 0,\n speed: 4.2,\n frame: 0,\n colors: ['#151310', '#d3a86b', '#f0edea'],\n proportion: 0.24,\n softness: 1,\n distortion: 0.21,\n swirl: 0.57,\n swirlIterations: 10,\n shapeScale: 0.75,\n shape: 'edge',\n },\n};\n\nexport const presetPassion: WarpPreset = {\n name: 'Passion',\n params: {\n ...defaultPatternSizing,\n scale: 2.5,\n rotation: 1.35,\n speed: 3,\n frame: 0,\n colors: ['#3b1515', '#954751', '#ffc085'],\n proportion: 0.5,\n softness: 1,\n distortion: 0.09,\n swirl: 0.9,\n swirlIterations: 6,\n shapeScale: 0.25,\n shape: 'checks',\n },\n};\n\nexport const presetPhantom: WarpPreset = {\n name: 'Phantom',\n params: {\n ...defaultPatternSizing,\n scale: 1.2,\n rotation: 180,\n offsetY: -0.2,\n speed: 12.5,\n frame: 0,\n colors: ['#12112c', '#7b89f2', '#d7dcfb'],\n proportion: 0.5,\n softness: 1,\n distortion: 0.2,\n swirl: 0.3,\n swirlIterations: 7,\n shapeScale: 0.1,\n shape: 'checks',\n },\n};\n\nexport const presetSilk: WarpPreset = {\n name: 'Silk',\n params: {\n ...defaultPatternSizing,\n scale: 2,\n rotation: 0,\n speed: 5,\n frame: 0,\n colors: ['#141111', '#665551', '#baaea9'],\n proportion: 0,\n softness: 1,\n distortion: 0.3,\n swirl: 0.6,\n swirlIterations: 11,\n shapeScale: 0.25,\n shape: 'stripes',\n },\n};\n\nexport const warpPresets: WarpPreset[] = [\n defaultPreset,\n presetAbyss,\n presetCauldron,\n presetFilteredLight,\n presetIceberg,\n presetInk,\n presetKelp,\n presetNectar,\n presetPassion,\n presetPhantom,\n presetSilk,\n];\n\nexport const Warp: React.FC<WarpProps> = memo(function WarpImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n proportion = defaultPreset.params.proportion,\n softness = defaultPreset.params.softness,\n distortion = defaultPreset.params.distortion,\n swirl = defaultPreset.params.swirl,\n swirlIterations = defaultPreset.params.swirlIterations,\n shapeScale = defaultPreset.params.shapeScale,\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}: WarpProps) {\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_proportion: proportion,\n u_softness: softness,\n u_distortion: distortion,\n u_swirl: swirl,\n u_swirlIterations: swirlIterations,\n u_shapeScale: shapeScale,\n u_shape: WarpPatterns[shape],\n\n // Sizing uniforms\n u_scale: scale,\n u_rotation: rotation,\n u_fit: ShaderFitOptions[fit],\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 WarpUniforms;\n\n return <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={warpFragmentShader} uniforms={uniforms} />;\n}, colorPropsAreEqual);\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/shaders/waves.d.ts
CHANGED
|
@@ -4,10 +4,8 @@ export interface WavesProps extends ShaderComponentProps, WavesParams {
|
|
|
4
4
|
}
|
|
5
5
|
type WavesPreset = ShaderPreset<WavesParams>;
|
|
6
6
|
export declare const defaultPreset: WavesPreset;
|
|
7
|
-
export declare const spikesPreset: WavesPreset;
|
|
8
7
|
export declare const groovyPreset: WavesPreset;
|
|
9
8
|
export declare const tangledUpPreset: WavesPreset;
|
|
10
|
-
export declare const zigZagPreset: WavesPreset;
|
|
11
9
|
export declare const waveRidePreset: WavesPreset;
|
|
12
10
|
export declare const wavesPresets: WavesPreset[];
|
|
13
11
|
export declare const Waves: React.FC<WavesProps>;
|
package/dist/shaders/waves.js
CHANGED
|
@@ -17,8 +17,7 @@ const defaultPreset = {
|
|
|
17
17
|
name: "Default",
|
|
18
18
|
params: {
|
|
19
19
|
...defaultPatternSizing,
|
|
20
|
-
scale: 1
|
|
21
|
-
rotation: 0,
|
|
20
|
+
scale: 1,
|
|
22
21
|
colorFront: "#ffffff",
|
|
23
22
|
colorBack: "#102c70",
|
|
24
23
|
shape: 0,
|
|
@@ -26,36 +25,20 @@ const defaultPreset = {
|
|
|
26
25
|
amplitude: 0.6,
|
|
27
26
|
spacing: 0.65,
|
|
28
27
|
proportion: 0.15,
|
|
29
|
-
softness: 0
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
const spikesPreset = {
|
|
33
|
-
name: "Spikes",
|
|
34
|
-
params: {
|
|
35
|
-
...defaultPatternSizing,
|
|
36
|
-
scale: 1 / 2.3,
|
|
37
|
-
rotation: 0,
|
|
38
|
-
colorFront: "#fdffe6",
|
|
39
|
-
colorBack: "#34123b",
|
|
40
|
-
shape: 0,
|
|
41
|
-
frequency: 0.5,
|
|
42
|
-
amplitude: 0.9,
|
|
43
|
-
spacing: 0.37,
|
|
44
|
-
proportion: 0.93,
|
|
45
|
-
softness: 0.15
|
|
28
|
+
softness: 0.05
|
|
46
29
|
}
|
|
47
30
|
};
|
|
48
31
|
const groovyPreset = {
|
|
49
32
|
name: "Groovy",
|
|
50
33
|
params: {
|
|
51
34
|
...defaultPatternSizing,
|
|
52
|
-
scale:
|
|
53
|
-
rotation:
|
|
35
|
+
scale: 5,
|
|
36
|
+
rotation: 90,
|
|
54
37
|
colorFront: "#fcfcee",
|
|
55
38
|
colorBack: "#ff896b",
|
|
56
|
-
shape:
|
|
39
|
+
shape: 3,
|
|
57
40
|
frequency: 0.2,
|
|
58
|
-
amplitude: 0.
|
|
41
|
+
amplitude: 0.25,
|
|
59
42
|
spacing: 1.17,
|
|
60
43
|
proportion: 0.57,
|
|
61
44
|
softness: 0
|
|
@@ -65,58 +48,35 @@ const tangledUpPreset = {
|
|
|
65
48
|
name: "Tangled up",
|
|
66
49
|
params: {
|
|
67
50
|
...defaultPatternSizing,
|
|
68
|
-
scale:
|
|
69
|
-
rotation:
|
|
51
|
+
scale: 0.5,
|
|
52
|
+
rotation: 0,
|
|
70
53
|
colorFront: "#133a41",
|
|
71
54
|
colorBack: "#c2d8b6",
|
|
72
55
|
shape: 3,
|
|
73
56
|
frequency: 0.44,
|
|
74
57
|
amplitude: 0.57,
|
|
75
58
|
spacing: 1.05,
|
|
76
|
-
proportion: 0.
|
|
77
|
-
softness: 0
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
const zigZagPreset = {
|
|
81
|
-
name: "Zig zag",
|
|
82
|
-
params: {
|
|
83
|
-
...defaultPatternSizing,
|
|
84
|
-
scale: 1 / 2.7,
|
|
85
|
-
rotation: 1,
|
|
86
|
-
colorFront: "#000000",
|
|
87
|
-
colorBack: "#e6e6e6",
|
|
88
|
-
shape: 0,
|
|
89
|
-
frequency: 0.6,
|
|
90
|
-
amplitude: 0.8,
|
|
91
|
-
spacing: 0.5,
|
|
92
|
-
proportion: 1,
|
|
93
|
-
softness: 0.5
|
|
59
|
+
proportion: 0.75,
|
|
60
|
+
softness: 0.02
|
|
94
61
|
}
|
|
95
62
|
};
|
|
96
63
|
const waveRidePreset = {
|
|
97
64
|
name: "Ride the wave",
|
|
98
65
|
params: {
|
|
99
66
|
...defaultPatternSizing,
|
|
100
|
-
scale: 1
|
|
67
|
+
scale: 1.7,
|
|
101
68
|
rotation: 0,
|
|
102
69
|
colorFront: "#fdffe6",
|
|
103
70
|
colorBack: "#1f1f1f",
|
|
104
|
-
shape: 2.
|
|
105
|
-
frequency: 0.
|
|
106
|
-
amplitude:
|
|
107
|
-
spacing:
|
|
108
|
-
proportion:
|
|
71
|
+
shape: 2.25,
|
|
72
|
+
frequency: 0.2,
|
|
73
|
+
amplitude: 1,
|
|
74
|
+
spacing: 1.25,
|
|
75
|
+
proportion: 1,
|
|
109
76
|
softness: 0
|
|
110
77
|
}
|
|
111
78
|
};
|
|
112
|
-
const wavesPresets = [
|
|
113
|
-
defaultPreset,
|
|
114
|
-
spikesPreset,
|
|
115
|
-
groovyPreset,
|
|
116
|
-
tangledUpPreset,
|
|
117
|
-
zigZagPreset,
|
|
118
|
-
waveRidePreset
|
|
119
|
-
];
|
|
79
|
+
const wavesPresets = [defaultPreset, groovyPreset, tangledUpPreset, waveRidePreset];
|
|
120
80
|
const Waves = memo(function WavesImpl({
|
|
121
81
|
// Own props
|
|
122
82
|
colorFront = defaultPreset.params.colorFront,
|
|
@@ -169,10 +129,8 @@ export {
|
|
|
169
129
|
Waves,
|
|
170
130
|
defaultPreset,
|
|
171
131
|
groovyPreset,
|
|
172
|
-
spikesPreset,
|
|
173
132
|
tangledUpPreset,
|
|
174
133
|
waveRidePreset,
|
|
175
|
-
wavesPresets
|
|
176
|
-
zigZagPreset
|
|
134
|
+
wavesPresets
|
|
177
135
|
};
|
|
178
136
|
//# sourceMappingURL=waves.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/waves.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 wavesFragmentShader,\n ShaderFitOptions,\n type WavesParams,\n type WavesUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface WavesProps extends ShaderComponentProps, WavesParams {}\n\ntype WavesPreset = ShaderPreset<WavesParams>;\n\nexport const defaultPreset: WavesPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n scale: 1
|
|
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 wavesFragmentShader,\n ShaderFitOptions,\n type WavesParams,\n type WavesUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface WavesProps extends ShaderComponentProps, WavesParams {}\n\ntype WavesPreset = ShaderPreset<WavesParams>;\n\nexport const defaultPreset: WavesPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n scale: 1,\n colorFront: '#ffffff',\n colorBack: '#102c70',\n shape: 0,\n frequency: 0.5,\n amplitude: 0.6,\n spacing: 0.65,\n proportion: 0.15,\n softness: 0.05,\n },\n};\n\nexport const groovyPreset: WavesPreset = {\n name: 'Groovy',\n params: {\n ...defaultPatternSizing,\n scale: 5,\n rotation: 90,\n colorFront: '#fcfcee',\n colorBack: '#ff896b',\n shape: 3,\n frequency: 0.2,\n amplitude: 0.25,\n spacing: 1.17,\n proportion: 0.57,\n softness: 0,\n },\n};\n\nexport const tangledUpPreset: WavesPreset = {\n name: 'Tangled up',\n params: {\n ...defaultPatternSizing,\n scale: 0.5,\n rotation: 0,\n colorFront: '#133a41',\n colorBack: '#c2d8b6',\n shape: 3,\n frequency: 0.44,\n amplitude: 0.57,\n spacing: 1.05,\n proportion: 0.75,\n softness: 0.02,\n },\n};\n\nexport const waveRidePreset: WavesPreset = {\n name: 'Ride the wave',\n params: {\n ...defaultPatternSizing,\n scale: 1.7,\n rotation: 0,\n colorFront: '#fdffe6',\n colorBack: '#1f1f1f',\n shape: 2.25,\n frequency: 0.2,\n amplitude: 1,\n spacing: 1.25,\n proportion: 1,\n softness: 0,\n },\n};\n\nexport const wavesPresets: WavesPreset[] = [defaultPreset, groovyPreset, tangledUpPreset, waveRidePreset];\n\nexport const Waves: React.FC<WavesProps> = memo(function WavesImpl({\n // Own props\n colorFront = defaultPreset.params.colorFront,\n colorBack = defaultPreset.params.colorBack,\n shape = defaultPreset.params.shape,\n frequency = defaultPreset.params.frequency,\n amplitude = defaultPreset.params.amplitude,\n spacing = defaultPreset.params.spacing,\n proportion = defaultPreset.params.proportion,\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 offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n\n // Other props\n maxPixelCount = 6016 * 3384, // Higher max resolution for this shader\n ...props\n}: WavesProps) {\n const uniforms = {\n // Own uniforms\n u_colorFront: getShaderColorFromString(colorFront),\n u_colorBack: getShaderColorFromString(colorBack),\n u_shape: shape,\n u_frequency: frequency,\n u_amplitude: amplitude,\n u_spacing: spacing,\n u_proportion: proportion,\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 WavesUniforms;\n\n return <ShaderMount {...props} fragmentShader={wavesFragmentShader} uniforms={uniforms} />;\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paper-design/shaders-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.41",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"type-check": "tsc --project tsconfig.json"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@paper-design/shaders": "0.0.
|
|
27
|
+
"@paper-design/shaders": "0.0.37"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "19.1.0"
|