From c17cee659f3e7326e7e1682cf8e3e822279cddf5 Mon Sep 17 00:00:00 2001 From: verekia <522007+verekia@users.noreply.github.com> Date: Thu, 2 Oct 2025 15:12:08 +0200 Subject: [PATCH 1/3] chore: move neuro noise and common def files to vanilla package --- docs/src/app/(shaders)/neuro-noise/page.tsx | 37 ++++++++++-- docs/src/components/shader-container.tsx | 6 +- docs/src/components/shader-details.tsx | 4 +- docs/src/helpers/url-serializer.ts | 2 +- docs/src/helpers/use-url-params.ts | 2 +- docs/src/shader-defs/color-panels-def.ts | 3 +- docs/src/shader-defs/dithering-def.ts | 3 +- docs/src/shader-defs/dot-grid-def.ts | 3 +- docs/src/shader-defs/dot-orbit-def.ts | 3 +- docs/src/shader-defs/fluted-glass-def.ts | 3 +- docs/src/shader-defs/god-rays-def.ts | 3 +- docs/src/shader-defs/grain-gradient-def.ts | 3 +- docs/src/shader-defs/heatmap-def.ts | 3 +- docs/src/shader-defs/image-dithering-def.ts | 3 +- docs/src/shader-defs/liquid-metal-def.ts | 3 +- docs/src/shader-defs/mesh-gradient-def.ts | 3 +- docs/src/shader-defs/metaballs-def.ts | 3 +- docs/src/shader-defs/paper-texture-def.ts | 3 +- docs/src/shader-defs/perlin-noise-def.ts | 3 +- docs/src/shader-defs/pulsing-border-def.ts | 3 +- docs/src/shader-defs/shader-defs.ts | 4 +- docs/src/shader-defs/simplex-noise-def.ts | 3 +- docs/src/shader-defs/smoke-ring-def.ts | 3 +- docs/src/shader-defs/spiral-def.ts | 3 +- .../shader-defs/static-mesh-gradient-def.ts | 3 +- .../shader-defs/static-radial-gradient-def.ts | 3 +- docs/src/shader-defs/swirl-def.ts | 3 +- docs/src/shader-defs/voronoi-def.ts | 3 +- docs/src/shader-defs/warp-def.ts | 3 +- docs/src/shader-defs/water-def.ts | 3 +- docs/src/shader-defs/waves-def.ts | 3 +- .../shaders/src/defs}/common-param-def.ts | 60 +++++++++---------- .../shaders/src/defs}/neuro-noise-def.ts | 12 +--- .../shaders/src/defs}/shader-def-types.ts | 0 packages/shaders/src/index.ts | 4 ++ 35 files changed, 101 insertions(+), 105 deletions(-) rename {docs/src/shader-defs => packages/shaders/src/defs}/common-param-def.ts (74%) rename {docs/src/shader-defs => packages/shaders/src/defs}/neuro-noise-def.ts (67%) rename {docs/src/shader-defs => packages/shaders/src/defs}/shader-def-types.ts (100%) diff --git a/docs/src/app/(shaders)/neuro-noise/page.tsx b/docs/src/app/(shaders)/neuro-noise/page.tsx index 7f80a5f9..2cff0ffa 100644 --- a/docs/src/app/(shaders)/neuro-noise/page.tsx +++ b/docs/src/app/(shaders)/neuro-noise/page.tsx @@ -7,7 +7,7 @@ import { usePresetHighlight } from '@/helpers/use-preset-highlight'; import { cleanUpLevaParams } from '@/helpers/clean-up-leva-params'; import { toHsla } from '@/helpers/color-utils'; import { ShaderDetails } from '@/components/shader-details'; -import { neuroNoiseDef } from '@/shader-defs/neuro-noise-def'; +import { neuroNoiseDef } from '@paper-design/shaders'; import { ShaderContainer } from '@/components/shader-container'; import { useUrlParams } from '@/helpers/use-url-params'; @@ -26,11 +26,36 @@ const NeuroNoiseWithControls = () => { colorFront: { value: toHsla(defaults.colorFront), order: 100 }, colorMid: { value: toHsla(defaults.colorMid), order: 101 }, colorBack: { value: toHsla(defaults.colorBack), order: 102 }, - brightness: { value: defaults.brightness, min: 0, max: 1, order: 200 }, - contrast: { value: defaults.contrast, min: 0, max: 1, order: 201 }, - speed: { value: defaults.speed, min: 0, max: 2, order: 300 }, - scale: { value: defaults.scale, min: 0.01, max: 4, order: 301 }, - rotation: { value: defaults.rotation, min: 0, max: 360, order: 302 }, + brightness: { + value: defaults.brightness, + min: neuroNoiseDef.params.find((p) => p.name === 'brightness')?.min, + max: neuroNoiseDef.params.find((p) => p.name === 'brightness')?.max, + order: 200, + }, + contrast: { + value: defaults.contrast, + min: neuroNoiseDef.params.find((p) => p.name === 'contrast')?.min, + max: neuroNoiseDef.params.find((p) => p.name === 'contrast')?.max, + order: 201, + }, + speed: { + value: defaults.speed, + min: neuroNoiseDef.params.find((p) => p.name === 'speed')?.min, + max: neuroNoiseDef.params.find((p) => p.name === 'speed')?.max, + order: 300, + }, + scale: { + value: defaults.scale, + min: neuroNoiseDef.params.find((p) => p.name === 'scale')?.min, + max: neuroNoiseDef.params.find((p) => p.name === 'scale')?.max, + order: 301, + }, + rotation: { + value: defaults.rotation, + min: neuroNoiseDef.params.find((p) => p.name === 'rotation')?.min, + max: neuroNoiseDef.params.find((p) => p.name === 'rotation')?.max, + order: 302, + }, Presets: folder(presets, { order: -1 }), }; }); diff --git a/docs/src/components/shader-container.tsx b/docs/src/components/shader-container.tsx index 4a52ade7..e088d699 100644 --- a/docs/src/components/shader-container.tsx +++ b/docs/src/components/shader-container.tsx @@ -1,9 +1,9 @@ 'use client'; -import { SerializableValue, serializeParams } from '@/helpers/url-serializer'; -import { ShaderDef } from '@/shader-defs/shader-def-types'; +import type { ShaderDef } from '@paper-design/shaders'; +import { type SerializableValue, serializeParams } from '@/helpers/url-serializer'; import { Leva } from 'leva'; import { CopyButton } from './copy-button'; -import { useCallback, useEffect, useState } from 'react'; +import { useState } from 'react'; export function ShaderContainer({ children, diff --git a/docs/src/components/shader-details.tsx b/docs/src/components/shader-details.tsx index 27da265f..b77e65e6 100644 --- a/docs/src/components/shader-details.tsx +++ b/docs/src/components/shader-details.tsx @@ -1,10 +1,10 @@ 'use client'; import type { ReactNode } from 'react'; -import { ShaderDef, ParamOption, ParamDef } from '../shader-defs/shader-def-types'; +import { ShaderDef, ParamOption, ParamDef } from '@paper-design/shaders'; import { CopyButton } from './copy-button'; import { hslToHex } from '@/helpers/color-utils'; -import { commonParams } from '@/shader-defs/common-param-def'; +import { commonParams } from '@paper-design/shaders'; const formatJsxAttribute = (key: string, value: unknown): string => { if (value === true) { diff --git a/docs/src/helpers/url-serializer.ts b/docs/src/helpers/url-serializer.ts index 50d18546..d5c43251 100644 --- a/docs/src/helpers/url-serializer.ts +++ b/docs/src/helpers/url-serializer.ts @@ -1,5 +1,5 @@ import { hslToHex, hexToHsl } from './color-utils'; -import type { ParamDef } from '../shader-defs/shader-def-types'; +import type { ParamDef } from '@paper-design/shaders'; export type SerializableValue = string | number | boolean | string[] | number[]; diff --git a/docs/src/helpers/use-url-params.ts b/docs/src/helpers/use-url-params.ts index 82451a2b..ded0954b 100644 --- a/docs/src/helpers/use-url-params.ts +++ b/docs/src/helpers/use-url-params.ts @@ -1,9 +1,9 @@ 'use client'; +import type { ShaderDef } from '@paper-design/shaders'; import { useEffect } from 'react'; import { deserializeParams } from './url-serializer'; import { setParamsSafe } from './use-reset-leva-params'; -import type { ShaderDef } from '../shader-defs/shader-def-types'; export const useUrlParams = ( params: any, diff --git a/docs/src/shader-defs/color-panels-def.ts b/docs/src/shader-defs/color-panels-def.ts index fddd26f2..a8a75e22 100644 --- a/docs/src/shader-defs/color-panels-def.ts +++ b/docs/src/shader-defs/color-panels-def.ts @@ -1,6 +1,5 @@ import { colorPanelsPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = colorPanelsPresets[0].params; diff --git a/docs/src/shader-defs/dithering-def.ts b/docs/src/shader-defs/dithering-def.ts index bb42091c..eddcafb4 100644 --- a/docs/src/shader-defs/dithering-def.ts +++ b/docs/src/shader-defs/dithering-def.ts @@ -1,6 +1,5 @@ import { ditheringPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = ditheringPresets[0].params; diff --git a/docs/src/shader-defs/dot-grid-def.ts b/docs/src/shader-defs/dot-grid-def.ts index 1cb7ec22..163ae7f0 100644 --- a/docs/src/shader-defs/dot-grid-def.ts +++ b/docs/src/shader-defs/dot-grid-def.ts @@ -1,6 +1,5 @@ import { dotGridPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { staticCommonParams } from './common-param-def'; +import { staticCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = dotGridPresets[0].params; diff --git a/docs/src/shader-defs/dot-orbit-def.ts b/docs/src/shader-defs/dot-orbit-def.ts index dd8ec33b..4f27bf58 100644 --- a/docs/src/shader-defs/dot-orbit-def.ts +++ b/docs/src/shader-defs/dot-orbit-def.ts @@ -1,6 +1,5 @@ import { dotOrbitPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = dotOrbitPresets[0].params; diff --git a/docs/src/shader-defs/fluted-glass-def.ts b/docs/src/shader-defs/fluted-glass-def.ts index c68dc5b9..1128b797 100644 --- a/docs/src/shader-defs/fluted-glass-def.ts +++ b/docs/src/shader-defs/fluted-glass-def.ts @@ -1,6 +1,5 @@ import { flutedGlassPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { staticCommonParams } from './common-param-def'; +import { staticCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = flutedGlassPresets[0].params; diff --git a/docs/src/shader-defs/god-rays-def.ts b/docs/src/shader-defs/god-rays-def.ts index aa037ef3..791be731 100644 --- a/docs/src/shader-defs/god-rays-def.ts +++ b/docs/src/shader-defs/god-rays-def.ts @@ -1,6 +1,5 @@ import { godRaysPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = godRaysPresets[0].params; diff --git a/docs/src/shader-defs/grain-gradient-def.ts b/docs/src/shader-defs/grain-gradient-def.ts index 9376fba1..564876e8 100644 --- a/docs/src/shader-defs/grain-gradient-def.ts +++ b/docs/src/shader-defs/grain-gradient-def.ts @@ -1,6 +1,5 @@ import { grainGradientPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = grainGradientPresets[0].params; diff --git a/docs/src/shader-defs/heatmap-def.ts b/docs/src/shader-defs/heatmap-def.ts index 13f18f46..b62c391d 100644 --- a/docs/src/shader-defs/heatmap-def.ts +++ b/docs/src/shader-defs/heatmap-def.ts @@ -1,6 +1,5 @@ import { heatmapPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = heatmapPresets[0].params; diff --git a/docs/src/shader-defs/image-dithering-def.ts b/docs/src/shader-defs/image-dithering-def.ts index 7439d081..e6865a89 100644 --- a/docs/src/shader-defs/image-dithering-def.ts +++ b/docs/src/shader-defs/image-dithering-def.ts @@ -1,6 +1,5 @@ import { imageDitheringPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { staticCommonParams } from './common-param-def'; +import { staticCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = imageDitheringPresets[0].params; diff --git a/docs/src/shader-defs/liquid-metal-def.ts b/docs/src/shader-defs/liquid-metal-def.ts index 4c77f1fc..8ebb526b 100644 --- a/docs/src/shader-defs/liquid-metal-def.ts +++ b/docs/src/shader-defs/liquid-metal-def.ts @@ -1,6 +1,5 @@ import { liquidMetalPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = liquidMetalPresets[0].params; diff --git a/docs/src/shader-defs/mesh-gradient-def.ts b/docs/src/shader-defs/mesh-gradient-def.ts index 692fd0b1..45c44a44 100644 --- a/docs/src/shader-defs/mesh-gradient-def.ts +++ b/docs/src/shader-defs/mesh-gradient-def.ts @@ -1,6 +1,5 @@ import { meshGradientPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = meshGradientPresets[0].params; diff --git a/docs/src/shader-defs/metaballs-def.ts b/docs/src/shader-defs/metaballs-def.ts index 4a8c7b61..cf3a909f 100644 --- a/docs/src/shader-defs/metaballs-def.ts +++ b/docs/src/shader-defs/metaballs-def.ts @@ -1,6 +1,5 @@ import { metaballsPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = metaballsPresets[0].params; diff --git a/docs/src/shader-defs/paper-texture-def.ts b/docs/src/shader-defs/paper-texture-def.ts index fac6c2a7..be972420 100644 --- a/docs/src/shader-defs/paper-texture-def.ts +++ b/docs/src/shader-defs/paper-texture-def.ts @@ -1,6 +1,5 @@ import { paperTexturePresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { staticCommonParams } from './common-param-def'; +import { staticCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = paperTexturePresets[0].params; diff --git a/docs/src/shader-defs/perlin-noise-def.ts b/docs/src/shader-defs/perlin-noise-def.ts index a5fe4e02..188c9b9e 100644 --- a/docs/src/shader-defs/perlin-noise-def.ts +++ b/docs/src/shader-defs/perlin-noise-def.ts @@ -1,6 +1,5 @@ import { perlinNoisePresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = perlinNoisePresets[0].params; diff --git a/docs/src/shader-defs/pulsing-border-def.ts b/docs/src/shader-defs/pulsing-border-def.ts index e3927852..0cb8464a 100644 --- a/docs/src/shader-defs/pulsing-border-def.ts +++ b/docs/src/shader-defs/pulsing-border-def.ts @@ -1,6 +1,5 @@ import { pulsingBorderPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = pulsingBorderPresets[0].params; diff --git a/docs/src/shader-defs/shader-defs.ts b/docs/src/shader-defs/shader-defs.ts index 6e65ed94..50e74521 100644 --- a/docs/src/shader-defs/shader-defs.ts +++ b/docs/src/shader-defs/shader-defs.ts @@ -1,4 +1,4 @@ -import type { ShaderDef } from './shader-def-types'; +import type { ShaderDef } from '@paper-design/shaders'; import { colorPanelsDef } from './color-panels-def'; import { ditheringDef } from './dithering-def'; @@ -11,7 +11,7 @@ import { imageDitheringDef } from './image-dithering-def'; import { liquidMetalDef } from './liquid-metal-def'; import { meshGradientDef } from './mesh-gradient-def'; import { metaballsDef } from './metaballs-def'; -import { neuroNoiseDef } from './neuro-noise-def'; +import { neuroNoiseDef } from '@paper-design/shaders'; import { paperTextureDef } from './paper-texture-def'; import { perlinNoiseDef } from './perlin-noise-def'; import { pulsingBorderDef } from './pulsing-border-def'; diff --git a/docs/src/shader-defs/simplex-noise-def.ts b/docs/src/shader-defs/simplex-noise-def.ts index 8a0f0f67..8e56a797 100644 --- a/docs/src/shader-defs/simplex-noise-def.ts +++ b/docs/src/shader-defs/simplex-noise-def.ts @@ -1,6 +1,5 @@ import { simplexNoisePresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = simplexNoisePresets[0].params; diff --git a/docs/src/shader-defs/smoke-ring-def.ts b/docs/src/shader-defs/smoke-ring-def.ts index 9fe78365..c741e0b9 100644 --- a/docs/src/shader-defs/smoke-ring-def.ts +++ b/docs/src/shader-defs/smoke-ring-def.ts @@ -1,6 +1,5 @@ import { smokeRingPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = smokeRingPresets[0].params; diff --git a/docs/src/shader-defs/spiral-def.ts b/docs/src/shader-defs/spiral-def.ts index c7a04059..a1d13fde 100644 --- a/docs/src/shader-defs/spiral-def.ts +++ b/docs/src/shader-defs/spiral-def.ts @@ -1,6 +1,5 @@ import { spiralPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = spiralPresets[0].params; diff --git a/docs/src/shader-defs/static-mesh-gradient-def.ts b/docs/src/shader-defs/static-mesh-gradient-def.ts index 1b3354d1..e752c391 100644 --- a/docs/src/shader-defs/static-mesh-gradient-def.ts +++ b/docs/src/shader-defs/static-mesh-gradient-def.ts @@ -1,6 +1,5 @@ import { staticMeshGradientPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { staticCommonParams } from './common-param-def'; +import { staticCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = staticMeshGradientPresets[0].params; diff --git a/docs/src/shader-defs/static-radial-gradient-def.ts b/docs/src/shader-defs/static-radial-gradient-def.ts index e38bb852..4780ec15 100644 --- a/docs/src/shader-defs/static-radial-gradient-def.ts +++ b/docs/src/shader-defs/static-radial-gradient-def.ts @@ -1,6 +1,5 @@ import { staticRadialGradientPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { staticCommonParams } from './common-param-def'; +import { staticCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = staticRadialGradientPresets[0].params; diff --git a/docs/src/shader-defs/swirl-def.ts b/docs/src/shader-defs/swirl-def.ts index a0b7b8f5..0280450b 100644 --- a/docs/src/shader-defs/swirl-def.ts +++ b/docs/src/shader-defs/swirl-def.ts @@ -1,6 +1,5 @@ import { swirlPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = swirlPresets[0].params; diff --git a/docs/src/shader-defs/voronoi-def.ts b/docs/src/shader-defs/voronoi-def.ts index ab445e37..3f488f96 100644 --- a/docs/src/shader-defs/voronoi-def.ts +++ b/docs/src/shader-defs/voronoi-def.ts @@ -1,6 +1,5 @@ import { voronoiPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = voronoiPresets[0].params; diff --git a/docs/src/shader-defs/warp-def.ts b/docs/src/shader-defs/warp-def.ts index e7742c6f..ba72b8e4 100644 --- a/docs/src/shader-defs/warp-def.ts +++ b/docs/src/shader-defs/warp-def.ts @@ -1,6 +1,5 @@ import { warpPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = warpPresets[0].params; diff --git a/docs/src/shader-defs/water-def.ts b/docs/src/shader-defs/water-def.ts index 72ef632f..a0cbb582 100644 --- a/docs/src/shader-defs/water-def.ts +++ b/docs/src/shader-defs/water-def.ts @@ -1,6 +1,5 @@ import { waterPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; +import { animatedCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = waterPresets[0].params; diff --git a/docs/src/shader-defs/waves-def.ts b/docs/src/shader-defs/waves-def.ts index 138f2505..e65219ef 100644 --- a/docs/src/shader-defs/waves-def.ts +++ b/docs/src/shader-defs/waves-def.ts @@ -1,6 +1,5 @@ import { wavesPresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { staticCommonParams } from './common-param-def'; +import { staticCommonParams, type ShaderDef } from '@paper-design/shaders'; const defaultParams = wavesPresets[0].params; diff --git a/docs/src/shader-defs/common-param-def.ts b/packages/shaders/src/defs/common-param-def.ts similarity index 74% rename from docs/src/shader-defs/common-param-def.ts rename to packages/shaders/src/defs/common-param-def.ts index 40c8a090..46e7745b 100644 --- a/docs/src/shader-defs/common-param-def.ts +++ b/packages/shaders/src/defs/common-param-def.ts @@ -1,4 +1,4 @@ -import type { ParamDef } from './shader-def-types'; +import type { ParamDef } from './shader-def-types.js'; type CommonParamDef = Omit; @@ -91,38 +91,38 @@ export const commonParams: Record = { type: 'number', description: 'Maximum pixel count that the shader may process', }, -}; +} as const; export const animatedCommonParams: CommonParamDef[] = [ - commonParams.speed, - commonParams.frame, - commonParams.scale, - commonParams.rotation, - commonParams.offsetX, - commonParams.offsetY, - commonParams.width, - commonParams.height, - commonParams.fit, - commonParams.worldWidth, - commonParams.worldHeight, - commonParams.originX, - commonParams.originY, - commonParams.minPixelRatio, - commonParams.maxPixelCount, + commonParams.speed!, + commonParams.frame!, + commonParams.scale!, + commonParams.rotation!, + commonParams.offsetX!, + commonParams.offsetY!, + commonParams.width!, + commonParams.height!, + commonParams.fit!, + commonParams.worldWidth!, + commonParams.worldHeight!, + commonParams.originX!, + commonParams.originY!, + commonParams.minPixelRatio!, + commonParams.maxPixelCount!, ]; export const staticCommonParams: CommonParamDef[] = [ - commonParams.scale, - commonParams.rotation, - commonParams.offsetX, - commonParams.offsetY, - commonParams.width, - commonParams.height, - commonParams.fit, - commonParams.worldWidth, - commonParams.worldHeight, - commonParams.originX, - commonParams.originY, - commonParams.minPixelRatio, - commonParams.maxPixelCount, + commonParams.scale!, + commonParams.rotation!, + commonParams.offsetX!, + commonParams.offsetY!, + commonParams.width!, + commonParams.height!, + commonParams.fit!, + commonParams.worldWidth!, + commonParams.worldHeight!, + commonParams.originX!, + commonParams.originY!, + commonParams.minPixelRatio!, + commonParams.maxPixelCount!, ]; diff --git a/docs/src/shader-defs/neuro-noise-def.ts b/packages/shaders/src/defs/neuro-noise-def.ts similarity index 67% rename from docs/src/shader-defs/neuro-noise-def.ts rename to packages/shaders/src/defs/neuro-noise-def.ts index 4de477f3..76ffb84f 100644 --- a/docs/src/shader-defs/neuro-noise-def.ts +++ b/packages/shaders/src/defs/neuro-noise-def.ts @@ -1,8 +1,5 @@ -import { neuroNoisePresets } from '@paper-design/shaders-react'; -import type { ShaderDef } from './shader-def-types'; -import { animatedCommonParams } from './common-param-def'; - -const defaultParams = neuroNoisePresets[0].params; +import type { ShaderDef } from './shader-def-types.js'; +import { animatedCommonParams } from './common-param-def.js'; export const neuroNoiseDef: ShaderDef = { name: 'Neuro Noise', @@ -12,21 +9,18 @@ export const neuroNoiseDef: ShaderDef = { { name: 'colorFront', type: 'string', - defaultValue: defaultParams.colorFront, isColor: true, description: 'Graphics highlight color', }, { name: 'colorMid', type: 'string', - defaultValue: defaultParams.colorMid, isColor: true, description: 'Graphics main color', }, { name: 'colorBack', type: 'string', - defaultValue: defaultParams.colorBack, isColor: true, description: 'Background color', }, @@ -35,7 +29,6 @@ export const neuroNoiseDef: ShaderDef = { type: 'number', min: 0, max: 1, - defaultValue: defaultParams.brightness, description: 'Luminosity of the crossing points', }, { @@ -43,7 +36,6 @@ export const neuroNoiseDef: ShaderDef = { type: 'number', min: 0, max: 1, - defaultValue: defaultParams.contrast, description: 'Sharpness of the bright–dark transition', }, ...animatedCommonParams, diff --git a/docs/src/shader-defs/shader-def-types.ts b/packages/shaders/src/defs/shader-def-types.ts similarity index 100% rename from docs/src/shader-defs/shader-def-types.ts rename to packages/shaders/src/defs/shader-def-types.ts diff --git a/packages/shaders/src/index.ts b/packages/shaders/src/index.ts index a55c2969..308b99b4 100644 --- a/packages/shaders/src/index.ts +++ b/packages/shaders/src/index.ts @@ -8,6 +8,9 @@ export type { ImageShaderPreset, } from './shader-mount.js'; +export type { ShaderDef, ParamDef, ParamOption } from './defs/shader-def-types.js'; +export { staticCommonParams, animatedCommonParams, commonParams } from './defs/common-param-def.js'; + /** Shader sizing options and uniforms */ export { defaultObjectSizing, @@ -39,6 +42,7 @@ export { // ----- Neuro noise ----- // /** A shader rendering a fractal-like structure made of several layers of since-arches */ export { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise.js'; +export { neuroNoiseDef } from './defs/neuro-noise-def.js'; // ----- Animated dot pattern: orbit type of animation ----- // /** A shader rendering an animated dot pattern based on Voronoi diagram */ From 9379bfa6fa51638e506698b5f0025b87d423cc19 Mon Sep 17 00:00:00 2001 From: verekia <522007+verekia@users.noreply.github.com> Date: Thu, 2 Oct 2025 15:22:40 +0200 Subject: [PATCH 2/3] chore: use default value from neuro noise def instead of default preset --- packages/shaders-react/src/shaders/neuro-noise.tsx | 9 +++++---- packages/shaders/src/defs/neuro-noise-def.ts | 2 ++ 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/shaders-react/src/shaders/neuro-noise.tsx b/packages/shaders-react/src/shaders/neuro-noise.tsx index b5a107f8..a7978d63 100644 --- a/packages/shaders-react/src/shaders/neuro-noise.tsx +++ b/packages/shaders-react/src/shaders/neuro-noise.tsx @@ -6,6 +6,7 @@ import { getShaderColorFromString, neuroNoiseFragmentShader, ShaderFitOptions, + neuroNoiseDef, type NeuroNoiseParams, type NeuroNoiseUniforms, type ShaderPreset, @@ -24,8 +25,8 @@ export const defaultPreset: NeuroNoisePreset = { colorFront: '#ffffff', colorMid: '#47a6ff', colorBack: '#000000', - brightness: 0.05, - contrast: 0.3, + brightness: neuroNoiseDef.params.find((p) => p.name === 'brightness')?.defaultValue as number, + contrast: neuroNoiseDef.params.find((p) => p.name === 'contrast')?.defaultValue as number, }, }; @@ -88,8 +89,8 @@ export const NeuroNoise: React.FC = memo(function NeuroNoiseImp colorFront = defaultPreset.params.colorFront, colorMid = defaultPreset.params.colorMid, colorBack = defaultPreset.params.colorBack, - brightness = defaultPreset.params.brightness, - contrast = defaultPreset.params.contrast, + brightness = neuroNoiseDef.params.find((p) => p.name === 'brightness')?.defaultValue as number, + contrast = neuroNoiseDef.params.find((p) => p.name === 'contrast')?.defaultValue as number, // Sizing props fit = defaultPreset.params.fit, diff --git a/packages/shaders/src/defs/neuro-noise-def.ts b/packages/shaders/src/defs/neuro-noise-def.ts index 76ffb84f..ed9357b0 100644 --- a/packages/shaders/src/defs/neuro-noise-def.ts +++ b/packages/shaders/src/defs/neuro-noise-def.ts @@ -29,6 +29,7 @@ export const neuroNoiseDef: ShaderDef = { type: 'number', min: 0, max: 1, + defaultValue: 0.05, description: 'Luminosity of the crossing points', }, { @@ -36,6 +37,7 @@ export const neuroNoiseDef: ShaderDef = { type: 'number', min: 0, max: 1, + defaultValue: 0.3, description: 'Sharpness of the bright–dark transition', }, ...animatedCommonParams, From 82f232fea87806077955c23253e880b2d92a6694 Mon Sep 17 00:00:00 2001 From: verekia <522007+verekia@users.noreply.github.com> Date: Thu, 2 Oct 2025 15:55:29 +0200 Subject: [PATCH 3/3] chore: use more neuro noise def values in docs and react package --- docs/src/app/(shaders)/neuro-noise/page.tsx | 24 ++++++------ .../shaders-react/src/shaders/neuro-noise.tsx | 39 ++++++++++--------- packages/shaders/src/defs/common-param-def.ts | 14 ++++--- packages/shaders/src/defs/neuro-noise-def.ts | 4 ++ 4 files changed, 45 insertions(+), 36 deletions(-) diff --git a/docs/src/app/(shaders)/neuro-noise/page.tsx b/docs/src/app/(shaders)/neuro-noise/page.tsx index 2cff0ffa..eee7dd7c 100644 --- a/docs/src/app/(shaders)/neuro-noise/page.tsx +++ b/docs/src/app/(shaders)/neuro-noise/page.tsx @@ -7,7 +7,7 @@ import { usePresetHighlight } from '@/helpers/use-preset-highlight'; import { cleanUpLevaParams } from '@/helpers/clean-up-leva-params'; import { toHsla } from '@/helpers/color-utils'; import { ShaderDetails } from '@/components/shader-details'; -import { neuroNoiseDef } from '@paper-design/shaders'; +import { animatedCommonParams, commonParams, neuroNoiseDef } from '@paper-design/shaders'; import { ShaderContainer } from '@/components/shader-container'; import { useUrlParams } from '@/helpers/use-url-params'; @@ -27,33 +27,33 @@ const NeuroNoiseWithControls = () => { colorMid: { value: toHsla(defaults.colorMid), order: 101 }, colorBack: { value: toHsla(defaults.colorBack), order: 102 }, brightness: { - value: defaults.brightness, + value: neuroNoiseDef.params.find((p) => p.name === 'brightness')?.defaultValue as number, min: neuroNoiseDef.params.find((p) => p.name === 'brightness')?.min, max: neuroNoiseDef.params.find((p) => p.name === 'brightness')?.max, order: 200, }, contrast: { - value: defaults.contrast, + value: neuroNoiseDef.params.find((p) => p.name === 'contrast')?.defaultValue as number, min: neuroNoiseDef.params.find((p) => p.name === 'contrast')?.min, max: neuroNoiseDef.params.find((p) => p.name === 'contrast')?.max, order: 201, }, speed: { - value: defaults.speed, - min: neuroNoiseDef.params.find((p) => p.name === 'speed')?.min, - max: neuroNoiseDef.params.find((p) => p.name === 'speed')?.max, + value: commonParams.speed.defaultValue as number, + min: commonParams.speed.min, + max: commonParams.speed.max, order: 300, }, scale: { - value: defaults.scale, - min: neuroNoiseDef.params.find((p) => p.name === 'scale')?.min, - max: neuroNoiseDef.params.find((p) => p.name === 'scale')?.max, + value: commonParams.scale.defaultValue as number, + min: commonParams.scale.min, + max: commonParams.scale.max, order: 301, }, rotation: { - value: defaults.rotation, - min: neuroNoiseDef.params.find((p) => p.name === 'rotation')?.min, - max: neuroNoiseDef.params.find((p) => p.name === 'rotation')?.max, + value: commonParams.rotation.defaultValue as number, + min: commonParams.rotation.min, + max: commonParams.rotation.max, order: 302, }, Presets: folder(presets, { order: -1 }), diff --git a/packages/shaders-react/src/shaders/neuro-noise.tsx b/packages/shaders-react/src/shaders/neuro-noise.tsx index a7978d63..c96df98f 100644 --- a/packages/shaders-react/src/shaders/neuro-noise.tsx +++ b/packages/shaders-react/src/shaders/neuro-noise.tsx @@ -10,6 +10,7 @@ import { type NeuroNoiseParams, type NeuroNoiseUniforms, type ShaderPreset, + commonParams, } from '@paper-design/shaders'; export interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams {} @@ -20,11 +21,11 @@ export const defaultPreset: NeuroNoisePreset = { name: 'Default', params: { ...defaultPatternSizing, - speed: 1, - frame: 0, - colorFront: '#ffffff', - colorMid: '#47a6ff', - colorBack: '#000000', + speed: commonParams.speed!.defaultValue as number, + frame: commonParams.frame!.defaultValue as number, + colorFront: neuroNoiseDef.params.find((p) => p.name === 'colorFront')?.defaultValue as string, + colorMid: '#47a6ff', // Can differ from the def default value + colorBack: neuroNoiseDef.params.find((p) => p.name === 'colorBack')?.defaultValue as string, brightness: neuroNoiseDef.params.find((p) => p.name === 'brightness')?.defaultValue as number, contrast: neuroNoiseDef.params.find((p) => p.name === 'contrast')?.defaultValue as number, }, @@ -84,24 +85,24 @@ export const neuroNoisePresets: NeuroNoisePreset[] = [ export const NeuroNoise: React.FC = memo(function NeuroNoiseImpl({ // Own props - speed = defaultPreset.params.speed, - frame = defaultPreset.params.frame, - colorFront = defaultPreset.params.colorFront, - colorMid = defaultPreset.params.colorMid, - colorBack = defaultPreset.params.colorBack, + speed = commonParams.speed!.defaultValue as number, + frame = commonParams.frame!.defaultValue as number, + colorFront = neuroNoiseDef.params.find((p) => p.name === 'colorFront')?.defaultValue as string, + colorMid = neuroNoiseDef.params.find((p) => p.name === 'colorMid')?.defaultValue as string, + colorBack = neuroNoiseDef.params.find((p) => p.name === 'colorBack')?.defaultValue as string, brightness = neuroNoiseDef.params.find((p) => p.name === 'brightness')?.defaultValue as number, contrast = neuroNoiseDef.params.find((p) => p.name === 'contrast')?.defaultValue as number, // Sizing props - fit = defaultPreset.params.fit, - scale = defaultPreset.params.scale, - rotation = defaultPreset.params.rotation, - originX = defaultPreset.params.originX, - originY = defaultPreset.params.originY, - offsetX = defaultPreset.params.offsetX, - offsetY = defaultPreset.params.offsetY, - worldWidth = defaultPreset.params.worldWidth, - worldHeight = defaultPreset.params.worldHeight, + fit = defaultPatternSizing.fit, + scale = defaultPatternSizing.scale, + rotation = defaultPatternSizing.rotation, + originX = defaultPatternSizing.originX, + originY = defaultPatternSizing.originY, + offsetX = defaultPatternSizing.offsetX, + offsetY = defaultPatternSizing.offsetY, + worldWidth = defaultPatternSizing.worldWidth, + worldHeight = defaultPatternSizing.worldHeight, ...props }: NeuroNoiseProps) { const uniforms = { diff --git a/packages/shaders/src/defs/common-param-def.ts b/packages/shaders/src/defs/common-param-def.ts index 46e7745b..707ddadc 100644 --- a/packages/shaders/src/defs/common-param-def.ts +++ b/packages/shaders/src/defs/common-param-def.ts @@ -1,16 +1,16 @@ import type { ParamDef } from './shader-def-types.js'; -type CommonParamDef = Omit; - -export const commonParams: Record = { +export const commonParams: Record = { speed: { name: 'speed', type: 'number', + defaultValue: 1, description: 'Animation speed', }, frame: { name: 'frame', type: 'number', + defaultValue: 0, description: 'Starting animation frame', }, scale: { @@ -18,6 +18,7 @@ export const commonParams: Record = { type: 'number', min: 0.01, max: 4, + defaultValue: 1, description: 'Overall zoom level of the graphics', }, rotation: { @@ -25,6 +26,7 @@ export const commonParams: Record = { type: 'number', min: 0, max: 360, + defaultValue: 0, description: 'Overall rotation angle of the graphics', }, offsetX: { @@ -32,6 +34,7 @@ export const commonParams: Record = { type: 'number', min: -1, max: 1, + defaultValue: 0, description: 'Horizontal offset of the graphics center', }, offsetY: { @@ -39,6 +42,7 @@ export const commonParams: Record = { type: 'number', min: -1, max: 1, + defaultValue: 0, description: 'Vertical offset of the graphics center', }, width: { @@ -93,7 +97,7 @@ export const commonParams: Record = { }, } as const; -export const animatedCommonParams: CommonParamDef[] = [ +export const animatedCommonParams: ParamDef[] = [ commonParams.speed!, commonParams.frame!, commonParams.scale!, @@ -111,7 +115,7 @@ export const animatedCommonParams: CommonParamDef[] = [ commonParams.maxPixelCount!, ]; -export const staticCommonParams: CommonParamDef[] = [ +export const staticCommonParams: ParamDef[] = [ commonParams.scale!, commonParams.rotation!, commonParams.offsetX!, diff --git a/packages/shaders/src/defs/neuro-noise-def.ts b/packages/shaders/src/defs/neuro-noise-def.ts index ed9357b0..c91a9b2f 100644 --- a/packages/shaders/src/defs/neuro-noise-def.ts +++ b/packages/shaders/src/defs/neuro-noise-def.ts @@ -10,18 +10,21 @@ export const neuroNoiseDef: ShaderDef = { name: 'colorFront', type: 'string', isColor: true, + defaultValue: '#ffffff', description: 'Graphics highlight color', }, { name: 'colorMid', type: 'string', isColor: true, + defaultValue: '#888888', description: 'Graphics main color', }, { name: 'colorBack', type: 'string', isColor: true, + defaultValue: '#000000', description: 'Background color', }, { @@ -41,5 +44,6 @@ export const neuroNoiseDef: ShaderDef = { description: 'Sharpness of the bright–dark transition', }, ...animatedCommonParams, + // Override common speed here ], };