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 Light Rays component. Special thanks to Framer University for their excellent original work.
- 🎨 Multiple color modes (single, multi, random)
- ⚡ Smooth animation controls
- 🎛️ Fully customizable rays (count, reach, intensity)
- 📱 Responsive design
- 🎯 Precise positioning control
- 🎨 Custom background color support
npm install vue-godrays # or yarn add vue-godrays<template> <GodRays :animation="{ animate: true, speed: 1 }" :raysColor="{ mode: 'single', color: '#ffffff' }" :intensity="0.8" :rays="20" /> </template> <script> import { GodRays } from "vue-godrays"; export default { components: { GodRays, }, }; </script>| 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 |
The component supports three color modes through the raysColor prop:
- Single Color Mode
:raysColor="{ mode: 'single', color: '#ffffff' }"- Multi Color Mode
:raysColor="{ mode: 'multi', color1: '#ff0000', color2: '#00ff00' }"- Random Color Mode
:raysColor="{ mode: 'random' }"<GodRays :animation="{ animate: true, speed: 1 }" :raysColor="{ mode: 'single', color: '#ffffff' }" :intensity="0.8" :rays="20" /><GodRays :animation="{ animate: true, speed: 0.5 }" :raysColor="{ mode: 'multi', color1: '#ff0000', color2: '#ffd700' }" :intensity="1" :rays="30" :reach="1.5" backgroundColor="#000000" /><GodRays :animation="{ animate: true, speed: 0.3 }" :raysColor="{ mode: 'single', color: '#4a90e2' }" :intensity="0.4" :rays="15" :reach="0.8" backgroundColor="rgba(0,0,0,0.8)" />The component includes full TypeScript support with the following interface:
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<string, string | number>; }Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
MIT License - feel free to use this component in your projects!
- Original concept and design by Framer University
- Vue implementation developed with ❤️ by Liam Robinson
If you find this component useful, please consider giving it a ⭐️ on GitHub!