vue-godrays

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 Light Rays 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

npm install vue-godrays
# or
yarn add vue-godrays

🚀 Quick Start

<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>

🎮 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:

• Single Color Mode

:raysColor="{ mode: 'single', color: '#ffffff' }"

• Multi Color Mode

:raysColor="{
  mode: 'multi',
  color1: '#ff0000',
  color2: '#00ff00'
}"

• Random Color Mode

:raysColor="{ mode: 'random' }"

🎯 Examples

Basic Usage

<GodRays
  :animation="{ animate: true, speed: 1 }"
  :raysColor="{ mode: 'single', color: '#ffffff' }"
  :intensity="0.8"
  :rays="20"
/>

Dramatic Effect

<GodRays
  :animation="{ animate: true, speed: 0.5 }"
  :raysColor="{ mode: 'multi', color1: '#ff0000', color2: '#ffd700' }"
  :intensity="1"
  :rays="30"
  :reach="1.5"
  backgroundColor="#000000"
/>

Subtle Background Effect

<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)"
/>

🛠️ TypeScript Support

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>;
}

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📝 License

MIT License - feel free to use this component in your projects!

🙏 Credits

• 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!