https://github.com/yanguadotdev/text-scramble
🧩 A lightweight and customizable Web Component that animates text with a dynamic scramble effect. Built with TypeScript, configurable via HTML attributes, and ready for NPM and modern frontend projects.
https://github.com/yanguadotdev/text-scramble
Last synced: 4 months ago
JSON representation
🧩 A lightweight and customizable Web Component that animates text with a dynamic scramble effect. Built with TypeScript, configurable via HTML attributes, and ready for NPM and modern frontend projects.
- Host: GitHub
- URL: https://github.com/yanguadotdev/text-scramble
- Owner: yanguadotdev
- Created: 2025-06-18T22:22:44.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-20T01:25:44.000Z (12 months ago)
- Last Synced: 2025-06-27T03:54:24.238Z (12 months ago)
- Language: HTML
- Size: 13.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔀 Scramble Text Web Component
Un elegante web component que crea efectos de texto "scramble" o "matriz" con configuración completa y múltiples triggers de activación.
## ✨ Características
- 🎯 **Múltiples triggers**: hover, click, viewport, focus
- ⚙️ **Totalmente configurable** desde atributos HTML
- 🚫 **Sin Shadow DOM** - hereda estilos del documento
- 📦 **TypeScript nativo** - completamente tipado
- 🪶 **Ligero** - sin dependencias externas
- 🔧 **Control programático** - API JavaScript disponible
- 🌐 **Soporte universal** - funciona en todos los navegadores modernos
- ♿ **Accesible** - soporte para navegación por teclado
## 🚀 Instalación
```bash
npm install text-scramble
```
o Via CDN
```html
```
## 📖 Uso Básico
### Importación
```javascript
// ES6 Module
import 'text-scramble';
// CommonJS
require('text-scramble');
```
### HTML
```html
Hola Mundo
Haz click aquí
EFECTO PERSONALIZADO
```
## 🎛️ Atributos de Configuración
| Atributo | Tipo | Valor por defecto | Descripción |
|----------|------|-------------------|-------------|
| `trigger` | `string` | `"hover"` | Eventos que activan el efecto |
| `solve-time` | `number` | `800` | Tiempo (ms) para resolver cada carácter |
| `character-time` | `number` | `40` | Velocidad (ms) de cambio de caracteres aleatorios |
| `delay-time` | `number` | `50` | Retraso (ms) entre el inicio de cada carácter |
| `characters` | `string` | `"ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890*#@/*!%&^"` | Caracteres aleatorios a usar |
### Triggers Disponibles
- `hover` - Se activa al pasar el mouse (por defecto)
- `click` - Se activa al hacer click
- `viewport` - Se activa al entrar en el viewport
- `focus` - Se activa al recibir focus (útil para accesibilidad)
**Múltiples triggers**: Separa con comas para combinar: `trigger="hover,click,viewport"`
## 🎨 Ejemplos
### Efecto Matriz (Película)
```html
DIGITAL RAIN
```
### Efecto Hacker
```html
ACCESO CONCEDIDO
```
### Efecto Glitch
```html
SISTEMA CORRUPTO
```
### Efecto Suave
```html
transición elegante
```
## 🔧 API JavaScript
### Método `scramble()`
Puedes activar el efecto programáticamente:
```javascript
const element = document.querySelector('text-scramble');
element.scramble();
```
### Ejemplo de Control Programático
```html
Control Manual
Activar Efecto
```
## 🎯 Casos de Uso
### Landing Pages
```html
BIENVENIDO AL FUTURO
```
### Botones Interactivos
```html
DESCARGAR AHORA
```
### Navegación
```html
Inicio
Servicios
Contacto
```
### Formularios
```html
Tu Nombre
```
## 🎨 Estilos CSS
El componente **no usa Shadow DOM**, por lo que puedes aplicar estilos CSS normalmente:
```css
/* Estilos básicos */
text-scramble {
font-family: 'Courier New', monospace;
color: #00ff00;
cursor: pointer;
transition: all 0.3s ease;
}
/* Durante el efecto scramble */
text-scramble.scrambling {
color: #ffff00;
text-shadow: 0 0 10px currentColor;
}
/* Estados hover */
text-scramble:hover {
background: rgba(0, 255, 0, 0.1);
}
/* Tema cyberpunk */
.cyberpunk text-scramble {
color: #ff006f;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Tema matriz */
.matrix text-scramble {
color: #00ff41;
background: #000;
font-family: 'Courier New', monospace;
}
```
## 🔄 Actualizaciones Dinámicas
Los atributos se pueden cambiar dinámicamente:
```javascript
const element = document.querySelector('text-scramble');
// Cambiar trigger
element.setAttribute('trigger', 'click');
// Cambiar velocidad
element.setAttribute('solve-time', '1200');
// Cambiar caracteres
element.setAttribute('characters', '★☆♦♠♣♥');
```
## ⚡ Rendimiento
- **Optimizado** para múltiples instancias
- **Gestión automática** de event listeners
- **Limpieza de memoria** al desmontar componentes
- **Intersection Observer** para triggers de viewport
- **Cancelación inteligente** de efectos superpuestos
## 🌐 Soporte de Navegadores
- Chrome/Edge 54+
- Firefox 63+
- Safari 10.1+
- Opera 41+
## 📱 Responsive Design
```css
/* Adapta el efecto a diferentes tamaños */
@media (max-width: 768px) {
text-scramble {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
text-scramble {
font-size: 0.8rem;
letter-spacing: 1px;
}
}
```
## 📋 Changelog
### v1.0.0
- ✨ Lanzamiento inicial
- 🎯 Soporte para múltiples triggers
- ⚙️ Configuración completa via atributos
- 📦 TypeScript nativo
## 🤝 Contribuir
¡Las contribuciones son bienvenidas!
1. Fork el proyecto
2. Crea una rama para tu feature (`git checkout -b feature/amazing-feature`)
3. Commit tus cambios (`git commit -m 'Add some amazing feature'`)
4. Push a la rama (`git push origin feature/amazing-feature`)
5. Abre un Pull Request
## 📄 Licencia
MIT License - ver el archivo [LICENSE](LICENSE) para más detalles.
---
**¿Te gusta este proyecto?** ⭐ ¡Dale una estrella en GitHub!
Creado con ❤️ por [Yangua Samir](https://github.com/yanguadotdev)