{"id":29055061,"url":"https://github.com/yanguadotdev/text-scramble","last_synced_at":"2026-02-03T11:02:50.166Z","repository":{"id":300121299,"uuid":"1004602946","full_name":"yanguadotdev/text-scramble","owner":"yanguadotdev","description":"🧩 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.","archived":false,"fork":false,"pushed_at":"2025-06-20T01:25:44.000Z","size":14,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-27T03:54:24.238Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yanguadotdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-18T22:22:44.000Z","updated_at":"2025-06-20T01:25:47.000Z","dependencies_parsed_at":"2025-06-20T01:30:29.826Z","dependency_job_id":"0ef37203-404c-43bd-9ea6-48a5db9f49e9","html_url":"https://github.com/yanguadotdev/text-scramble","commit_stats":null,"previous_names":["yanguadotdev/text-scramble"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yanguadotdev/text-scramble","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanguadotdev%2Ftext-scramble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanguadotdev%2Ftext-scramble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanguadotdev%2Ftext-scramble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanguadotdev%2Ftext-scramble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yanguadotdev","download_url":"https://codeload.github.com/yanguadotdev/text-scramble/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanguadotdev%2Ftext-scramble/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29043687,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T10:09:22.136Z","status":"ssl_error","status_checked_at":"2026-02-03T10:09:16.814Z","response_time":96,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-27T03:39:39.160Z","updated_at":"2026-02-03T11:02:47.366Z","avatar_url":"https://github.com/yanguadotdev.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔀 Scramble Text Web Component\n\nUn elegante web component que crea efectos de texto \"scramble\" o \"matriz\" con configuración completa y múltiples triggers de activación.\n\n## ✨ Características\n\n- 🎯 **Múltiples triggers**: hover, click, viewport, focus\n- ⚙️ **Totalmente configurable** desde atributos HTML\n- 🚫 **Sin Shadow DOM** - hereda estilos del documento\n- 📦 **TypeScript nativo** - completamente tipado\n- 🪶 **Ligero** - sin dependencias externas\n- 🔧 **Control programático** - API JavaScript disponible\n- 🌐 **Soporte universal** - funciona en todos los navegadores modernos\n- ♿ **Accesible** - soporte para navegación por teclado\n\n## 🚀 Instalación\n\n```bash\nnpm install text-scramble\n```\n\no Via CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/text-scramble@latest/dist/index.js\"\u003e\u003c/script\u003e\n```\n\n## 📖 Uso Básico\n\n### Importación\n\n```javascript\n// ES6 Module\nimport 'text-scramble';\n\n// CommonJS\nrequire('text-scramble');\n```\n\n### HTML\n\n```html\n\u003c!-- Uso básico --\u003e\n\u003ctext-scramble\u003eHola Mundo\u003c/text-scramble\u003e\n\n\u003c!-- Con trigger personalizado --\u003e\n\u003ctext-scramble trigger=\"click\"\u003eHaz click aquí\u003c/text-scramble\u003e\n\n\u003c!-- Configuración completa --\u003e\n\u003ctext-scramble \n    trigger=\"hover,viewport\" \n    solve-time=\"1000\" \n    character-time=\"60\" \n    delay-time=\"80\"\n    characters=\"01★☆\"\u003e\n    EFECTO PERSONALIZADO\n\u003c/text-scramble\u003e\n```\n\n## 🎛️ Atributos de Configuración\n\n| Atributo | Tipo | Valor por defecto | Descripción |\n|----------|------|-------------------|-------------|\n| `trigger` | `string` | `\"hover\"` | Eventos que activan el efecto |\n| `solve-time` | `number` | `800` | Tiempo (ms) para resolver cada carácter |\n| `character-time` | `number` | `40` | Velocidad (ms) de cambio de caracteres aleatorios |\n| `delay-time` | `number` | `50` | Retraso (ms) entre el inicio de cada carácter |\n| `characters` | `string` | `\"ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890*#@/*!%\u0026^\"` | Caracteres aleatorios a usar |\n\n### Triggers Disponibles\n\n- `hover` - Se activa al pasar el mouse (por defecto)\n- `click` - Se activa al hacer click\n- `viewport` - Se activa al entrar en el viewport\n- `focus` - Se activa al recibir focus (útil para accesibilidad)\n\n**Múltiples triggers**: Separa con comas para combinar: `trigger=\"hover,click,viewport\"`\n\n## 🎨 Ejemplos\n\n### Efecto Matriz (Película)\n```html\n\u003ctext-scramble \n    trigger=\"viewport\" \n    characters=\"01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン\"\n    solve-time=\"1200\"\n    character-time=\"80\"\u003e\n    DIGITAL RAIN\n\u003c/text-scramble\u003e\n```\n\n### Efecto Hacker\n```html\n\u003ctext-scramble \n    trigger=\"hover\" \n    characters=\"01\"\n    solve-time=\"600\"\n    character-time=\"30\"\n    delay-time=\"20\"\u003e\n    ACCESO CONCEDIDO\n\u003c/text-scramble\u003e\n```\n\n### Efecto Glitch\n```html\n\u003ctext-scramble \n    trigger=\"click\" \n    characters=\"!@#$%^\u0026*()_+-=[]{}|;:,.\u003c\u003e?\"\n    solve-time=\"400\"\n    character-time=\"20\"\u003e\n    SISTEMA CORRUPTO\n\u003c/text-scramble\u003e\n```\n\n### Efecto Suave\n```html\n\u003ctext-scramble \n    trigger=\"viewport\" \n    characters=\"abcdefghijklmnopqrstuvwxyz\"\n    solve-time=\"1000\"\n    character-time=\"60\"\n    delay-time=\"100\"\u003e\n    transición elegante\n\u003c/text-scramble\u003e\n```\n\n## 🔧 API JavaScript\n\n### Método `scramble()`\n\nPuedes activar el efecto programáticamente:\n\n```javascript\nconst element = document.querySelector('text-scramble');\nelement.scramble();\n```\n\n### Ejemplo de Control Programático\n\n```html\n\u003ctext-scramble id=\"manual-control\" trigger=\"\"\u003e\n    Control Manual\n\u003c/text-scramble\u003e\n\n\u003cbutton onclick=\"document.getElementById('manual-control').scramble()\"\u003e\n    Activar Efecto\n\u003c/button\u003e\n```\n\n## 🎯 Casos de Uso\n\n### Landing Pages\n```html\n\u003ctext-scramble trigger=\"viewport\" class=\"hero-title\"\u003e\n    BIENVENIDO AL FUTURO\n\u003c/text-scramble\u003e\n```\n\n### Botones Interactivos\n```html\n\u003ctext-scramble \n    trigger=\"hover\" \n    solve-time=\"300\" \n    class=\"btn btn-primary\"\u003e\n    DESCARGAR AHORA\n\u003c/text-scramble\u003e\n```\n\n### Navegación\n```html\n\u003cnav\u003e\n    \u003ctext-scramble trigger=\"hover\"\u003eInicio\u003c/text-scramble\u003e\n    \u003ctext-scramble trigger=\"hover\"\u003eServicios\u003c/text-scramble\u003e\n    \u003ctext-scramble trigger=\"hover\"\u003eContacto\u003c/text-scramble\u003e\n\u003c/nav\u003e\n```\n\n### Formularios\n```html\n\u003ctext-scramble \n    trigger=\"focus\" \n    solve-time=\"200\" \n    character-time=\"20\"\u003e\n    Tu Nombre\n\u003c/text-scramble\u003e\n```\n\n## 🎨 Estilos CSS\n\nEl componente **no usa Shadow DOM**, por lo que puedes aplicar estilos CSS normalmente:\n\n```css\n/* Estilos básicos */\ntext-scramble {\n    font-family: 'Courier New', monospace;\n    color: #00ff00;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n/* Durante el efecto scramble */\ntext-scramble.scrambling {\n    color: #ffff00;\n    text-shadow: 0 0 10px currentColor;\n}\n\n/* Estados hover */\ntext-scramble:hover {\n    background: rgba(0, 255, 0, 0.1);\n}\n\n/* Tema cyberpunk */\n.cyberpunk text-scramble {\n    color: #ff006f;\n    font-weight: bold;\n    text-transform: uppercase;\n    letter-spacing: 2px;\n}\n\n/* Tema matriz */\n.matrix text-scramble {\n    color: #00ff41;\n    background: #000;\n    font-family: 'Courier New', monospace;\n}\n```\n\n## 🔄 Actualizaciones Dinámicas\n\nLos atributos se pueden cambiar dinámicamente:\n\n```javascript\nconst element = document.querySelector('text-scramble');\n\n// Cambiar trigger\nelement.setAttribute('trigger', 'click');\n\n// Cambiar velocidad\nelement.setAttribute('solve-time', '1200');\n\n// Cambiar caracteres\nelement.setAttribute('characters', '★☆♦♠♣♥');\n```\n\n## ⚡ Rendimiento\n\n- **Optimizado** para múltiples instancias\n- **Gestión automática** de event listeners\n- **Limpieza de memoria** al desmontar componentes\n- **Intersection Observer** para triggers de viewport\n- **Cancelación inteligente** de efectos superpuestos\n\n## 🌐 Soporte de Navegadores\n\n- Chrome/Edge 54+\n- Firefox 63+\n- Safari 10.1+\n- Opera 41+\n\n## 📱 Responsive Design\n\n```css\n/* Adapta el efecto a diferentes tamaños */\n@media (max-width: 768px) {\n    text-scramble {\n        font-size: 0.9rem;\n    }\n}\n\n@media (max-width: 480px) {\n    text-scramble {\n        font-size: 0.8rem;\n        letter-spacing: 1px;\n    }\n}\n```\n\n## 📋 Changelog\n\n### v1.0.0\n- ✨ Lanzamiento inicial\n- 🎯 Soporte para múltiples triggers\n- ⚙️ Configuración completa via atributos\n- 📦 TypeScript nativo\n\n## 🤝 Contribuir\n\n¡Las contribuciones son bienvenidas! \n\n1. Fork el proyecto\n2. Crea una rama para tu feature (`git checkout -b feature/amazing-feature`)\n3. Commit tus cambios (`git commit -m 'Add some amazing feature'`)\n4. Push a la rama (`git push origin feature/amazing-feature`)\n5. Abre un Pull Request\n\n## 📄 Licencia\n\nMIT License - ver el archivo [LICENSE](LICENSE) para más detalles.\n---\n\n**¿Te gusta este proyecto?** ⭐ ¡Dale una estrella en GitHub!\n\nCreado con ❤️ por [Yangua Samir](https://github.com/yanguadotdev)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyanguadotdev%2Ftext-scramble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyanguadotdev%2Ftext-scramble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyanguadotdev%2Ftext-scramble/lists"}