Loop compartido
Todas las instancias de la página comparten un único requestAnimationFrame. Cinco relojes cuestan lo mismo que cincuenta en planificación de frames.
虎忍 Inicio · Portafolio · SoftClock
Tigre Ninja · Componente comercial · 2026
Un reloj analógico sin aguja de segundos. En su lugar, un punto orbital dibuja
un arco alrededor de la esfera con cada minuto. Cuatro temas, paletas propias
y una etiqueta <div> es todo lo que necesitas.
La pieza, no una foto
Esto es el componente real cargado tal cual, funcionando con la hora de tu navegador ahora mismo.
🖌️ randomize() genera cada vez una paleta HSL nueva pero coherente: mismo mecanismo de contraste, tono distinto. Pruébalo un par de veces.
Una etiqueta, o una línea
Sin build, sin npm. Copia softclock.js a tu proyecto y elige el modo que prefieras.
<!-- Declarativo: cero JavaScript de integración -->
<div data-soft-clock data-theme="grafito" data-size="200"></div>
<script src="softclock.js"></script>
// Programático: control total const clock = SoftClock.mount('#miReloj', { theme: 'salvia', size: 220 }); clock.randomize(); // paleta suave aleatoria clock.setTheme('niebla'); clock.destroy();
Cae en HTML estático, WordPress, React, Vue, Astro o Eleventy sin cambiar una línea del componente — es un IIFE que solo expone window.SoftClock.
Cuatro paletas, seis tokens cada una
Elegidas para cubrir contextos sin solaparse: una clara cálida, una oscura, una verdosa orgánica y una azulada fría. Cada token es una custom property CSS — --sck-accent, --sck-face… — sobreescribible desde tu propia hoja de estilos.
| Tema | Esfera | Acento | Uso recomendado |
|---|---|---|---|
| porcelana | #F7F4EF | #C2603F | Editorial, bienestar, tipografías serif |
| grafito | #24262C | #8FC0AC | Fondos oscuros, dashboards, modo noche |
| salvia | #E8EEE5 | #C97B5A | Naturaleza, slow living, bienestar |
| niebla | #EAEDF3 | #DE9E4C | Fintech amigable, tech sutil |
window.SoftClock
Cuatro métodos de instancia, dos propiedades de módulo. Todo lo que ves en la vitrina de arriba pasa por aquí.
| Miembro | Qué hace |
|---|---|
| SoftClock.mount(target, opts) | Crea una instancia en el elemento indicado. Devuelve la instancia o null. |
| SoftClock.themes | Array con los nombres de los temas incluidos. |
| SoftClock.version | Versión actual como cadena. |
| instance.setTheme(tema) | Cambia el tema en caliente. Acepta nombre o paleta parcial. Encadenable. |
| instance.randomize() | Genera y aplica una paleta HSL coherente. Devuelve la paleta generada. |
| instance.destroy() | Elimina el reloj del DOM y del loop de animación compartido. |
| instance.el | El nodo raíz (.sck-root), por si necesitas medirlo o añadirle clases. |
Por qué pesa lo que pesa
Todas las instancias de la página comparten un único requestAnimationFrame. Cinco relojes cuestan lo mismo que cincuenta en planificación de frames.
IIFE en modo estricto. La única huella en window es SoftClock. El CSS va prefijado .sck- y se inyecta una sola vez.
Cada frame se calcula desde new Date(), nunca incrementando contadores propios. No deriva con el tiempo, ni tras horas en pestaña inactiva.
role="img", aria-label con la hora legible, y respeto automático de prefers-reduced-motion: el barrido se desactiva sin que tengas que configurarlo.
Unos 3 KB con gzip. Un archivo, sin dependencias, sin hoja de estilos externa que cargar.
Escala sin pérdida a cualquier tamaño. El reloj se ajusta a su contenedor con width: 100% si lo necesitas responsive.
Antes de integrarlo en un proyecto de cliente
El código fuente de SoftClock — softclock.js y los ejemplos de integración — se distribuye bajo
licencia MIT. Puedes usarlo, copiarlo, modificarlo, integrarlo, publicarlo, distribuirlo, sublicenciarlo
y venderlo, siempre que conserves el aviso de copyright y el texto de la licencia. Copyright © 2026 Tigre Ninja.
La licencia MIT cubre el código, no los recursos visuales ni la marca: la portada del proyecto y el nombre y logotipos de Tigre Ninja son © 2026 Tigre Ninja, todos los derechos reservados — no autorizados para copia, redistribución o uso como identidad de proyectos derivados sin permiso previo por escrito.
Términos completos en el archivo LICENSE del repositorio.
Para uso de marca o adaptaciones a medida, contacta vía perfil profesional.
Tan completo que rara vez echarás nada en falta. Pruébalo en la vitrina de arriba antes de decidir.
Tigre Ninja · 2026