New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@stianlarsen/meteors
Advanced tools
@stianlarsen/meteors - npm Package Compare versions
Comparing version 1.0.1 to 1.0.2
| { | ||
| "name": "@stianlarsen/meteors", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "description": "A dynamic and customizable React component for rendering realistic meteor animations on any container. Supports light and dark modes, and allows configuration for speed, size, and the number of meteors.", | ||
@@ -39,2 +39,6 @@ "main": "dist/index.js", | ||
| "homepage": "https://github.com/stianlars1/meteors#readme", | ||
| "dependencies": { | ||
| "react": "^18", | ||
| "react-dom": "^18" | ||
| }, | ||
| "peerDependencies": { | ||
@@ -48,6 +52,3 @@ "react": "^18", | ||
| "typescript": "^5.5.4" | ||
| }, | ||
| "dependencies": { | ||
| "shx": "^0.3.4" | ||
| } | ||
| } |
@@ -1,4 +0,4 @@ | ||
| # Meteors | ||
| # @stianlarsen/react-fade-effects | ||
| A dynamic and customizable React component for rendering realistic meteor animations on any container. Perfect for adding a unique and mesmerizing effect to your web applications. | ||
| A versatile React library for applying various fade-in effects to your UI components. Starting with the `FadeWords` component, this library will grow to include multiple fade-related components, such as fading text, images, children elements, and more. | ||
@@ -9,6 +9,6 @@ **Check out the [website](https://your-website-link.com) for demos, examples, and further info.** | ||
| - **Realistic Meteor Animations**: Simulate meteors shooting across the screen with customizable speed, size, and quantity. | ||
| - **Dynamic and Configurable**: Easily adjust the component’s behavior to suit your project, including options for light and dark modes, and custom colors. | ||
| - **Ease of Integration**: Drop the component into any container, and it will automatically adapt to the container's dimensions. | ||
| - **SCSS Modules**: Styled with SCSS modules, making it straightforward to integrate and customize within your existing project. | ||
| - **Smooth Fade Animations**: Easily create engaging fade-in effects for different types of UI elements. | ||
| - **Highly Configurable**: Adjust the animation's duration, delay, stagger time, and more to match your design needs. | ||
| - **Ease of Integration**: Drop the components into your project and customize them with minimal setup. | ||
| - **Built with TypeScript**: Ensures type safety and a better development experience. | ||
@@ -20,3 +20,3 @@ ## Installation | ||
| ```bash | ||
| npm install @stianlarsen/meteors | ||
| npm install @stianlarsen/react-fade-effects | ||
| ``` | ||
@@ -27,3 +27,3 @@ | ||
| ```bash | ||
| yarn add @stianlarsen/meteors | ||
| yarn add @stianlarsen/react-fade-effects | ||
| ``` | ||
@@ -33,21 +33,20 @@ | ||
| ### Meteors Component | ||
| ### FadeWords Component | ||
| Import and use the Meteors component in your React project: | ||
| The `FadeWords` component allows you to create smooth fade-in effects for text. | ||
| #### Example | ||
| ```jsx | ||
| import Meteors from "@stianlarsen/meteors"; | ||
| import { FadeWords } from "@stianlarsen/react-fade-effects"; | ||
| function App() { | ||
| return ( | ||
| <div style={{ position: "relative", width: "300px", height: "300px" }}> | ||
| <Meteors | ||
| speed={2} | ||
| size={50} | ||
| amount={20} | ||
| colorLightmode="black" | ||
| colorDarkmode="white" | ||
| fallingSide="right" | ||
| /> | ||
| </div> | ||
| <FadeWords | ||
| words="Effortless Task Management with TaskBuddy" | ||
| duration={1} | ||
| delay={0.2} | ||
| variant="up" | ||
| scaleSize={1.05} | ||
| /> | ||
| ); | ||
@@ -57,30 +56,29 @@ } | ||
| ## `Meteors` Component Props | ||
| #### `FadeWords` Component Props | ||
| The `Meteors` component accepts several props to customize its behavior and appearance: | ||
| The `FadeWords` component accepts several props to customize its behavior and appearance: | ||
| | Prop | Type | Description | | ||
| | ---------------- | -------- | ------------------------------------------------------------------------------------ | | ||
| | `speed` | `number` | The speed of the meteors' fall. Defaults to `1`. | | ||
| | `size` | `number` | The size of the meteors. Defaults to `50`. | | ||
| | `amount` | `number` | The number of meteors. Defaults to `20`. | | ||
| | `fallingSide` | `string` | Determines the direction of the meteor fall (`left` or `right`). Defaults to `left`. | | ||
| | `colorLightmode` | `string` | The color of the meteors in light mode. Defaults to `"rgba(0, 0, 0, 1)"`. | | ||
| | `colorDarkmode` | `string` | The color of the meteors in dark mode. Defaults to `"rgba(255, 255, 255, 1)"`. | | ||
| | Prop | Type | Description | | ||
| | ----------------- | ---------- | ------------------------------------------------------------------------------------------------------- | ------ | ------ | -------- | ------------------------------------------------------ | | ||
| | `words` | `string` | The text to be displayed with the fade effect. | | ||
| | `className` | `string` | Additional CSS classes to apply to the component. | | ||
| | `filter` | `boolean` | Apply a blur filter during the animation. Defaults to `true`. | | ||
| | `duration` | `number` | Duration of the animation in seconds. Defaults to `1`. | | ||
| | `staggerTime` | `number` | Time in seconds to stagger the animation between words. Defaults to `0.1`. | | ||
| | `delay` | `number` | Delay before the animation starts in seconds. Defaults to `0.2`. | | ||
| | `variant` | `"default" | "up" | "down" | "left" | "right"` | The direction of the animation. Defaults to `default`. | | ||
| | `scaleSize` | `number` | Scale size for the words during the animation. Defaults to `1`. | | ||
| | `once` | `boolean` | Whether the animation should occur only once. Defaults to `true`. | | ||
| | `translateAmount` | `number` | Custom translate value for the animation. Defaults to `15` for `up`/`down` and `15` for `left`/`right`. | | ||
| ### Example of Customizing Meteor Behavior | ||
| ## Future Components | ||
| Here is how you can customize the meteors' behavior using the available props: | ||
| This package is designed to expand with additional fade components, such as: | ||
| ```jsx | ||
| <Meteors | ||
| speed={3} | ||
| size={30} | ||
| amount={10} | ||
| colorLightmode="blue" | ||
| colorDarkmode="yellow" | ||
| fallingSide="left" | ||
| /> | ||
| ``` | ||
| - **FadeChildren**: Apply fade-in effects to child elements within a container. | ||
| - **FadeImages**: Animate image elements with fade effects. | ||
| - **FadeContainers**: Apply fades to entire sections or containers. | ||
| Each future component will come with its own set of customizable props, following the same flexible design as `FadeWords`. | ||
| ## Contributing | ||
@@ -92,3 +90,3 @@ | ||
| `@stianlarsen/meteors` is [MIT licensed](./LICENSE). | ||
| `@stianlarsen/react-fade-effects` is [MIT licensed](./LICENSE). | ||
@@ -95,0 +93,0 @@ ## Contact |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by8.84%
13236
Worsened metrics
- Dependency count
- increased by33.33%
4
- Number of lines in readme file
- decreased by-2.08%
94
Dependency changes
+ Addedreact@^18
+ Addedreact-dom@^18
- Removedshx@^0.3.4
- Removedbalanced-match@1.0.2(transitive)
- Removedbrace-expansion@1.1.11(transitive)
- Removedconcat-map@0.0.1(transitive)
- Removedfs.realpath@1.0.0(transitive)
- Removedfunction-bind@1.1.2(transitive)
- Removedglob@7.2.3(transitive)
- Removedhasown@2.0.2(transitive)
- Removedinflight@1.0.6(transitive)
- Removedinherits@2.0.4(transitive)
- Removedinterpret@1.4.0(transitive)
- Removedis-core-module@2.16.1(transitive)
- Removedminimatch@3.1.2(transitive)
- Removedminimist@1.2.8(transitive)
- Removedonce@1.4.0(transitive)
- Removedpath-is-absolute@1.0.1(transitive)
- Removedpath-parse@1.0.7(transitive)
- Removedrechoir@0.6.2(transitive)
- Removedresolve@1.22.10(transitive)
- Removedshelljs@0.8.5(transitive)
- Removedshx@0.3.4(transitive)
- Removedsupports-preserve-symlinks-flag@1.0.0(transitive)
- Removedwrappy@1.0.2(transitive)