@stianlarsen/react-light-beam 2.1.2 → 3.1.0

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 (8) hide show
  1. package/README.md +374 -199
  2. package/dist/index.d.mts +111 -1
  3. package/dist/index.d.ts +111 -1
  4. package/dist/index.js +326 -97
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +317 -88
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +6 -5
package/dist/index.d.mts CHANGED
@@ -1,5 +1,83 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
 
3
+ type DustParticlesConfig = {
4
+ /**
5
+ * Enable floating dust particles in the beam
6
+ * @default false
7
+ */
8
+ enabled?: boolean;
9
+ /**
10
+ * Number of dust particles
11
+ * @default 30
12
+ */
13
+ count?: number;
14
+ /**
15
+ * Animation speed multiplier (1 = normal, 2 = twice as fast)
16
+ * @default 1
17
+ */
18
+ speed?: number;
19
+ /**
20
+ * Particle size range [min, max] in pixels
21
+ * @default [1, 3]
22
+ */
23
+ sizeRange?: [number, number];
24
+ /**
25
+ * Particle opacity range [min, max]
26
+ * @default [0.2, 0.6]
27
+ */
28
+ opacityRange?: [number, number];
29
+ /**
30
+ * Particle color (inherits beam color if not specified)
31
+ */
32
+ color?: string;
33
+ };
34
+
35
+ type MistConfig = {
36
+ /**
37
+ * Enable mist/fog effect
38
+ * @default false
39
+ */
40
+ enabled?: boolean;
41
+ /**
42
+ * Mist intensity (0-1)
43
+ * @default 0.3
44
+ */
45
+ intensity?: number;
46
+ /**
47
+ * Animation speed multiplier
48
+ * @default 1
49
+ */
50
+ speed?: number;
51
+ /**
52
+ * Number of layered mist effects for depth
53
+ * @default 2
54
+ */
55
+ layers?: number;
56
+ };
57
+
58
+ type PulseConfig = {
59
+ /**
60
+ * Enable rhythmic pulse effect
61
+ * @default false
62
+ */
63
+ enabled?: boolean;
64
+ /**
65
+ * Pulse duration in seconds
66
+ * @default 2
67
+ */
68
+ duration?: number;
69
+ /**
70
+ * Pulse intensity (0-1) - how much brightness varies
71
+ * @default 0.2
72
+ */
73
+ intensity?: number;
74
+ /**
75
+ * GSAP easing function
76
+ * @default "sine.inOut"
77
+ */
78
+ easing?: string;
79
+ };
80
+
3
81
  type LightBeamProps = {
4
82
  className?: string;
5
83
  /**
@@ -21,8 +99,40 @@ type LightBeamProps = {
21
99
  * @default false
22
100
  */
23
101
  disableDefaultStyles?: boolean;
102
+
103
+ /**
104
+ * GSAP ScrollTrigger start position
105
+ * @default "top bottom"
106
+ * @example "top center", "center bottom", "top 80%"
107
+ */
108
+ scrollStart?: string;
109
+
110
+ /**
111
+ * GSAP ScrollTrigger end position
112
+ * @default "top top"
113
+ * @example "top 20%", "center center", "bottom top"
114
+ */
115
+ scrollEnd?: string;
116
+
117
+ /**
118
+ * Dust particles configuration
119
+ * @example dustParticles={{ enabled: true, count: 50, speed: 1.5 }}
120
+ */
121
+ dustParticles?: DustParticlesConfig;
122
+
123
+ /**
124
+ * Mist/fog effect configuration
125
+ * @example mist={{ enabled: true, intensity: 0.5, layers: 3 }}
126
+ */
127
+ mist?: MistConfig;
128
+
129
+ /**
130
+ * Pulse effect configuration
131
+ * @example pulse={{ enabled: true, duration: 3, intensity: 0.3 }}
132
+ */
133
+ pulse?: PulseConfig;
24
134
  };
25
135
 
26
- declare const LightBeam: ({ className, style, colorLightmode, colorDarkmode, maskLightByProgress, fullWidth, invert, id, onLoaded, scrollElement, disableDefaultStyles, }: LightBeamProps) => react_jsx_runtime.JSX.Element;
136
+ declare const LightBeam: ({ className, style, colorLightmode, colorDarkmode, maskLightByProgress, fullWidth, invert, id, onLoaded, scrollElement, disableDefaultStyles, scrollStart, scrollEnd, dustParticles, mist, pulse, }: LightBeamProps) => react_jsx_runtime.JSX.Element;
27
137
 
28
138
  export { LightBeam };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,83 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
 
3
+ type DustParticlesConfig = {
4
+ /**
5
+ * Enable floating dust particles in the beam
6
+ * @default false
7
+ */
8
+ enabled?: boolean;
9
+ /**
10
+ * Number of dust particles
11
+ * @default 30
12
+ */
13
+ count?: number;
14
+ /**
15
+ * Animation speed multiplier (1 = normal, 2 = twice as fast)
16
+ * @default 1
17
+ */
18
+ speed?: number;
19
+ /**
20
+ * Particle size range [min, max] in pixels
21
+ * @default [1, 3]
22
+ */
23
+ sizeRange?: [number, number];
24
+ /**
25
+ * Particle opacity range [min, max]
26
+ * @default [0.2, 0.6]
27
+ */
28
+ opacityRange?: [number, number];
29
+ /**
30
+ * Particle color (inherits beam color if not specified)
31
+ */
32
+ color?: string;
33
+ };
34
+
35
+ type MistConfig = {
36
+ /**
37
+ * Enable mist/fog effect
38
+ * @default false
39
+ */
40
+ enabled?: boolean;
41
+ /**
42
+ * Mist intensity (0-1)
43
+ * @default 0.3
44
+ */
45
+ intensity?: number;
46
+ /**
47
+ * Animation speed multiplier
48
+ * @default 1
49
+ */
50
+ speed?: number;
51
+ /**
52
+ * Number of layered mist effects for depth
53
+ * @default 2
54
+ */
55
+ layers?: number;
56
+ };
57
+
58
+ type PulseConfig = {
59
+ /**
60
+ * Enable rhythmic pulse effect
61
+ * @default false
62
+ */
63
+ enabled?: boolean;
64
+ /**
65
+ * Pulse duration in seconds
66
+ * @default 2
67
+ */
68
+ duration?: number;
69
+ /**
70
+ * Pulse intensity (0-1) - how much brightness varies
71
+ * @default 0.2
72
+ */
73
+ intensity?: number;
74
+ /**
75
+ * GSAP easing function
76
+ * @default "sine.inOut"
77
+ */
78
+ easing?: string;
79
+ };
80
+
3
81
  type LightBeamProps = {
4
82
  className?: string;
5
83
  /**
@@ -21,8 +99,40 @@ type LightBeamProps = {
21
99
  * @default false
22
100
  */
23
101
  disableDefaultStyles?: boolean;
102
+
103
+ /**
104
+ * GSAP ScrollTrigger start position
105
+ * @default "top bottom"
106
+ * @example "top center", "center bottom", "top 80%"
107
+ */
108
+ scrollStart?: string;
109
+
110
+ /**
111
+ * GSAP ScrollTrigger end position
112
+ * @default "top top"
113
+ * @example "top 20%", "center center", "bottom top"
114
+ */
115
+ scrollEnd?: string;
116
+
117
+ /**
118
+ * Dust particles configuration
119
+ * @example dustParticles={{ enabled: true, count: 50, speed: 1.5 }}
120
+ */
121
+ dustParticles?: DustParticlesConfig;
122
+
123
+ /**
124
+ * Mist/fog effect configuration
125
+ * @example mist={{ enabled: true, intensity: 0.5, layers: 3 }}
126
+ */
127
+ mist?: MistConfig;
128
+
129
+ /**
130
+ * Pulse effect configuration
131
+ * @example pulse={{ enabled: true, duration: 3, intensity: 0.3 }}
132
+ */
133
+ pulse?: PulseConfig;
24
134
  };
25
135
 
26
- declare const LightBeam: ({ className, style, colorLightmode, colorDarkmode, maskLightByProgress, fullWidth, invert, id, onLoaded, scrollElement, disableDefaultStyles, }: LightBeamProps) => react_jsx_runtime.JSX.Element;
136
+ declare const LightBeam: ({ className, style, colorLightmode, colorDarkmode, maskLightByProgress, fullWidth, invert, id, onLoaded, scrollElement, disableDefaultStyles, scrollStart, scrollEnd, dustParticles, mist, pulse, }: LightBeamProps) => react_jsx_runtime.JSX.Element;
27
137
 
28
138
  export { LightBeam };