Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/howell5/retro-grid
A customizable retro grid background component for Vue 3 with built-in themes and advanced customization options.
https://github.com/howell5/retro-grid
npm-package retro-grid vue3
Last synced: 7 days ago
JSON representation
A customizable retro grid background component for Vue 3 with built-in themes and advanced customization options.
- Host: GitHub
- URL: https://github.com/howell5/retro-grid
- Owner: Howell5
- Created: 2024-12-18T03:56:23.000Z (25 days ago)
- Default Branch: main
- Last Pushed: 2025-01-01T00:59:22.000Z (11 days ago)
- Last Synced: 2025-01-01T01:25:59.516Z (11 days ago)
- Topics: npm-package, retro-grid, vue3
- Language: Vue
- Homepage: https://howell5.github.io/retro-grid/
- Size: 268 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Retro Grid
[](https://www.npmjs.com/package/retro-grid)
[](https://www.npmjs.com/package/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](https://howell5.github.io/retro-grid/)
## Installation
```bash
npm install retro-grid
# or
pnpm add retro-grid
# or
yarn add retro-grid
```
## Basic Usage
```vue
import { RetroGrid } from 'retro-grid'
import 'retro-grid/style.css'
```
## Props
| Prop | Type | Description |
| -------------- | ------ | ---------------------------------------------------------------------------- |
| theme | string | Predefined theme ('cyberpunk', 'matrix', 'vaporwave', 'classic', 'midnight') |
| angle | number | Grid angle in degrees (0-90) |
| lineColor | string | Grid line color (supports RGB/RGBA/HEX) |
| glowSize | number | Neon glow effect size in pixels |
| opacity | number | Grid line opacity (0-1) |
| bgGradientFrom | string | Background gradient start color |
| bgGradientTo | string | Background gradient end color |
## Examples
### Using Themes
```vue
```
### Custom Configuration
```vue
```
### Theme Configuration Reference
```typescript
// 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
```bash
# 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