retro-grid v1.2.3

Retro Grid

A customizable retro grid background component for Vue 3 with built-in themes and advanced customization options.

Features

• 🎨 Multiple built-in themes (Cyberpunk, Matrix, Vaporwave, etc.)
• 🎯 Advanced customization mode
• 🌈 Full color control with gradient support
• ✨ Configurable neon glow effects
• 📱 Fully responsive
• 🔧 TypeScript support

Demo

Demo

Installation

npm install retro-grid
# or
pnpm add retro-grid
# or
yarn add retro-grid

Basic Usage

<template>
  <RetroGrid theme="cyberpunk" />
</template>

<script setup>
import { RetroGrid } from 'retro-grid'
import 'retro-grid/style.css'
</script>

Props

Examples

Using Themes

<!-- Cyberpunk theme -->
<RetroGrid theme="cyberpunk" />

<!-- Matrix theme -->
<RetroGrid theme="matrix" />

<!-- Vaporwave theme -->
<RetroGrid theme="vaporwave" />

Custom Configuration

<RetroGrid
  :angle="65"
  lineColor="rgba(255, 0, 255, 0.5)"
  :glowSize="5"
  :opacity="0.5"
  bgGradientFrom="#140028"
  bgGradientTo="#000000"
/>

Theme Configuration Reference

// Built-in theme presets
const themes = {
  cyberpunk: {
    lineColor: 'rgba(255, 0, 255, 0.5)',
    glowSize: 5,
    opacity: 0.5,
    bgGradientFrom: '#140028',
    bgGradientTo: '#000000',
  },
  matrix: {
    lineColor: 'rgba(0, 255, 0, 0.5)',
    glowSize: 3,
    opacity: 0.4,
    bgGradientFrom: '#001400',
    bgGradientTo: '#000000',
  },
  vaporwave: {
    lineColor: 'rgba(0, 255, 255, 0.5)',
    glowSize: 4,
    opacity: 0.6,
    bgGradientFrom: '#2b0054',
    bgGradientTo: '#000000',
  },
  // ... other themes
}

Development

# Install dependencies
pnpm install

# Start development server with demo page
pnpm dev

# Build for production
pnpm build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT