shaders-oneshot 0.0.81-shared.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/LICENSE +201 -0
  2. package/NOTICE +5 -0
  3. package/README.md +7 -0
  4. package/dist/empty-pixel.d.ts +1 -0
  5. package/dist/empty-pixel.js +10 -0
  6. package/dist/empty-pixel.js.map +7 -0
  7. package/dist/get-shader-color-from-string.d.ts +3 -0
  8. package/dist/get-shader-color-from-string.js +101 -0
  9. package/dist/get-shader-color-from-string.js.map +7 -0
  10. package/dist/get-shader-color-from-string.test.d.ts +1 -0
  11. package/dist/get-shader-color-from-string.test.js +69 -0
  12. package/dist/get-shader-noise-texture.d.ts +1 -0
  13. package/dist/get-shader-noise-texture.js +18 -0
  14. package/dist/get-shader-noise-texture.js.map +7 -0
  15. package/dist/index.d.ts +68 -0
  16. package/dist/index.js +194 -0
  17. package/dist/index.js.map +7 -0
  18. package/dist/shader-color-spaces.d.ts +6 -0
  19. package/dist/shader-color-spaces.js +96 -0
  20. package/dist/shader-color-spaces.js.map +7 -0
  21. package/dist/shader-mount.d.ts +199 -0
  22. package/dist/shader-mount.js +735 -0
  23. package/dist/shader-mount.js.map +7 -0
  24. package/dist/shader-sizing.d.ts +30 -0
  25. package/dist/shader-sizing.js +38 -0
  26. package/dist/shader-sizing.js.map +7 -0
  27. package/dist/shader-utils.d.ts +10 -0
  28. package/dist/shader-utils.js +131 -0
  29. package/dist/shader-utils.js.map +7 -0
  30. package/dist/shaders/color-panels.d.ts +70 -0
  31. package/dist/shaders/color-panels.js +224 -0
  32. package/dist/shaders/color-panels.js.map +7 -0
  33. package/dist/shaders/dithering.d.ts +62 -0
  34. package/dist/shaders/dithering.js +271 -0
  35. package/dist/shaders/dithering.js.map +7 -0
  36. package/dist/shaders/dot-grid.d.ts +65 -0
  37. package/dist/shaders/dot-grid.js +110 -0
  38. package/dist/shaders/dot-grid.js.map +7 -0
  39. package/dist/shaders/dot-orbit.d.ts +57 -0
  40. package/dist/shaders/dot-orbit.js +123 -0
  41. package/dist/shaders/dot-orbit.js.map +7 -0
  42. package/dist/shaders/fluted-glass.d.ts +112 -0
  43. package/dist/shaders/fluted-glass.js +361 -0
  44. package/dist/shaders/fluted-glass.js.map +7 -0
  45. package/dist/shaders/gem-smoke.d.ts +96 -0
  46. package/dist/shaders/gem-smoke.js +573 -0
  47. package/dist/shaders/gem-smoke.js.map +7 -0
  48. package/dist/shaders/god-rays.d.ts +67 -0
  49. package/dist/shaders/god-rays.js +133 -0
  50. package/dist/shaders/god-rays.js.map +7 -0
  51. package/dist/shaders/grain-gradient.d.ts +80 -0
  52. package/dist/shaders/grain-gradient.js +301 -0
  53. package/dist/shaders/grain-gradient.js.map +7 -0
  54. package/dist/shaders/halftone-cmyk.d.ts +104 -0
  55. package/dist/shaders/halftone-cmyk.js +295 -0
  56. package/dist/shaders/halftone-cmyk.js.map +7 -0
  57. package/dist/shaders/halftone-dots.d.ts +80 -0
  58. package/dist/shaders/halftone-dots.js +321 -0
  59. package/dist/shaders/halftone-dots.js.map +7 -0
  60. package/dist/shaders/heatmap.d.ts +66 -0
  61. package/dist/shaders/heatmap.js +384 -0
  62. package/dist/shaders/heatmap.js.map +7 -0
  63. package/dist/shaders/image-dithering.d.ts +64 -0
  64. package/dist/shaders/image-dithering.js +199 -0
  65. package/dist/shaders/image-dithering.js.map +7 -0
  66. package/dist/shaders/lens-distortion.d.ts +97 -0
  67. package/dist/shaders/lens-distortion.js +276 -0
  68. package/dist/shaders/lens-distortion.js.map +7 -0
  69. package/dist/shaders/liquid-metal.d.ts +89 -0
  70. package/dist/shaders/liquid-metal.js +633 -0
  71. package/dist/shaders/liquid-metal.js.map +7 -0
  72. package/dist/shaders/mesh-gradient.d.ts +52 -0
  73. package/dist/shaders/mesh-gradient.js +131 -0
  74. package/dist/shaders/mesh-gradient.js.map +7 -0
  75. package/dist/shaders/metaballs.d.ts +51 -0
  76. package/dist/shaders/metaballs.js +111 -0
  77. package/dist/shaders/metaballs.js.map +7 -0
  78. package/dist/shaders/neuro-noise.d.ts +47 -0
  79. package/dist/shaders/neuro-noise.js +77 -0
  80. package/dist/shaders/neuro-noise.js.map +7 -0
  81. package/dist/shaders/paper-texture.d.ts +109 -0
  82. package/dist/shaders/paper-texture.js +527 -0
  83. package/dist/shaders/paper-texture.js.map +7 -0
  84. package/dist/shaders/perlin-noise.d.ts +52 -0
  85. package/dist/shaders/perlin-noise.js +167 -0
  86. package/dist/shaders/perlin-noise.js.map +7 -0
  87. package/dist/shaders/pulsing-border.d.ts +98 -0
  88. package/dist/shaders/pulsing-border.js +239 -0
  89. package/dist/shaders/pulsing-border.js.map +7 -0
  90. package/dist/shaders/simplex-noise.d.ts +45 -0
  91. package/dist/shaders/simplex-noise.js +92 -0
  92. package/dist/shaders/simplex-noise.js.map +7 -0
  93. package/dist/shaders/smoke-ring.d.ts +61 -0
  94. package/dist/shaders/smoke-ring.js +133 -0
  95. package/dist/shaders/smoke-ring.js.map +7 -0
  96. package/dist/shaders/spiral.d.ts +61 -0
  97. package/dist/shaders/spiral.js +83 -0
  98. package/dist/shaders/spiral.js.map +7 -0
  99. package/dist/shaders/static-mesh-gradient.d.ts +63 -0
  100. package/dist/shaders/static-mesh-gradient.js +131 -0
  101. package/dist/shaders/static-mesh-gradient.js.map +7 -0
  102. package/dist/shaders/static-radial-gradient.d.ts +72 -0
  103. package/dist/shaders/static-radial-gradient.js +188 -0
  104. package/dist/shaders/static-radial-gradient.js.map +7 -0
  105. package/dist/shaders/swirl.d.ts +63 -0
  106. package/dist/shaders/swirl.js +104 -0
  107. package/dist/shaders/swirl.js.map +7 -0
  108. package/dist/shaders/voronoi.d.ts +65 -0
  109. package/dist/shaders/voronoi.js +139 -0
  110. package/dist/shaders/voronoi.js.map +7 -0
  111. package/dist/shaders/warp.d.ts +70 -0
  112. package/dist/shaders/warp.js +130 -0
  113. package/dist/shaders/warp.js.map +7 -0
  114. package/dist/shaders/water.d.ts +59 -0
  115. package/dist/shaders/water.js +122 -0
  116. package/dist/shaders/water.js.map +7 -0
  117. package/dist/shaders/waves.d.ts +53 -0
  118. package/dist/shaders/waves.js +66 -0
  119. package/dist/shaders/waves.js.map +7 -0
  120. package/dist/shared-webgl-renderer.d.ts +63 -0
  121. package/dist/shared-webgl-renderer.js +262 -0
  122. package/dist/shared-webgl-renderer.js.map +7 -0
  123. package/dist/types.d.ts +3 -0
  124. package/dist/types.js +6 -0
  125. package/dist/types.js.map +7 -0
  126. package/dist/vertex-shader.d.ts +2 -0
  127. package/dist/vertex-shader.js +160 -0
  128. package/dist/vertex-shader.js.map +7 -0
  129. package/package.json +29 -0
@@ -0,0 +1,68 @@
1
+ /** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */
2
+ export { ShaderMount, isPaperShaderElement } from './shader-mount.js';
3
+ export type { PaperShaderElement, ShaderMotionParams, ShaderMountUniforms, ShaderPreset, ImageShaderPreset, WebGlContextMode, } from './shader-mount.js';
4
+ /** Shader sizing options and uniforms */
5
+ export { defaultObjectSizing, defaultPatternSizing, ShaderFitOptions, type ShaderFit, type ShaderSizingParams, type ShaderSizingUniforms, } from './shader-sizing.js';
6
+ /** A flowing interplay of color spots, moving along distinct trajectories and transformed by organic distortion */
7
+ export { meshGradientFragmentShader, meshGradientMeta, type MeshGradientParams, type MeshGradientUniforms, } from './shaders/mesh-gradient.js';
8
+ /** Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic */
9
+ export { smokeRingMeta, smokeRingFragmentShader, type SmokeRingParams, type SmokeRingUniforms, } from './shaders/smoke-ring.js';
10
+ /** A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals */
11
+ export { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise.js';
12
+ /** Animated multi-color dots pattern with each dot orbiting around its cell center. Supports up to 40 colors and various shape and motion controls. Great for playful, dynamic backgrounds and UI textures */
13
+ export { dotOrbitMeta, dotOrbitFragmentShader, type DotOrbitParams, type DotOrbitUniforms, } from './shaders/dot-orbit.js';
14
+ /** Static grid pattern made of circles, diamonds, squares or triangles */
15
+ export { dotGridFragmentShader, DotGridShapes, type DotGridShape, type DotGridParams, type DotGridUniforms, } from './shaders/dot-grid.js';
16
+ /** A multi-color gradient mapped into smooth, animated curves, delivering a sleek, futuristic visual */
17
+ export { simplexNoiseMeta, simplexNoiseFragmentShader, type SimplexNoiseParams, type SimplexNoiseUniforms, } from './shaders/simplex-noise.js';
18
+ /** Up to 20 gooey blobs moving around the center and merging into smooth organic shapes */
19
+ export { metaballsMeta, metaballsFragmentShader, type MetaballsParams, type MetaballsUniforms, } from './shaders/metaballs.js';
20
+ /** Animated 3D Perlin noise with exposed controls */
21
+ export { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise.js';
22
+ /** Anti-aliased animated Voronoi pattern with smooth and customizable edges */
23
+ export { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';
24
+ /** Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves */
25
+ export { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';
26
+ /** Animated color fields warped by noise and swirls, applied over base patterns (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution, softness, distortion, and swirl. Great for fluid, smoky, or marbled effects */
27
+ export { warpMeta, warpFragmentShader, WarpPatterns, type WarpParams, type WarpUniforms, type WarpPattern, } from './shaders/warp.js';
28
+ /** Animated rays of light radiating from the center, blended with up to 5 colors. The rays are adjustable by size, density, brightness and center glow. Great for dramatic backgrounds, logo reveals, and VFX like energy bursts or sun shafts */
29
+ export { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';
30
+ /** A single-colored animated spiral that morphs across a wide range of shapes - from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings */
31
+ export { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';
32
+ /** Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns */
33
+ export { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';
34
+ /** Animated 2-color dithering over with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere) */
35
+ export { ditheringFragmentShader, DitheringShapes, DitheringTypes, type DitheringParams, type DitheringUniforms, type DitheringShape, type DitheringType, } from './shaders/dithering.js';
36
+ /** Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms */
37
+ export { grainGradientFragmentShader, grainGradientMeta, GrainGradientShapes, type GrainGradientParams, type GrainGradientUniforms, type GrainGradientShape, } from './shaders/grain-gradient.js';
38
+ /** Luminous trails of color merging into a glowing gradient frame */
39
+ export { pulsingBorderMeta, pulsingBorderFragmentShader, PulsingBorderAspectRatios, type PulsingBorderParams, type PulsingBorderUniforms, type PulsingBorderAspectRatio, } from './shaders/pulsing-border.js';
40
+ /** Glowing translucent 3D panels rotating around a central axis */
41
+ export { colorPanelsFragmentShader, colorPanelsMeta, type ColorPanelsParams, type ColorPanelsUniforms, } from './shaders/color-panels.js';
42
+ /** Multi-point mesh gradients with up to 10 color spots, enhanced by two-direction warping, adjustable blend sharpness, and grain controls. Perfect for elegant wallpapers and atmospheric backdrops */
43
+ export { staticMeshGradientFragmentShader, staticMeshGradientMeta, type StaticMeshGradientParams, type StaticMeshGradientUniforms, } from './shaders/static-mesh-gradient.js';
44
+ /** Radial gradient with up to 10 blended colors, featuring advanced focal point control, shape distortion, and grain effects */
45
+ export { staticRadialGradientFragmentShader, staticRadialGradientMeta, type StaticRadialGradientParams, type StaticRadialGradientUniforms, } from './shaders/static-radial-gradient.js';
46
+ /** A static texture built from multiple noise layers, usable for a realistic paper and cardboard surfaces or generating abstract patterns. Can be used as a image filter or as a texture */
47
+ export { paperTextureFragmentShader, paperTextureMeta, type PaperTextureParams, type PaperTextureUniforms, } from './shaders/paper-texture.js';
48
+ /** Water-like surface distortion with natural caustic realism. Works as an image filter or animated texture without image */
49
+ export { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';
50
+ /** Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity */
51
+ export { flutedGlassFragmentShader, GlassDistortionShapes, GlassGridShapes, type GlassDistortionShape, type GlassGridShape, type FlutedGlassParams, type FlutedGlassUniforms, } from './shaders/fluted-glass.js';
52
+ /** A dithering image filter with support for 4 dithering modes and multiple color palettes (2-color, 3-color, and multicolor options, using either predefined colors or ones sampled directly from the original image) */
53
+ export { imageDitheringFragmentShader, type ImageDitheringParams, type ImageDitheringUniforms, } from './shaders/image-dithering.js';
54
+ /** Lens Distortion image filter that separates an image into shifting color layers, recreating the chromatic aberration of a lens, and warps the image geometry with barrel or pincushion curvature */
55
+ export { lensDistortionFragmentShader, lensDistortionMeta, type LensDistortionParams, type LensDistortionUniforms, } from './shaders/lens-distortion.js';
56
+ /** A glowing gradient of colors flowing through an input image. The effect creates a smoothly animated wave of intensity across the image */
57
+ export { heatmapMeta, heatmapFragmentShader, toProcessedHeatmap, type HeatmapParams, type HeatmapUniforms, } from './shaders/heatmap.js';
58
+ /** Futuristic liquid metal material applied to uploaded logo or one of pre-defined abstract shape */
59
+ export { liquidMetalFragmentShader, LiquidMetalShapes, toProcessedLiquidMetal, type LiquidMetalShape, type LiquidMetalParams, type LiquidMetalUniforms, } from './shaders/liquid-metal.js';
60
+ /** A halftone-dot image filter featuring customizable grids, color palettes, and dot styles */
61
+ export { HalftoneDotsTypes, HalftoneDotsGrids, halftoneDotsFragmentShader, type HalftoneDotsParams, type HalftoneDotsUniforms, type HalftoneDotsType, type HalftoneDotsGrid, } from './shaders/halftone-dots.js';
62
+ /** A halftone CMYK classic algo */
63
+ export { HalftoneCmykTypes, halftoneCmykFragmentShader, type HalftoneCmykParams, type HalftoneCmykUniforms, type HalftoneCmykType, } from './shaders/halftone-cmyk.js';
64
+ /** Animated color fields running around a glassy logo shape */
65
+ export { gemSmokeMeta, gemSmokeFragmentShader, toProcessedGemSmoke, GemSmokeShapes, type GemSmokeShape, type GemSmokeParams, type GemSmokeUniforms, } from './shaders/gem-smoke.js';
66
+ export { getShaderColorFromString } from './get-shader-color-from-string.js';
67
+ export { getShaderNoiseTexture } from './get-shader-noise-texture.js';
68
+ export { emptyPixel } from './empty-pixel.js';
package/dist/index.js ADDED
@@ -0,0 +1,194 @@
1
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
+ * Paper Shaders *
3
+ * https://github.com/paper-design/shaders *
4
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
+
6
+ import { ShaderMount, isPaperShaderElement } from "./shader-mount.js";
7
+ import {
8
+ defaultObjectSizing,
9
+ defaultPatternSizing,
10
+ ShaderFitOptions
11
+ } from "./shader-sizing.js";
12
+ import {
13
+ meshGradientFragmentShader,
14
+ meshGradientMeta
15
+ } from "./shaders/mesh-gradient.js";
16
+ import {
17
+ smokeRingMeta,
18
+ smokeRingFragmentShader
19
+ } from "./shaders/smoke-ring.js";
20
+ import { neuroNoiseFragmentShader } from "./shaders/neuro-noise.js";
21
+ import {
22
+ dotOrbitMeta,
23
+ dotOrbitFragmentShader
24
+ } from "./shaders/dot-orbit.js";
25
+ import {
26
+ dotGridFragmentShader,
27
+ DotGridShapes
28
+ } from "./shaders/dot-grid.js";
29
+ import {
30
+ simplexNoiseMeta,
31
+ simplexNoiseFragmentShader
32
+ } from "./shaders/simplex-noise.js";
33
+ import {
34
+ metaballsMeta,
35
+ metaballsFragmentShader
36
+ } from "./shaders/metaballs.js";
37
+ import { perlinNoiseFragmentShader } from "./shaders/perlin-noise.js";
38
+ import { voronoiMeta, voronoiFragmentShader } from "./shaders/voronoi.js";
39
+ import { wavesFragmentShader } from "./shaders/waves.js";
40
+ import {
41
+ warpMeta,
42
+ warpFragmentShader,
43
+ WarpPatterns
44
+ } from "./shaders/warp.js";
45
+ import { godRaysMeta, godRaysFragmentShader } from "./shaders/god-rays.js";
46
+ import { spiralFragmentShader } from "./shaders/spiral.js";
47
+ import { swirlMeta, swirlFragmentShader } from "./shaders/swirl.js";
48
+ import {
49
+ ditheringFragmentShader,
50
+ DitheringShapes,
51
+ DitheringTypes
52
+ } from "./shaders/dithering.js";
53
+ import {
54
+ grainGradientFragmentShader,
55
+ grainGradientMeta,
56
+ GrainGradientShapes
57
+ } from "./shaders/grain-gradient.js";
58
+ import {
59
+ pulsingBorderMeta,
60
+ pulsingBorderFragmentShader,
61
+ PulsingBorderAspectRatios
62
+ } from "./shaders/pulsing-border.js";
63
+ import {
64
+ colorPanelsFragmentShader,
65
+ colorPanelsMeta
66
+ } from "./shaders/color-panels.js";
67
+ import {
68
+ staticMeshGradientFragmentShader,
69
+ staticMeshGradientMeta
70
+ } from "./shaders/static-mesh-gradient.js";
71
+ import {
72
+ staticRadialGradientFragmentShader,
73
+ staticRadialGradientMeta
74
+ } from "./shaders/static-radial-gradient.js";
75
+ import {
76
+ paperTextureFragmentShader,
77
+ paperTextureMeta
78
+ } from "./shaders/paper-texture.js";
79
+ import { waterFragmentShader } from "./shaders/water.js";
80
+ import {
81
+ flutedGlassFragmentShader,
82
+ GlassDistortionShapes,
83
+ GlassGridShapes
84
+ } from "./shaders/fluted-glass.js";
85
+ import {
86
+ imageDitheringFragmentShader
87
+ } from "./shaders/image-dithering.js";
88
+ import {
89
+ lensDistortionFragmentShader,
90
+ lensDistortionMeta
91
+ } from "./shaders/lens-distortion.js";
92
+ import {
93
+ heatmapMeta,
94
+ heatmapFragmentShader,
95
+ toProcessedHeatmap
96
+ } from "./shaders/heatmap.js";
97
+ import {
98
+ liquidMetalFragmentShader,
99
+ LiquidMetalShapes,
100
+ toProcessedLiquidMetal
101
+ } from "./shaders/liquid-metal.js";
102
+ import {
103
+ HalftoneDotsTypes,
104
+ HalftoneDotsGrids,
105
+ halftoneDotsFragmentShader
106
+ } from "./shaders/halftone-dots.js";
107
+ import {
108
+ HalftoneCmykTypes,
109
+ halftoneCmykFragmentShader
110
+ } from "./shaders/halftone-cmyk.js";
111
+ import {
112
+ gemSmokeMeta,
113
+ gemSmokeFragmentShader,
114
+ toProcessedGemSmoke,
115
+ GemSmokeShapes
116
+ } from "./shaders/gem-smoke.js";
117
+ import { getShaderColorFromString } from "./get-shader-color-from-string.js";
118
+ import { getShaderNoiseTexture } from "./get-shader-noise-texture.js";
119
+ import { emptyPixel } from "./empty-pixel.js";
120
+ export {
121
+ DitheringShapes,
122
+ DitheringTypes,
123
+ DotGridShapes,
124
+ GemSmokeShapes,
125
+ GlassDistortionShapes,
126
+ GlassGridShapes,
127
+ GrainGradientShapes,
128
+ HalftoneCmykTypes,
129
+ HalftoneDotsGrids,
130
+ HalftoneDotsTypes,
131
+ LiquidMetalShapes,
132
+ PulsingBorderAspectRatios,
133
+ ShaderFitOptions,
134
+ ShaderMount,
135
+ WarpPatterns,
136
+ colorPanelsFragmentShader,
137
+ colorPanelsMeta,
138
+ defaultObjectSizing,
139
+ defaultPatternSizing,
140
+ ditheringFragmentShader,
141
+ dotGridFragmentShader,
142
+ dotOrbitFragmentShader,
143
+ dotOrbitMeta,
144
+ emptyPixel,
145
+ flutedGlassFragmentShader,
146
+ gemSmokeFragmentShader,
147
+ gemSmokeMeta,
148
+ getShaderColorFromString,
149
+ getShaderNoiseTexture,
150
+ godRaysFragmentShader,
151
+ godRaysMeta,
152
+ grainGradientFragmentShader,
153
+ grainGradientMeta,
154
+ halftoneCmykFragmentShader,
155
+ halftoneDotsFragmentShader,
156
+ heatmapFragmentShader,
157
+ heatmapMeta,
158
+ imageDitheringFragmentShader,
159
+ isPaperShaderElement,
160
+ lensDistortionFragmentShader,
161
+ lensDistortionMeta,
162
+ liquidMetalFragmentShader,
163
+ meshGradientFragmentShader,
164
+ meshGradientMeta,
165
+ metaballsFragmentShader,
166
+ metaballsMeta,
167
+ neuroNoiseFragmentShader,
168
+ paperTextureFragmentShader,
169
+ paperTextureMeta,
170
+ perlinNoiseFragmentShader,
171
+ pulsingBorderFragmentShader,
172
+ pulsingBorderMeta,
173
+ simplexNoiseFragmentShader,
174
+ simplexNoiseMeta,
175
+ smokeRingFragmentShader,
176
+ smokeRingMeta,
177
+ spiralFragmentShader,
178
+ staticMeshGradientFragmentShader,
179
+ staticMeshGradientMeta,
180
+ staticRadialGradientFragmentShader,
181
+ staticRadialGradientMeta,
182
+ swirlFragmentShader,
183
+ swirlMeta,
184
+ toProcessedGemSmoke,
185
+ toProcessedHeatmap,
186
+ toProcessedLiquidMetal,
187
+ voronoiFragmentShader,
188
+ voronoiMeta,
189
+ warpFragmentShader,
190
+ warpMeta,
191
+ waterFragmentShader,
192
+ wavesFragmentShader
193
+ };
194
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/index.ts"],
4
+ "sourcesContent": ["/** The core Shader Mount class. Pass it a parent element and a fragment shader to get started. */\r\nexport { ShaderMount, isPaperShaderElement } from './shader-mount.js';\r\nexport type {\r\n PaperShaderElement,\r\n ShaderMotionParams,\r\n ShaderMountUniforms,\r\n ShaderPreset,\r\n ImageShaderPreset,\r\n WebGlContextMode,\r\n} from './shader-mount.js';\r\n\r\n/** Shader sizing options and uniforms */\r\nexport {\r\n defaultObjectSizing,\r\n defaultPatternSizing,\r\n ShaderFitOptions,\r\n type ShaderFit,\r\n type ShaderSizingParams,\r\n type ShaderSizingUniforms,\r\n} from './shader-sizing.js';\r\n\r\n/** A flowing interplay of color spots, moving along distinct trajectories and transformed by organic distortion */\r\nexport {\r\n meshGradientFragmentShader,\r\n meshGradientMeta,\r\n type MeshGradientParams,\r\n type MeshGradientUniforms,\r\n} from './shaders/mesh-gradient.js';\r\n\r\n/** Radial multi-colored gradient shaped with layered noise for a natural, smoky aesthetic */\r\nexport {\r\n smokeRingMeta,\r\n smokeRingFragmentShader,\r\n type SmokeRingParams,\r\n type SmokeRingUniforms,\r\n} from './shaders/smoke-ring.js';\r\n\r\n/** A glowing, web-like structure of fluid lines and soft intersections. Great for creating atmospheric, organic-yet-futuristic visuals */\r\nexport { neuroNoiseFragmentShader, type NeuroNoiseParams, type NeuroNoiseUniforms } from './shaders/neuro-noise.js';\r\n\r\n/** Animated multi-color dots pattern with each dot orbiting around its cell center. Supports up to 40 colors and various shape and motion controls. Great for playful, dynamic backgrounds and UI textures */\r\nexport {\r\n dotOrbitMeta,\r\n dotOrbitFragmentShader,\r\n type DotOrbitParams,\r\n type DotOrbitUniforms,\r\n} from './shaders/dot-orbit.js';\r\n\r\n/** Static grid pattern made of circles, diamonds, squares or triangles */\r\nexport {\r\n dotGridFragmentShader,\r\n DotGridShapes,\r\n type DotGridShape,\r\n type DotGridParams,\r\n type DotGridUniforms,\r\n} from './shaders/dot-grid.js';\r\n\r\n/** A multi-color gradient mapped into smooth, animated curves, delivering a sleek, futuristic visual */\r\nexport {\r\n simplexNoiseMeta,\r\n simplexNoiseFragmentShader,\r\n type SimplexNoiseParams,\r\n type SimplexNoiseUniforms,\r\n} from './shaders/simplex-noise.js';\r\n\r\n/** Up to 20 gooey blobs moving around the center and merging into smooth organic shapes */\r\nexport {\r\n metaballsMeta,\r\n metaballsFragmentShader,\r\n type MetaballsParams,\r\n type MetaballsUniforms,\r\n} from './shaders/metaballs.js';\r\n\r\n/** Animated 3D Perlin noise with exposed controls */\r\nexport { perlinNoiseFragmentShader, type PerlinNoiseParams, type PerlinNoiseUniforms } from './shaders/perlin-noise.js';\r\n\r\n/** Anti-aliased animated Voronoi pattern with smooth and customizable edges */\r\nexport { voronoiMeta, voronoiFragmentShader, type VoronoiParams, type VoronoiUniforms } from './shaders/voronoi.js';\r\n\r\n/** Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves */\r\nexport { wavesFragmentShader, type WavesParams, type WavesUniforms } from './shaders/waves.js';\r\n\r\n/** Animated color fields warped by noise and swirls, applied over base patterns (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution, softness, distortion, and swirl. Great for fluid, smoky, or marbled effects */\r\nexport {\r\n warpMeta,\r\n warpFragmentShader,\r\n WarpPatterns,\r\n type WarpParams,\r\n type WarpUniforms,\r\n type WarpPattern,\r\n} from './shaders/warp.js';\r\n\r\n/** Animated rays of light radiating from the center, blended with up to 5 colors. The rays are adjustable by size, density, brightness and center glow. Great for dramatic backgrounds, logo reveals, and VFX like energy bursts or sun shafts */\r\nexport { godRaysMeta, godRaysFragmentShader, type GodRaysParams, type GodRaysUniforms } from './shaders/god-rays.js';\r\n\r\n/** A single-colored animated spiral that morphs across a wide range of shapes - from crisp, thin-lined geometry to flowing whirlpool forms and wavy, abstract rings */\r\nexport { spiralFragmentShader, type SpiralParams, type SpiralUniforms } from './shaders/spiral.js';\r\n\r\n/** Animated bands of color twisting and bending, producing spirals, arcs, and flowing circular patterns */\r\nexport { swirlMeta, swirlFragmentShader, type SwirlParams, type SwirlUniforms } from './shaders/swirl.js';\r\n\r\n/** Animated 2-color dithering over with multiple pattern sources (noise, warp, dots, waves, ripple, swirl, sphere) */\r\nexport {\r\n ditheringFragmentShader,\r\n DitheringShapes,\r\n DitheringTypes,\r\n type DitheringParams,\r\n type DitheringUniforms,\r\n type DitheringShape,\r\n type DitheringType,\r\n} from './shaders/dithering.js';\r\n\r\n/** Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms */\r\nexport {\r\n grainGradientFragmentShader,\r\n grainGradientMeta,\r\n GrainGradientShapes,\r\n type GrainGradientParams,\r\n type GrainGradientUniforms,\r\n type GrainGradientShape,\r\n} from './shaders/grain-gradient.js';\r\n\r\n/** Luminous trails of color merging into a glowing gradient frame */\r\nexport {\r\n pulsingBorderMeta,\r\n pulsingBorderFragmentShader,\r\n PulsingBorderAspectRatios,\r\n type PulsingBorderParams,\r\n type PulsingBorderUniforms,\r\n type PulsingBorderAspectRatio,\r\n} from './shaders/pulsing-border.js';\r\n\r\n/** Glowing translucent 3D panels rotating around a central axis */\r\nexport {\r\n colorPanelsFragmentShader,\r\n colorPanelsMeta,\r\n type ColorPanelsParams,\r\n type ColorPanelsUniforms,\r\n} from './shaders/color-panels.js';\r\n\r\n/** Multi-point mesh gradients with up to 10 color spots, enhanced by two-direction warping, adjustable blend sharpness, and grain controls. Perfect for elegant wallpapers and atmospheric backdrops */\r\nexport {\r\n staticMeshGradientFragmentShader,\r\n staticMeshGradientMeta,\r\n type StaticMeshGradientParams,\r\n type StaticMeshGradientUniforms,\r\n} from './shaders/static-mesh-gradient.js';\r\n\r\n/** Radial gradient with up to 10 blended colors, featuring advanced focal point control, shape distortion, and grain effects */\r\nexport {\r\n staticRadialGradientFragmentShader,\r\n staticRadialGradientMeta,\r\n type StaticRadialGradientParams,\r\n type StaticRadialGradientUniforms,\r\n} from './shaders/static-radial-gradient.js';\r\n\r\n/** A static texture built from multiple noise layers, usable for a realistic paper and cardboard surfaces or generating abstract patterns. Can be used as a image filter or as a texture */\r\nexport {\r\n paperTextureFragmentShader,\r\n paperTextureMeta,\r\n type PaperTextureParams,\r\n type PaperTextureUniforms,\r\n} from './shaders/paper-texture.js';\r\n\r\n/** Water-like surface distortion with natural caustic realism. Works as an image filter or animated texture without image */\r\nexport { waterFragmentShader, type WaterParams, type WaterUniforms } from './shaders/water.js';\r\n\r\n/** Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity */\r\nexport {\r\n flutedGlassFragmentShader,\r\n GlassDistortionShapes,\r\n GlassGridShapes,\r\n type GlassDistortionShape,\r\n type GlassGridShape,\r\n type FlutedGlassParams,\r\n type FlutedGlassUniforms,\r\n} from './shaders/fluted-glass.js';\r\n\r\n/** A dithering image filter with support for 4 dithering modes and multiple color palettes (2-color, 3-color, and multicolor options, using either predefined colors or ones sampled directly from the original image) */\r\nexport {\r\n imageDitheringFragmentShader,\r\n type ImageDitheringParams,\r\n type ImageDitheringUniforms,\r\n} from './shaders/image-dithering.js';\r\n\r\n/** Lens Distortion image filter that separates an image into shifting color layers, recreating the chromatic aberration of a lens, and warps the image geometry with barrel or pincushion curvature */\r\nexport {\r\n lensDistortionFragmentShader,\r\n lensDistortionMeta,\r\n type LensDistortionParams,\r\n type LensDistortionUniforms,\r\n} from './shaders/lens-distortion.js';\r\n\r\n/** A glowing gradient of colors flowing through an input image. The effect creates a smoothly animated wave of intensity across the image */\r\nexport {\r\n heatmapMeta,\r\n heatmapFragmentShader,\r\n toProcessedHeatmap,\r\n type HeatmapParams,\r\n type HeatmapUniforms,\r\n} from './shaders/heatmap.js';\r\n\r\n/** Futuristic liquid metal material applied to uploaded logo or one of pre-defined abstract shape */\r\nexport {\r\n liquidMetalFragmentShader,\r\n LiquidMetalShapes,\r\n toProcessedLiquidMetal,\r\n type LiquidMetalShape,\r\n type LiquidMetalParams,\r\n type LiquidMetalUniforms,\r\n} from './shaders/liquid-metal.js';\r\n\r\n/** A halftone-dot image filter featuring customizable grids, color palettes, and dot styles */\r\nexport {\r\n HalftoneDotsTypes,\r\n HalftoneDotsGrids,\r\n halftoneDotsFragmentShader,\r\n type HalftoneDotsParams,\r\n type HalftoneDotsUniforms,\r\n type HalftoneDotsType,\r\n type HalftoneDotsGrid,\r\n} from './shaders/halftone-dots.js';\r\n\r\n/** A halftone CMYK classic algo */\r\nexport {\r\n HalftoneCmykTypes,\r\n halftoneCmykFragmentShader,\r\n type HalftoneCmykParams,\r\n type HalftoneCmykUniforms,\r\n type HalftoneCmykType,\r\n} from './shaders/halftone-cmyk.js';\r\n\r\n/** Animated color fields running around a glassy logo shape */\r\nexport {\r\n gemSmokeMeta,\r\n gemSmokeFragmentShader,\r\n toProcessedGemSmoke,\r\n GemSmokeShapes,\r\n type GemSmokeShape,\r\n type GemSmokeParams,\r\n type GemSmokeUniforms,\r\n} from './shaders/gem-smoke.js';\r\n\r\n// ----- Utils ----- //\r\nexport { getShaderColorFromString } from './get-shader-color-from-string.js';\r\nexport { getShaderNoiseTexture } from './get-shader-noise-texture.js';\r\nexport { emptyPixel } from './empty-pixel.js';\r\n"],
5
+ "mappings": ";;;;;AACA,SAAS,aAAa,4BAA4B;AAWlD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,gCAAgF;AAGzF;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,iCAAmF;AAG5F,SAAS,aAAa,6BAAuE;AAG7F,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,aAAa,6BAAuE;AAG7F,SAAS,4BAAoE;AAG7E,SAAS,WAAW,2BAAiE;AAGrF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,2BAAiE;AAG1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;",
6
+ "names": []
7
+ }
@@ -0,0 +1,6 @@
1
+ export declare const ShaderColorSpaces: {
2
+ readonly rgb: 0;
3
+ readonly oklch: 1;
4
+ };
5
+ export type ShaderColorSpace = keyof typeof ShaderColorSpaces;
6
+ export declare const declareOklchTransforms = "\n\n// magic numbers (and magic could be better tbh)\n#define OKLCH_CHROMA_THRESHOLD .001\n#define OKLCH_HUE_NEUTRALIZER - 2.\n\nvec3 srgbToLinear(vec3 srgb) {\n return pow(srgb, vec3(2.2));\n}\n\nvec3 linearToSrgb(vec3 linear) {\n return pow(linear, vec3(1.0 / 2.2));\n}\n\nvec3 LrgbToOklab(vec3 rgb) {\n float L = pow(0.4122214708 * rgb.r + 0.5363325363 * rgb.g + 0.0514459929 * rgb.b, 1.0 / 3.0);\n float M = pow(0.2119034982 * rgb.r + 0.6806995451 * rgb.g + 0.1073969566 * rgb.b, 1.0 / 3.0);\n float S = pow(0.0883024619 * rgb.r + 0.2817188376 * rgb.g + 0.6299787005 * rgb.b, 1.0 / 3.0);\n return vec3(\n 0.2104542553 * L + 0.793617785 * M - 0.0040720468 * S,\n 1.9779984951 * L - 2.428592205 * M + 0.4505937099 * S,\n 0.0259040371 * L + 0.7827717662 * M - 0.808675766 * S\n );\n}\n\nvec3 OklabToLrgb(vec3 oklab) {\n float L = oklab.x;\n float a = oklab.y;\n float b = oklab.z;\n\n float l_ = L + 0.3963377774 * a + 0.2158037573 * b;\n float m_ = L - 0.1055613458 * a - 0.0638541728 * b;\n float s_ = L - 0.0894841775 * a - 1.291485548 * b;\n\n float l = l_ * l_ * l_;\n float m = m_ * m_ * m_;\n float s = s_ * s_ * s_;\n\n return vec3(\n 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s\n );\n}\n\nvec3 oklabToOklch(vec3 oklab) {\n float C = length(oklab.yz);\n float H = atan(oklab.z, oklab.y);\n if (C < OKLCH_CHROMA_THRESHOLD) {\n H = OKLCH_HUE_NEUTRALIZER;\n }\n return vec3(oklab.x, C, H);\n}\n\nvec3 oklchToOklab(vec3 oklch) {\n float a = oklch.y * cos(oklch.z);\n float b = oklch.y * sin(oklch.z);\n return vec3(oklch.x, a, b);\n}\n\nfloat mixHue(float h1, float h2, float mixer) {\n float delta = mod(h2 - h1 + PI, TWO_PI) - PI;\n return h1 + mixer * delta;\n}\n\nvec3 srgbToOklab(vec3 rgb) {\n return oklabToOklch(LrgbToOklab(srgbToLinear(rgb)));\n}\n\nvec3 oklabToSrgb(vec3 oklab) {\n return linearToSrgb(OklabToLrgb(oklchToOklab(oklab)));\n}\n\nvec3 mixOklabVector(vec3 color1, vec3 color2, float mixer) {\n color1.x = mix(color1.x, color2.x, mixer);\n color1.y = mix(color1.y, color2.y, mixer);\n if (color1.y > OKLCH_CHROMA_THRESHOLD && color2.y > OKLCH_CHROMA_THRESHOLD) {\n color1.z = mixHue(color1.z, color2.z, mixer);\n }\n return color1;\n}\n";
@@ -0,0 +1,96 @@
1
+ /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
+ * Paper Shaders *
3
+ * https://github.com/paper-design/shaders *
4
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
+
6
+ const ShaderColorSpaces = {
7
+ rgb: 0,
8
+ oklch: 1
9
+ };
10
+ const declareOklchTransforms = `
11
+
12
+ // magic numbers (and magic could be better tbh)
13
+ #define OKLCH_CHROMA_THRESHOLD .001
14
+ #define OKLCH_HUE_NEUTRALIZER - 2.
15
+
16
+ vec3 srgbToLinear(vec3 srgb) {
17
+ return pow(srgb, vec3(2.2));
18
+ }
19
+
20
+ vec3 linearToSrgb(vec3 linear) {
21
+ return pow(linear, vec3(1.0 / 2.2));
22
+ }
23
+
24
+ vec3 LrgbToOklab(vec3 rgb) {
25
+ float L = pow(0.4122214708 * rgb.r + 0.5363325363 * rgb.g + 0.0514459929 * rgb.b, 1.0 / 3.0);
26
+ float M = pow(0.2119034982 * rgb.r + 0.6806995451 * rgb.g + 0.1073969566 * rgb.b, 1.0 / 3.0);
27
+ float S = pow(0.0883024619 * rgb.r + 0.2817188376 * rgb.g + 0.6299787005 * rgb.b, 1.0 / 3.0);
28
+ return vec3(
29
+ 0.2104542553 * L + 0.793617785 * M - 0.0040720468 * S,
30
+ 1.9779984951 * L - 2.428592205 * M + 0.4505937099 * S,
31
+ 0.0259040371 * L + 0.7827717662 * M - 0.808675766 * S
32
+ );
33
+ }
34
+
35
+ vec3 OklabToLrgb(vec3 oklab) {
36
+ float L = oklab.x;
37
+ float a = oklab.y;
38
+ float b = oklab.z;
39
+
40
+ float l_ = L + 0.3963377774 * a + 0.2158037573 * b;
41
+ float m_ = L - 0.1055613458 * a - 0.0638541728 * b;
42
+ float s_ = L - 0.0894841775 * a - 1.291485548 * b;
43
+
44
+ float l = l_ * l_ * l_;
45
+ float m = m_ * m_ * m_;
46
+ float s = s_ * s_ * s_;
47
+
48
+ return vec3(
49
+ 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
50
+ -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
51
+ -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
52
+ );
53
+ }
54
+
55
+ vec3 oklabToOklch(vec3 oklab) {
56
+ float C = length(oklab.yz);
57
+ float H = atan(oklab.z, oklab.y);
58
+ if (C < OKLCH_CHROMA_THRESHOLD) {
59
+ H = OKLCH_HUE_NEUTRALIZER;
60
+ }
61
+ return vec3(oklab.x, C, H);
62
+ }
63
+
64
+ vec3 oklchToOklab(vec3 oklch) {
65
+ float a = oklch.y * cos(oklch.z);
66
+ float b = oklch.y * sin(oklch.z);
67
+ return vec3(oklch.x, a, b);
68
+ }
69
+
70
+ float mixHue(float h1, float h2, float mixer) {
71
+ float delta = mod(h2 - h1 + PI, TWO_PI) - PI;
72
+ return h1 + mixer * delta;
73
+ }
74
+
75
+ vec3 srgbToOklab(vec3 rgb) {
76
+ return oklabToOklch(LrgbToOklab(srgbToLinear(rgb)));
77
+ }
78
+
79
+ vec3 oklabToSrgb(vec3 oklab) {
80
+ return linearToSrgb(OklabToLrgb(oklchToOklab(oklab)));
81
+ }
82
+
83
+ vec3 mixOklabVector(vec3 color1, vec3 color2, float mixer) {
84
+ color1.x = mix(color1.x, color2.x, mixer);
85
+ color1.y = mix(color1.y, color2.y, mixer);
86
+ if (color1.y > OKLCH_CHROMA_THRESHOLD && color2.y > OKLCH_CHROMA_THRESHOLD) {
87
+ color1.z = mixHue(color1.z, color2.z, mixer);
88
+ }
89
+ return color1;
90
+ }
91
+ `;
92
+ export {
93
+ ShaderColorSpaces,
94
+ declareOklchTransforms
95
+ };
96
+ //# sourceMappingURL=shader-color-spaces.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/shader-color-spaces.ts"],
4
+ "sourcesContent": ["export const ShaderColorSpaces = {\r\n rgb: 0,\r\n oklch: 1,\r\n} as const;\r\n\r\nexport type ShaderColorSpace = keyof typeof ShaderColorSpaces;\r\n\r\nexport const declareOklchTransforms = `\r\n\r\n// magic numbers (and magic could be better tbh)\r\n#define OKLCH_CHROMA_THRESHOLD .001\r\n#define OKLCH_HUE_NEUTRALIZER - 2.\r\n\r\nvec3 srgbToLinear(vec3 srgb) {\r\n return pow(srgb, vec3(2.2));\r\n}\r\n\r\nvec3 linearToSrgb(vec3 linear) {\r\n return pow(linear, vec3(1.0 / 2.2));\r\n}\r\n\r\nvec3 LrgbToOklab(vec3 rgb) {\r\n float L = pow(0.4122214708 * rgb.r + 0.5363325363 * rgb.g + 0.0514459929 * rgb.b, 1.0 / 3.0);\r\n float M = pow(0.2119034982 * rgb.r + 0.6806995451 * rgb.g + 0.1073969566 * rgb.b, 1.0 / 3.0);\r\n float S = pow(0.0883024619 * rgb.r + 0.2817188376 * rgb.g + 0.6299787005 * rgb.b, 1.0 / 3.0);\r\n return vec3(\r\n 0.2104542553 * L + 0.793617785 * M - 0.0040720468 * S,\r\n 1.9779984951 * L - 2.428592205 * M + 0.4505937099 * S,\r\n 0.0259040371 * L + 0.7827717662 * M - 0.808675766 * S\r\n );\r\n}\r\n\r\nvec3 OklabToLrgb(vec3 oklab) {\r\n float L = oklab.x;\r\n float a = oklab.y;\r\n float b = oklab.z;\r\n\r\n float l_ = L + 0.3963377774 * a + 0.2158037573 * b;\r\n float m_ = L - 0.1055613458 * a - 0.0638541728 * b;\r\n float s_ = L - 0.0894841775 * a - 1.291485548 * b;\r\n\r\n float l = l_ * l_ * l_;\r\n float m = m_ * m_ * m_;\r\n float s = s_ * s_ * s_;\r\n\r\n return vec3(\r\n 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\r\n -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\r\n -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s\r\n );\r\n}\r\n\r\nvec3 oklabToOklch(vec3 oklab) {\r\n float C = length(oklab.yz);\r\n float H = atan(oklab.z, oklab.y);\r\n if (C < OKLCH_CHROMA_THRESHOLD) {\r\n H = OKLCH_HUE_NEUTRALIZER;\r\n }\r\n return vec3(oklab.x, C, H);\r\n}\r\n\r\nvec3 oklchToOklab(vec3 oklch) {\r\n float a = oklch.y * cos(oklch.z);\r\n float b = oklch.y * sin(oklch.z);\r\n return vec3(oklch.x, a, b);\r\n}\r\n\r\nfloat mixHue(float h1, float h2, float mixer) {\r\n float delta = mod(h2 - h1 + PI, TWO_PI) - PI;\r\n return h1 + mixer * delta;\r\n}\r\n\r\nvec3 srgbToOklab(vec3 rgb) {\r\n return oklabToOklch(LrgbToOklab(srgbToLinear(rgb)));\r\n}\r\n\r\nvec3 oklabToSrgb(vec3 oklab) {\r\n return linearToSrgb(OklabToLrgb(oklchToOklab(oklab)));\r\n}\r\n\r\nvec3 mixOklabVector(vec3 color1, vec3 color2, float mixer) {\r\n color1.x = mix(color1.x, color2.x, mixer);\r\n color1.y = mix(color1.y, color2.y, mixer);\r\n if (color1.y > OKLCH_CHROMA_THRESHOLD && color2.y > OKLCH_CHROMA_THRESHOLD) {\r\n color1.z = mixHue(color1.z, color2.z, mixer);\r\n }\r\n return color1;\r\n}\r\n`;\r\n"],
5
+ "mappings": ";;;;;AAAO,MAAM,oBAAoB;AAAA,EAC/B,KAAK;AAAA,EACL,OAAO;AACT;AAIO,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
+ "names": []
7
+ }
@@ -0,0 +1,199 @@
1
+ import { type SharedRenderTarget, type SharedTargetSize } from './shared-webgl-renderer.js';
2
+ export declare class ShaderMount implements SharedRenderTarget {
3
+ parentElement: PaperShaderElement;
4
+ canvasElement: HTMLCanvasElement;
5
+ private gl;
6
+ /** Set when this mount draws through the context shared by all shared mounts, null when it owns a context */
7
+ private sharedRenderer;
8
+ /** The visible canvas's 2D context in shared mode, where each frame is copied to */
9
+ private context2d;
10
+ private webGlContextAttributes;
11
+ private program;
12
+ private vertexArray;
13
+ private positionBuffer;
14
+ private uniformLocations;
15
+ /** The fragment shader that we are using */
16
+ private fragmentShader;
17
+ /** Stores the RAF for the render loop */
18
+ private rafId;
19
+ /** Time of the last rendered frame */
20
+ private lastRenderTime;
21
+ /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */
22
+ private currentFrame;
23
+ /** The speed that we progress through animation time (multiplies by delta time every update). Allows negatives to play in reverse. If set to 0, rAF will stop entirely so static shaders have no recurring performance costs */
24
+ private speed;
25
+ /** Actual speed used that accounts for visibility: we pause the shader if the tab is hidden or the element out of the viewport */
26
+ private currentSpeed;
27
+ /** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */
28
+ private providedUniforms;
29
+ /** Names of the uniforms that should have mipmaps generated for them */
30
+ private mipmaps;
31
+ /** Just a sanity check to make sure frames don't run after we're disposed */
32
+ private hasBeenDisposed;
33
+ /** If the resolution of the canvas has changed since the last render */
34
+ private resolutionChanged;
35
+ /** Store textures that are provided by the user */
36
+ private textures;
37
+ private minPixelRatio;
38
+ private maxPixelCount;
39
+ private isSafari;
40
+ private uniformCache;
41
+ private textureUnitMap;
42
+ private ownerDocument;
43
+ /** Shared mode: whether time is advancing from frame to frame, as opposed to one-off redraws */
44
+ private sharedLoopActive;
45
+ /** Shared mode: the canvas size to apply right before the next draw (resizing clears the canvas) */
46
+ private pendingCanvasWidth;
47
+ private pendingCanvasHeight;
48
+ private contextRecoveries;
49
+ /** Dedicated mode: the context was lost and a new one goes in once the mount is visible */
50
+ private awaitingNewContext;
51
+ constructor(
52
+ /** The div you'd like to mount the shader to. The shader will match its size. */
53
+ parentElement: HTMLElement, fragmentShader: string, uniforms: ShaderMountUniforms, webGlContextAttributes?: WebGLContextAttributes,
54
+ /** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */
55
+ speed?: number,
56
+ /** Pass a frame to offset the starting u_time value and give deterministic results*/
57
+ frame?: number,
58
+ /**
59
+ * The minimum pixel ratio to render at, defaults to 2.
60
+ * May be reduced to improve performance or increased together with `maxPixelCount` to improve antialiasing.
61
+ */
62
+ minPixelRatio?: number,
63
+ /**
64
+ * The maximum amount of physical device pixels to render for the shader,
65
+ * by default it's 1920 * 1080 * 2x dpi (per each side) = 8,294,400 pixels of a 4K screen.
66
+ * Actual DOM size of the canvas can be larger, it will just lose quality after this.
67
+ *
68
+ * May be reduced to improve performance or increased to improve quality on high-resolution screens.
69
+ */
70
+ maxPixelCount?: number,
71
+ /** Names of the uniforms that should have mipmaps generated for them */
72
+ mipmaps?: string[],
73
+ /**
74
+ * "shared" (the default) draws through one WebGL context shared by every shared mount on the page, so any number
75
+ * of shaders can run without hitting the browser's context limit. "dedicated" gives this mount its own context,
76
+ * which suits a large, always visible shader like a full screen background. Defaults to "dedicated" when
77
+ * `webGlContextAttributes` are passed, since a shared context can't honor per-mount attributes.
78
+ */
79
+ webGlContextMode?: WebGlContextMode);
80
+ /** Create every GL resource this mount owns on the current context. Also rebuilds them after a context is replaced */
81
+ private initGL;
82
+ private initProgram;
83
+ private setupPositionAttribute;
84
+ private setupUniforms;
85
+ /**
86
+ * The scale that we should render at.
87
+ * - Used to target 2x rendering even on 1x screens for better antialiasing
88
+ * - Prevents the virtual resolution from going beyond the maximum resolution
89
+ * - Accounts for the page zoom level so we render in physical device pixels rather than CSS pixels
90
+ */
91
+ private renderScale;
92
+ private parentWidth;
93
+ private parentHeight;
94
+ private parentDevicePixelWidth;
95
+ private parentDevicePixelHeight;
96
+ private devicePixelsSupported;
97
+ private intersectionObserver;
98
+ private isInViewport;
99
+ private resizeObserver;
100
+ private setupResizeObserver;
101
+ private setupIntersectionObserver;
102
+ private handleVisualViewportChange;
103
+ /** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */
104
+ private handleResize;
105
+ private render;
106
+ /** Issue the draw call with this mount's program, geometry, textures and per-frame uniforms */
107
+ private draw;
108
+ private requestRender;
109
+ /** Draw the current state: right away with a dedicated context, on the next batched frame with the shared one */
110
+ private redraw;
111
+ /** @internal Shared renderer hook, see SharedRenderTarget */
112
+ prepareSharedFrame: (currentTime: number) => SharedTargetSize | null;
113
+ /** @internal Shared renderer hook, see SharedRenderTarget */
114
+ drawShared: (x: number, y: number) => void;
115
+ /** @internal Shared renderer hook, see SharedRenderTarget */
116
+ presentShared: (frame: ImageBitmap, x: number, y: number, width: number, height: number) => void;
117
+ /** @internal Shared renderer hook, see SharedRenderTarget */
118
+ finishSharedFrame: () => boolean;
119
+ /** @internal Shared renderer hook, see SharedRenderTarget */
120
+ restoreShared: (gl: WebGL2RenderingContext) => void;
121
+ /**
122
+ * A dedicated context was lost, usually because the page went over the browser's context limit and ours was the
123
+ * one that rendered least recently.
124
+ */
125
+ private handleContextLost;
126
+ /**
127
+ * We don't wait for 'webglcontextrestored': browsers restore an evicted context only once another context has been
128
+ * garbage collected, which can take a long time or never happen. A new canvas with a new context goes in instead,
129
+ * but only once the mount is on screen: every new context pushes the least recently used one out when the page is
130
+ * at the limit, so offscreen or hidden mounts replacing theirs would just take turns evicting each other.
131
+ */
132
+ private maybeReplaceDedicatedContext;
133
+ private replaceDedicatedContext;
134
+ /** Creates a texture from an image and sets it into a uniform value */
135
+ private setTextureUniform;
136
+ /** Utility: recursive equality test for all the uniforms */
137
+ private areUniformValuesEqual;
138
+ /** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */
139
+ private setUniformValues;
140
+ /** Gets the current total animation time from 0ms */
141
+ getCurrentFrame: () => number;
142
+ /** Set a frame to get a deterministic result, frames are literally just milliseconds from zero since the animation started */
143
+ setFrame: (newFrame: number) => void;
144
+ /** Set an animation speed (or 0 to stop animation) */
145
+ setSpeed: (newSpeed?: number) => void;
146
+ /** Apply the target speed, pausing (0) while the tab is hidden or the element is out of the viewport */
147
+ private updateCurrentSpeed;
148
+ private setCurrentSpeed;
149
+ /** Set the maximum pixel count for the shader, this will limit the number of pixels that will be rendered */
150
+ setMaxPixelCount: (newMaxPixelCount?: number) => void;
151
+ /** Set the minimum pixel ratio for the shader */
152
+ setMinPixelRatio: (newMinPixelRatio?: number) => void;
153
+ /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */
154
+ setUniforms: (newUniforms: ShaderMountUniforms) => void;
155
+ private handleDocumentVisibilityChange;
156
+ /** Dispose of the shader mount, cleaning up all of the WebGL resources */
157
+ dispose: () => void;
158
+ }
159
+ /** The parent `<div>` element that has a ShaderMount available on it */
160
+ export interface PaperShaderElement extends HTMLElement {
161
+ paperShaderMount: ShaderMount | undefined;
162
+ }
163
+ /**
164
+ * How a ShaderMount gets its WebGL context:
165
+ * - "shared": draws through one context shared by all shared mounts, so any number of shaders stays within the
166
+ * browser's context limit. Each frame is copied into the mount's own canvas, a small cost for the typical widget.
167
+ * - "dedicated": owns a context, drawn without a copy. Best for a single large shader such as a full screen background.
168
+ */
169
+ export type WebGlContextMode = 'shared' | 'dedicated';
170
+ /** Check if an element is a Paper shader element */
171
+ export declare function isPaperShaderElement(element: HTMLElement): element is PaperShaderElement;
172
+ /**
173
+ * Uniform types that we support to be auto-mapped into the fragment shader
174
+ *
175
+ * We accept undefined as a convenience for server rendering, when some things may be undefined
176
+ * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering
177
+ */
178
+ export interface ShaderMountUniforms {
179
+ [key: string]: boolean | number | number[] | number[][] | HTMLImageElement | undefined;
180
+ }
181
+ export interface ShaderMotionParams {
182
+ speed?: number;
183
+ frame?: number;
184
+ }
185
+ export type ShaderPreset<T> = {
186
+ name: string;
187
+ params: Required<T>;
188
+ };
189
+ export type ImageShaderPreset<T> = {
190
+ name: string;
191
+ /**
192
+ * Params for the shader excluding the image.
193
+ * Image is excluded as it isn't considered a preset,
194
+ * e.g. when switching between presets it shouldn't switch the image.
195
+ *
196
+ * While we exclude images from presets they should still be set with a default prop value so the code-first usage of shaders remains great.
197
+ */
198
+ params: Required<Omit<T, 'image'>>;
199
+ };