https://github.com/mnkyarts/godrays-vue
stunning and customizable God Rays (Light Rays) effect component for Vue applications.
https://github.com/mnkyarts/godrays-vue
animation component effects godrays lightrays vue
Last synced: 5 months ago
JSON representation
stunning and customizable God Rays (Light Rays) effect component for Vue applications.
- Host: GitHub
- URL: https://github.com/mnkyarts/godrays-vue
- Owner: MnkyArts
- Created: 2024-12-21T20:15:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-21T20:51:58.000Z (over 1 year ago)
- Last Synced: 2025-10-22T12:37:46.974Z (8 months ago)
- Topics: animation, component, effects, godrays, lightrays, vue
- Language: GLSL
- Homepage:
- Size: 23.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue GodRays Component 🌟
A stunning and customizable God Rays (Light Rays) effect component for Vue applications. Create atmospheric lighting effects with ease, perfect for adding dramatic flair to your web projects.
> This component is a Vue implementation inspired by and based on the original [Framer University](https://framer.university/) [Light Rays](https://framer.university/resources/light-rays-component-for-framer) component. Special thanks to Framer University for their excellent original work.
## ✨ Features
- 🎨 Multiple color modes (single, multi, random)
- ⚡ Smooth animation controls
- 🎛️ Fully customizable rays (count, reach, intensity)
- 📱 Responsive design
- 🎯 Precise positioning control
- 🎨 Custom background color support
## 📦 Installation
```bash
npm install vue-godrays
# or
yarn add vue-godrays
```
## 🚀 Quick Start
```vue
import { GodRays } from "vue-godrays";
export default {
components: {
GodRays,
},
};
```
## 🎮 Props
| Prop | Type | Default | Description |
| ----------------- | -------- | -------------------------------------- | ------------------------------------ |
| `animation` | `Object` | `{ animate: true, speed: 1 }` | Controls animation state and speed |
| `raysColor` | `Object` | `{ mode: 'single', color: '#ffffff' }` | Defines ray coloring mode and colors |
| `backgroundColor` | `string` | `'#000000'` | Background color of the component |
| `intensity` | `number` | `0.7` | Intensity of the rays (0.0 - 1.0) |
| `rays` | `number` | `15` | Number of light rays |
| `reach` | `number` | `1` | How far the rays extend |
| `position` | `number` | `50` | Center position of rays (0 - 100) |
| `radius` | `string` | `'50%'` | Radius of the light source |
| `style` | `Object` | `{}` | Additional CSS styles |
### 🎨 Color Modes
The component supports three color modes through the `raysColor` prop:
1. **Single Color Mode**
```javascript
:raysColor="{ mode: 'single', color: '#ffffff' }"
```
2. **Multi Color Mode**
```javascript
:raysColor="{
mode: 'multi',
color1: '#ff0000',
color2: '#00ff00'
}"
```
3. **Random Color Mode**
```javascript
:raysColor="{ mode: 'random' }"
```
## 🎯 Examples
### Basic Usage
```vue
```
### Dramatic Effect
```vue
```
### Subtle Background Effect
```vue
```
## 🛠️ TypeScript Support
The component includes full TypeScript support with the following interface:
```typescript
export interface GodRaysProps {
animation?: {
animate: boolean;
speed: number;
};
raysColor?: {
mode: "single" | "multi" | "random";
color?: string;
color1?: string;
color2?: string;
};
backgroundColor?: string;
intensity?: number;
rays?: number;
reach?: number;
position?: number;
radius?: string;
style?: Record;
}
```
## 🤝 Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](link-to-issues).
## 📝 License
MIT License - feel free to use this component in your projects!
## 🙏 Credits
- Original concept and design by [Framer University](https://framer.university/)
- Vue implementation developed with ❤️ by Liam Robinson
---
If you find this component useful, please consider giving it a ⭐️ on GitHub!