Skip to content

Latest commit

 

History

History
208 lines (160 loc) · 6.98 KB

README.md

File metadata and controls

208 lines (160 loc) · 6.98 KB

Vue Moving Light

English | 한국어

A customizable moving light component for Vue.js applications, perfect for creating dynamic lighting effects, stage lighting simulations, or interactive UI elements.

Vue Moving Light Demo Vue Moving Light Demo

Features

  • 🎯 Precise pan and tilt control
  • 🎨 Customizable beam color and intensity
  • 🌈 Built-in prism effect support
  • ⚡ Smooth animations with configurable speeds
  • 📱 Responsive and adaptable to any screen size
  • 💪 Written in TypeScript with full type support
  • 🎮 Easy to control programmatically

Demo

Experience Vue Moving Light:

Vue Moving Light Demo

Installation

# npm
npm install vue-movinglight

# yarn
yarn add vue-movinglight

# pnpm
pnpm add vue-movinglight

Usage

Global Registration

// main.ts
import { createApp } from "vue";
import MovingLight from "vue-movinglight";
import "vue-movinglight/dist/style.css";

const app = createApp(App);
app.use(MovingLight);

Local Registration

<script setup lang="ts">
import { MovingLight } from "vue-movinglight";
import "vue-movinglight/dist/style.css";
</script>

<template>
  <MovingLight
    position="top"
    :pan="45"
    :tilt="-30"
    color="#00ff00"
    :intensity="80"
  />
</template>

Props

Prop Type Default Description
position 'top' | 'left' | 'right' | 'bottom' 'top' Position where the moving light is mounted
positionType 'fixed' | 'absolute' 'fixed' CSS position type for the light element
pan number 0 Pan angle in degrees (-270 to +270)
tilt number 0 Tilt angle in degrees (-135 to +135)
panSpeed number 90 Pan movement speed in degrees per second (1-540)
tiltSpeed number 90 Tilt movement speed in degrees per second (1-270)
color string '#ffffff' Beam color in CSS color format
intensity number 100 Light beam intensity percentage (0-100)
beamWidth number 10 Width of the light beam in degrees (0-180)
beamLength number 1000 Length of the light beam in pixels (0-10000)
prismEnabled boolean false Enable/disable prism effect
prismFacets number 3 Number of prism facets (2-5)
prismRotation number 0 Prism rotation angle in degrees (-360 to +360)

Examples

Basic Usage

<template>
  <MovingLight />
</template>

Advanced Configuration

<template>
  <MovingLight
    position="top"
    :pan="45"
    :tilt="-30"
    :panSpeed="120"
    :tiltSpeed="90"
    color="#00ff00"
    :intensity="80"
    :beamWidth="15"
    :beamLength="1500"
    :prismEnabled="true"
    :prismFacets="3"
    :prismRotation="45"
  />
</template>

Interactive Example

<script setup lang="ts">
import { ref } from "vue";

const pan = ref(0);
const tilt = ref(0);

const updatePosition = (event: MouseEvent) => {
  const { clientX, clientY } = event;
  pan.value = (clientX / window.innerWidth) * 540 - 270;
  tilt.value = (clientY / window.innerHeight) * 270 - 135;
};
</script>

<template>
  <div @mousemove="updatePosition">
    <MovingLight :pan="pan" :tilt="tilt" color="#00ffff" :intensity="90" />
  </div>
</template>

Browser Support

  • Chrome (70+)
  • Firefox (68+)
  • Safari (13.1+)
  • Edge (79+)
  • IE is not supported

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm run test

License

This project is licensed under the MIT License - see the LICENSE file for details.