feat(Snowflakes): Add support using opacity for image snowflakes

README.md

@@ -70,6 +70,7 @@ All available properties are detailed below.
 | `speed`           | The minimum and maximum speed of the snowflake (in pixels per frame).<br/><br/>The speed determines how quickly the snowflake moves along the y axis (vertical speed).<br/><br/>The value for each snowflake will be randomly selected within this range.                                | `[1.0, 3.0]`  |
 | `style`           | Any style properties that will be passed to the canvas element.                                                                                                                                                                                                                          | `undefined`   |
 | `wind`            | The minimum and maximum wind of the snowflake (in pixels per frame).<br/><br/>The wind determines how quickly the snowflake moves along the x axis (horizontal speed).<br/><br/>The value for each snowflake will be randomly selected within this range.                                | `[-0.5, 2.0]` |
+| `opacity`            | The minimum and maximum opacity of the snowflake.<br/><br/>The value for each snowflake will be randomly selected within this range.                                | `[1, 1]` |
 
 ## Using Images
 

packages/demo/src/App.tsx

@@ -14,7 +14,7 @@ snowflake.src = logo
 const images = [snowflake]
 
 const App = () => {
-  const { color, snowflakeCount, radius, speed, wind, useImages } = useSettingsStore()
+  const { color, snowflakeCount, radius, speed, wind, useImages, opacity } = useSettingsStore()
 
   return (
     <div className="app">
@@ -25,6 +25,7 @@ const App = () => {
         speed={speed}
         wind={wind}
         images={useImages ? images : undefined}
+        opacity={opacity}
       />
       <a className="title" href={githubURL} style={{ color }}>
         <img src={logo} alt="Snowflake Logo" />

packages/demo/src/components/Settings/Settings.tsx

@@ -107,21 +107,36 @@ const Settings = () => {
             />
           </div>
           {settings.useImages ? (
-            <div>
-              <Typography gutterBottom>
-                Rotation Speed <ValueChip label={`Min ${settings?.rotationSpeed?.[0]}`} />
-                <ValueChip label={`Max ${settings?.rotationSpeed?.[1]}`} />
-              </Typography>
-              <Slider
-                value={settings.rotationSpeed}
-                min={-5}
-                max={10}
-                step={0.5}
-                onChange={(_, value) =>
-                  settings.update({ rotationSpeed: value as [number, number] })
-                }
-              />
-            </div>
+            <>
+              <div>
+                <Typography gutterBottom>
+                  Opacity <ValueChip label={`Min ${settings?.opacity?.[0]}`} />
+                  <ValueChip label={`Max ${settings?.opacity?.[1]}`} />
+                </Typography>
+                <Slider
+                  value={settings.opacity}
+                  min={0}
+                  max={1}
+                  step={0.1}
+                  onChange={(_, value) => settings.update({ opacity: value as [number, number] })}
+                />
+              </div>
+              <div>
+                <Typography gutterBottom>
+                  Rotation Speed <ValueChip label={`Min ${settings?.rotationSpeed?.[0]}`} />
+                  <ValueChip label={`Max ${settings?.rotationSpeed?.[1]}`} />
+                </Typography>
+                <Slider
+                  value={settings.rotationSpeed}
+                  min={-5}
+                  max={10}
+                  step={0.5}
+                  onChange={(_, value) =>
+                    settings.update({ rotationSpeed: value as [number, number] })
+                  }
+                />
+              </div>
+            </>
           ) : (
             <Box my={2}>
               <Typography gutterBottom>

packages/demo/src/settings.tsx

@@ -14,6 +14,7 @@ export const useSettingsStore = create<SnowfallSettings>((set) => ({
   speed: [0.5, 3.0],
   wind: [-0.5, 2.0],
   rotationSpeed: [-1.0, 1.0],
+  opacity: [0.1, 0.2],
   useImages: false,
   update: (changes) => set(changes),
   setUseImages: (useImages) => {
@@ -22,5 +23,5 @@ export const useSettingsStore = create<SnowfallSettings>((set) => ({
     } else {
       return set({ useImages, radius: [0.5, 3] })
     }
-  }
+  },
 }))

packages/react-snowfall/lib/Snowfall.d.ts

@@ -6,5 +6,5 @@ export interface SnowfallProps extends Partial<SnowfallCanvasConfig> {
      */
     style?: React.CSSProperties;
 }
-export declare const Snowfall: ({ color, changeFrequency, radius, speed, wind, rotationSpeed, snowflakeCount, images, style, }?: SnowfallProps) => JSX.Element;
+export declare const Snowfall: ({ color, changeFrequency, radius, speed, wind, rotationSpeed, opacity, snowflakeCount, images, style, }?: SnowfallProps) => JSX.Element;
 export default Snowfall;

packages/react-snowfall/lib/Snowflake.d.ts

@@ -54,6 +54,12 @@ export interface SnowflakeProps {
      * The default value is `[-1.0, 1.0]`.
      */
     rotationSpeed: [number, number];
+    /**
+     * The minimum and maximum opacity of the snowflake image.
+     *
+     * This value only applies to snowflakes that are using images.
+     */
+    opacity: [number, number];
 }
 export type SnowflakeConfig = Partial<SnowflakeProps>;
 export declare const defaultConfig: SnowflakeProps;