svelte-ag 1.1.8 → 1.1.9

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 (4) hide show
  1. package/dist/components/gradient/Gradient.svelte +47 -1
  2. package/dist/components/gradient/Gradient.svelte.d.ts.map +1 -1
  3. package/package.json +1 -1
  4. package/src/lib/components/gradient/Gradient.svelte +47 -1
package/dist/components/gradient/Gradient.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { WebGlShader } from '../shader/index.js';
3
3
  import type { Vec2, Vec4 } from '../../utils/glsl.js';
4
- import fragment from './gradient.frag?raw';
4
+ // import fragment from './gradient.frag';
5
5
  import { cn } from '../../utils';
6
6
  import type { BitsPrimitiveDivAttributes } from 'bits-ui';
7
7
 
@@ -38,6 +38,52 @@
38
38
 
39
39
  return `radial-gradient(ellipse ${sizeX}% ${sizeY}% at ${posX}% ${posY}%, ${centerColorRgba}, ${edgeColorRgba})`;
40
40
  });
41
+
42
+ const fragment = `
43
+ #version 300 es
44
+
45
+ precision highp float;
46
+
47
+ out vec4 fragColor;
48
+
49
+ uniform vec2 u_resolution;
50
+ uniform vec2 u_offset;
51
+
52
+ uniform vec2 u_centerPos;
53
+ uniform vec2 u_radius;
54
+ uniform float u_noise;
55
+ uniform vec4 u_centerColor;
56
+ uniform vec4 u_edgeColor;
57
+
58
+ // Pseudo-random number between 0 and 1 generator
59
+ float dither(vec2 pos) {
60
+ return fract(sin(dot(pos, vec2(12.9898, 78.233))) * 43758.5453);
61
+ }
62
+
63
+ void main() {
64
+ vec2 fragPos = gl_FragCoord.xy + u_offset;
65
+
66
+ vec2 centerPx = u_centerPos * u_resolution;
67
+ vec2 radiusPx = u_radius * u_resolution;
68
+
69
+ // Calculate distance from the center of the canvas
70
+ float d = distance(fragPos, u_resolution / 2.0);
71
+
72
+ // Calculate max distance from center to corner of the canvas
73
+ float maxDist = length(u_resolution / 2.0);
74
+ // float t = d / maxDist;
75
+
76
+ // compute “stretched” distance
77
+ vec2 diff = fragPos - centerPx;
78
+ vec2 norm = diff / radiusPx;
79
+ float t = length(norm);
80
+
81
+ // Dither strength (1/255 ~ 8-bit step size)
82
+ float noise = (dither(gl_FragCoord.xy) - 0.5) * (u_noise / 255.0);
83
+
84
+ fragColor = mix(u_centerColor, u_edgeColor, clamp(t + noise, 0.0, 1.0));
85
+ }
86
+ `;
41
87
  </script>
42
88
 
43
89
  <div class={cn('size-full', className)}>
package/dist/components/gradient/Gradient.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Gradient.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/gradient/Gradient.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAEzD,KAAK,gBAAgB,GAAI,0BAA0B,GAAG;IACnD,MAAM,EAAE,IAAI,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,MAAM,CAAC,EAAE,IAAI,CAAC;CACf,CAAC;AAqDJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Gradient.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/gradient/Gradient.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAEzD,KAAK,gBAAgB,GAAI,0BAA0B,GAAG;IACnD,MAAM,EAAE,IAAI,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,MAAM,CAAC,EAAE,IAAI,CAAC;CACf,CAAC;AAmGJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelte-ag",
3
- "version": "1.1.8",
3
+ "version": "1.1.9",
4
4
  "description": "Useful svelte components",
5
5
  "bugs": "https://github.com/ageorgeh/svelte-ag/issues",
6
6
  "repository": {
package/src/lib/components/gradient/Gradient.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { WebGlShader } from '$components/shader/index.js';
3
3
  import type { Vec2, Vec4 } from '$utils/glsl.js';
4
- import fragment from './gradient.frag?raw';
4
+ // import fragment from './gradient.frag';
5
5
  import { cn } from '$utils';
6
6
  import type { BitsPrimitiveDivAttributes } from 'bits-ui';
7
7
 
@@ -38,6 +38,52 @@
38
38
 
39
39
  return `radial-gradient(ellipse ${sizeX}% ${sizeY}% at ${posX}% ${posY}%, ${centerColorRgba}, ${edgeColorRgba})`;
40
40
  });
41
+
42
+ const fragment = `
43
+ #version 300 es
44
+
45
+ precision highp float;
46
+
47
+ out vec4 fragColor;
48
+
49
+ uniform vec2 u_resolution;
50
+ uniform vec2 u_offset;
51
+
52
+ uniform vec2 u_centerPos;
53
+ uniform vec2 u_radius;
54
+ uniform float u_noise;
55
+ uniform vec4 u_centerColor;
56
+ uniform vec4 u_edgeColor;
57
+
58
+ // Pseudo-random number between 0 and 1 generator
59
+ float dither(vec2 pos) {
60
+ return fract(sin(dot(pos, vec2(12.9898, 78.233))) * 43758.5453);
61
+ }
62
+
63
+ void main() {
64
+ vec2 fragPos = gl_FragCoord.xy + u_offset;
65
+
66
+ vec2 centerPx = u_centerPos * u_resolution;
67
+ vec2 radiusPx = u_radius * u_resolution;
68
+
69
+ // Calculate distance from the center of the canvas
70
+ float d = distance(fragPos, u_resolution / 2.0);
71
+
72
+ // Calculate max distance from center to corner of the canvas
73
+ float maxDist = length(u_resolution / 2.0);
74
+ // float t = d / maxDist;
75
+
76
+ // compute “stretched” distance
77
+ vec2 diff = fragPos - centerPx;
78
+ vec2 norm = diff / radiusPx;
79
+ float t = length(norm);
80
+
81
+ // Dither strength (1/255 ~ 8-bit step size)
82
+ float noise = (dither(gl_FragCoord.xy) - 0.5) * (u_noise / 255.0);
83
+
84
+ fragColor = mix(u_centerColor, u_edgeColor, clamp(t + noise, 0.0, 1.0));
85
+ }
86
+ `;
41
87
  </script>
42
88
 
43
89
  <div class={cn('size-full', className)}>