@paper-design/shaders-react 0.0.44 → 0.0.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +2 -2
- package/dist/shader-mount.d.ts +7 -2
- package/dist/shader-mount.js.map +2 -2
- package/dist/shaders/grain-gradient.js +1 -2
- package/dist/shaders/grain-gradient.js.map +2 -2
- package/dist/shaders/pulsing-border.js +1 -2
- package/dist/shaders/pulsing-border.js.map +2 -2
- package/dist/shaders/smoke-ring.js +1 -2
- package/dist/shaders/smoke-ring.js.map +2 -2
- package/dist/shaders/voronoi.js +1 -2
- package/dist/shaders/voronoi.js.map +2 -2
- package/package.json +2 -2
package/README.md
CHANGED
package/dist/index.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* https://github.com/paper-design/shaders *
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
|
+
"use client";
|
|
6
7
|
import { ShaderMount } from "./shader-mount.js";
|
|
7
8
|
import { MeshGradient, meshGradientPresets } from "./shaders/mesh-gradient.js";
|
|
8
9
|
import { SmokeRing, smokeRingPresets } from "./shaders/smoke-ring.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client';\n\nexport { 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 { StaticMeshGradient, staticMeshGradientPresets } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientProps } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientUniforms, StaticMeshGradientParams } from '@paper-design/shaders';\n\nexport { StaticRadialGradient, staticRadialGradientPresets } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientProps } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientUniforms, StaticRadialGradientParams } from '@paper-design/shaders';\n\nexport { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';\nexport type { PaperShaderElement, 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 staticMeshGradientMeta,\n staticRadialGradientMeta,\n} from '@paper-design/shaders';\n"],
|
|
5
|
+
"mappings": ";;;;;;AAEA,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,oBAAoB,iCAAiC;AAI9D,SAAS,sBAAsB,mCAAmC;AAIlE,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,EACA;AAAA,EACA;AAAA,OACK;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/shader-mount.d.ts
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import { type PaperShaderElement, type ShaderMotionParams } from '@paper-design/shaders';
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images
|
|
4
|
+
*
|
|
5
|
+
* We accept undefined as a convenience for server rendering, when some things may be undefined
|
|
6
|
+
* We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering
|
|
7
|
+
*/
|
|
3
8
|
interface ShaderMountUniformsReact {
|
|
4
|
-
[key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement;
|
|
9
|
+
[key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | undefined;
|
|
5
10
|
}
|
|
6
11
|
export interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {
|
|
7
12
|
ref?: React.Ref<PaperShaderElement>;
|
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 PaperShaderElement,\n type ShaderMotionParams,\n type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\n\n
|
|
5
|
-
"mappings": ";;;;;;AAEA,SAAS,WAAW,QAAQ,YAAY,gBAAgB;AACxD;AAAA,EACE,eAAe;AAAA,OAIV;AACP,SAAS,oBAAoB;
|
|
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/**\n * React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images\n *\n * We accept undefined as a convenience for server rendering, when some things may be undefined\n * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering\n */\ninterface ShaderMountUniformsReact {\n [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | undefined;\n}\n\nexport interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {\n ref?: React.Ref<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.Ref<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
|
}
|
|
@@ -134,7 +134,6 @@ const GrainGradient = memo(function GrainGradientImpl({
|
|
|
134
134
|
worldHeight = defaultPreset.params.worldHeight,
|
|
135
135
|
...props
|
|
136
136
|
}) {
|
|
137
|
-
const noiseTexture = typeof window !== "undefined" && { u_noiseTexture: getShaderNoiseTexture() };
|
|
138
137
|
const uniforms = {
|
|
139
138
|
// Own uniforms
|
|
140
139
|
u_colorBack: getShaderColorFromString(colorBack),
|
|
@@ -144,7 +143,7 @@ const GrainGradient = memo(function GrainGradientImpl({
|
|
|
144
143
|
u_intensity: intensity,
|
|
145
144
|
u_noise: noise,
|
|
146
145
|
u_shape: GrainGradientShapes[shape],
|
|
147
|
-
|
|
146
|
+
u_noiseTexture: getShaderNoiseTexture(),
|
|
148
147
|
// Sizing uniforms
|
|
149
148
|
u_fit: ShaderFitOptions[fit],
|
|
150
149
|
u_scale: scale,
|
|
@@ -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 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\n// export 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', '#33cc33'],\n softness: 1,\n intensity: 1,\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 defaultPreset: GrainGradientPreset = {\n name: 'Default',\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 defaultPreset,\n // cornersPreset,\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
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;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\n// export 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', '#33cc33'],\n softness: 1,\n intensity: 1,\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 defaultPreset: GrainGradientPreset = {\n name: 'Default',\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 defaultPreset,\n // cornersPreset,\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 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 u_noiseTexture: getShaderNoiseTexture(),\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies 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
|
}
|
|
@@ -132,7 +132,6 @@ const PulsingBorder = memo(function PulsingBorderImpl({
|
|
|
132
132
|
worldHeight = defaultPreset.params.worldHeight,
|
|
133
133
|
...props
|
|
134
134
|
}) {
|
|
135
|
-
const noiseTexture = typeof window !== "undefined" && { u_noiseTexture: getShaderNoiseTexture(0) };
|
|
136
135
|
const uniforms = {
|
|
137
136
|
// Own uniforms
|
|
138
137
|
u_colorBack: getShaderColorFromString(colorBack),
|
|
@@ -148,7 +147,7 @@ const PulsingBorder = memo(function PulsingBorderImpl({
|
|
|
148
147
|
u_pulse: pulse,
|
|
149
148
|
u_smoke: smoke,
|
|
150
149
|
u_smokeSize: smokeSize,
|
|
151
|
-
|
|
150
|
+
u_noiseTexture: getShaderNoiseTexture(),
|
|
152
151
|
// Sizing uniforms
|
|
153
152
|
u_fit: ShaderFitOptions[fit],
|
|
154
153
|
u_rotation: rotation,
|
|
@@ -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.55,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#f2244f', '#4da6e6', '#379590'],\n roundness: 0.35,\n thickness: 0.05,\n softness: 0.75,\n intensity: 0.3,\n bloom: 0.5,\n spots: 3,\n spotSize: 0.3,\n pulse: 0,\n smoke: 0.35,\n smokeSize: 0.63,\n },\n};\n\nexport const circlePreset: PulsingBorderPreset = {\n name: 'Circle',\n params: {\n ...defaultObjectSizing,\n worldWidth: 400,\n worldHeight: 400,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#110222',\n colors: ['#ffdd33', '#ff0000', '#00ffff'],\n roundness: 1,\n thickness: 0.4,\n softness: 1,\n intensity: 0.8,\n bloom: 0.8,\n spots: 2,\n spotSize: 0.45,\n pulse: 0,\n smoke: 0.25,\n smokeSize: 0.62,\n },\n};\n\nexport const northernLightsPreset: PulsingBorderPreset = {\n name: 'Northern lights',\n params: {\n ...defaultObjectSizing,\n speed: 0.18,\n frame: 0,\n colors: ['#3426f2', '#156ba8', '#126964', '#0affba', '#4733cc'],\n colorBack: '#002942',\n roundness: 0,\n thickness: 1,\n softness: 1,\n intensity: 0,\n bloom: 0.5,\n spots: 4,\n spotSize: 0,\n pulse: 0,\n smoke: 0.7,\n smokeSize: 0.7,\n },\n};\n\nexport const solidLinePreset: PulsingBorderPreset = {\n name: 'Solid line',\n params: {\n ...defaultObjectSizing,\n speed: 2,\n frame: 0,\n colors: ['#759717', '#ff0073', '#00ffb3'],\n colorBack: '#000000',\n roundness: 0.05,\n thickness: 0.03,\n softness: 0.0,\n intensity: 0.0,\n bloom: 0.15,\n spots: 4,\n spotSize: 0.28,\n pulse: 0.0,\n smoke: 0,\n smokeSize: 0.63,\n },\n};\n\nexport const pulsingBorderPresets: PulsingBorderPreset[] = [\n defaultPreset,\n circlePreset,\n northernLightsPreset,\n solidLinePreset,\n];\n\nexport const PulsingBorder: React.FC<PulsingBorderProps> = memo(function PulsingBorderImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n colorBack = defaultPreset.params.colorBack,\n roundness = defaultPreset.params.roundness,\n thickness = defaultPreset.params.thickness,\n softness = defaultPreset.params.softness,\n bloom = defaultPreset.params.bloom,\n intensity = defaultPreset.params.intensity,\n spots = defaultPreset.params.spots,\n spotSize = defaultPreset.params.spotSize,\n pulse = defaultPreset.params.pulse,\n smoke = defaultPreset.params.smoke,\n smokeSize = defaultPreset.params.smokeSize,\n\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
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n pulsingBorderFragmentShader,\n ShaderFitOptions,\n type PulsingBorderParams,\n type PulsingBorderUniforms,\n type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface PulsingBorderProps extends ShaderComponentProps, PulsingBorderParams {}\n\ntype PulsingBorderPreset = ShaderPreset<PulsingBorderParams>;\n\nexport const defaultPreset: PulsingBorderPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.55,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colors: ['#f2244f', '#4da6e6', '#379590'],\n roundness: 0.35,\n thickness: 0.05,\n softness: 0.75,\n intensity: 0.3,\n bloom: 0.5,\n spots: 3,\n spotSize: 0.3,\n pulse: 0,\n smoke: 0.35,\n smokeSize: 0.63,\n },\n};\n\nexport const circlePreset: PulsingBorderPreset = {\n name: 'Circle',\n params: {\n ...defaultObjectSizing,\n worldWidth: 400,\n worldHeight: 400,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#110222',\n colors: ['#ffdd33', '#ff0000', '#00ffff'],\n roundness: 1,\n thickness: 0.4,\n softness: 1,\n intensity: 0.8,\n bloom: 0.8,\n spots: 2,\n spotSize: 0.45,\n pulse: 0,\n smoke: 0.25,\n smokeSize: 0.62,\n },\n};\n\nexport const northernLightsPreset: PulsingBorderPreset = {\n name: 'Northern lights',\n params: {\n ...defaultObjectSizing,\n speed: 0.18,\n frame: 0,\n colors: ['#3426f2', '#156ba8', '#126964', '#0affba', '#4733cc'],\n colorBack: '#002942',\n roundness: 0,\n thickness: 1,\n softness: 1,\n intensity: 0,\n bloom: 0.5,\n spots: 4,\n spotSize: 0,\n pulse: 0,\n smoke: 0.7,\n smokeSize: 0.7,\n },\n};\n\nexport const solidLinePreset: PulsingBorderPreset = {\n name: 'Solid line',\n params: {\n ...defaultObjectSizing,\n speed: 2,\n frame: 0,\n colors: ['#759717', '#ff0073', '#00ffb3'],\n colorBack: '#000000',\n roundness: 0.05,\n thickness: 0.03,\n softness: 0.0,\n intensity: 0.0,\n bloom: 0.15,\n spots: 4,\n spotSize: 0.28,\n pulse: 0.0,\n smoke: 0,\n smokeSize: 0.63,\n },\n};\n\nexport const pulsingBorderPresets: PulsingBorderPreset[] = [\n defaultPreset,\n circlePreset,\n northernLightsPreset,\n solidLinePreset,\n];\n\nexport const PulsingBorder: React.FC<PulsingBorderProps> = memo(function PulsingBorderImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n colorBack = defaultPreset.params.colorBack,\n roundness = defaultPreset.params.roundness,\n thickness = defaultPreset.params.thickness,\n softness = defaultPreset.params.softness,\n bloom = defaultPreset.params.bloom,\n intensity = defaultPreset.params.intensity,\n spots = defaultPreset.params.spots,\n spotSize = defaultPreset.params.spotSize,\n pulse = defaultPreset.params.pulse,\n smoke = defaultPreset.params.smoke,\n smokeSize = defaultPreset.params.smokeSize,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: PulsingBorderProps) {\n const uniforms = {\n // Own uniforms\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_roundness: roundness,\n u_thickness: thickness,\n u_softness: softness,\n u_intensity: intensity,\n u_bloom: bloom,\n u_spots: spots,\n u_spotSize: spotSize,\n u_pulse: pulse,\n u_smoke: smoke,\n u_smokeSize: smokeSize,\n u_noiseTexture: getShaderNoiseTexture(),\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_rotation: rotation,\n u_scale: scale,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies PulsingBorderUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={pulsingBorderFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -99,7 +99,6 @@ const SmokeRing = memo(function SmokeRingImpl({
|
|
|
99
99
|
worldHeight = defaultPreset.params.worldHeight,
|
|
100
100
|
...props
|
|
101
101
|
}) {
|
|
102
|
-
const noiseTexture = typeof window !== "undefined" && { u_noiseTexture: getShaderNoiseTexture() };
|
|
103
102
|
const uniforms = {
|
|
104
103
|
// Own uniforms
|
|
105
104
|
u_colorBack: getShaderColorFromString(colorBack),
|
|
@@ -110,7 +109,7 @@ const SmokeRing = memo(function SmokeRingImpl({
|
|
|
110
109
|
u_radius: radius,
|
|
111
110
|
u_innerShape: innerShape,
|
|
112
111
|
u_noiseIterations: noiseIterations,
|
|
113
|
-
|
|
112
|
+
u_noiseTexture: getShaderNoiseTexture(),
|
|
114
113
|
// Sizing uniforms
|
|
115
114
|
u_fit: ShaderFitOptions[fit],
|
|
116
115
|
u_scale: scale,
|
|
@@ -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: '#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.85,\n speed: 0.5,\n scale: 0.8,\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
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n defaultObjectSizing,\n getShaderColorFromString,\n getShaderNoiseTexture,\n smokeRingFragmentShader,\n ShaderFitOptions,\n type ShaderPreset,\n type SmokeRingParams,\n type SmokeRingUniforms,\n} from '@paper-design/shaders';\n\nexport interface SmokeRingProps extends ShaderComponentProps, SmokeRingParams {}\n\ntype SmokeRingPreset = ShaderPreset<SmokeRingParams>;\n\nexport const defaultPreset: SmokeRingPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n speed: 0.4,\n frame: 0,\n colorBack: '#ffffff',\n colors: ['#136c5e', '#0f0224'],\n noiseScale: 5,\n noiseIterations: 10,\n radius: 0.5,\n thickness: 0.25,\n innerShape: 1.2,\n },\n};\n\nexport const poisonPreset: SmokeRingPreset = {\n name: 'Poison',\n params: {\n ...defaultObjectSizing,\n speed: 1,\n frame: 0,\n colorBack: '#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.85,\n speed: 0.5,\n scale: 0.8,\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 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 u_noiseTexture: getShaderNoiseTexture(),\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies 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/voronoi.js
CHANGED
|
@@ -101,7 +101,6 @@ const Voronoi = memo(function VoronoiImpl({
|
|
|
101
101
|
worldHeight = defaultPreset.params.worldHeight,
|
|
102
102
|
...props
|
|
103
103
|
}) {
|
|
104
|
-
const noiseTexture = typeof window !== "undefined" && { u_noiseTexture: getShaderNoiseTexture() };
|
|
105
104
|
const uniforms = {
|
|
106
105
|
// Own uniforms
|
|
107
106
|
u_colors: colors.map(getShaderColorFromString),
|
|
@@ -112,7 +111,7 @@ const Voronoi = memo(function VoronoiImpl({
|
|
|
112
111
|
u_distortion: distortion,
|
|
113
112
|
u_gap: gap,
|
|
114
113
|
u_glow: glow,
|
|
115
|
-
|
|
114
|
+
u_noiseTexture: getShaderNoiseTexture(),
|
|
116
115
|
// Sizing uniforms
|
|
117
116
|
u_fit: ShaderFitOptions[fit],
|
|
118
117
|
u_scale: scale,
|
|
@@ -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: 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: '#000000',\n distortion: 0.5,\n gap: 0.03,\n glow: 0.8,\n },\n};\n\nexport const bubblesPreset: VoronoiPreset = {\n name: 'Bubbles',\n params: {\n ...defaultPatternSizing,\n scale: 0.75,\n speed: 0.5,\n frame: 0,\n colors: ['#83c9fb'],\n stepsPerColor: 1,\n colorGlow: '#ffffff',\n colorGap: '#ffffff',\n distortion: 0.4,\n gap: 0,\n glow: 1,\n },\n};\n\nexport const lightsPreset: VoronoiPreset = {\n name: 'Lights',\n params: {\n ...defaultPatternSizing,\n scale: 3.3,\n speed: 0.5,\n frame: 0,\n colors: ['#fffffffc', '#bbff00', '#00ffff'],\n colorGlow: '#ff00d0',\n colorGap: '#ff00d0',\n stepsPerColor: 2,\n distortion: 0.38,\n gap: 0.0,\n glow: 1.0,\n },\n};\n\nexport const voronoiPresets: VoronoiPreset[] = [defaultPreset, lightsPreset, cellsPreset, bubblesPreset];\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
|
|
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: '#000000',\n distortion: 0.5,\n gap: 0.03,\n glow: 0.8,\n },\n};\n\nexport const bubblesPreset: VoronoiPreset = {\n name: 'Bubbles',\n params: {\n ...defaultPatternSizing,\n scale: 0.75,\n speed: 0.5,\n frame: 0,\n colors: ['#83c9fb'],\n stepsPerColor: 1,\n colorGlow: '#ffffff',\n colorGap: '#ffffff',\n distortion: 0.4,\n gap: 0,\n glow: 1,\n },\n};\n\nexport const lightsPreset: VoronoiPreset = {\n name: 'Lights',\n params: {\n ...defaultPatternSizing,\n scale: 3.3,\n speed: 0.5,\n frame: 0,\n colors: ['#fffffffc', '#bbff00', '#00ffff'],\n colorGlow: '#ff00d0',\n colorGap: '#ff00d0',\n stepsPerColor: 2,\n distortion: 0.38,\n gap: 0.0,\n glow: 1.0,\n },\n};\n\nexport const voronoiPresets: VoronoiPreset[] = [defaultPreset, lightsPreset, cellsPreset, bubblesPreset];\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 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 u_noiseTexture: getShaderNoiseTexture(),\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies VoronoiUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={voronoiFragmentShader} uniforms={uniforms} />\n );\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.45",
|
|
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.45"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "19.1.0"
|