ran
Español

Métodos de diseño, componentes y herramientas

Crea productos con Ran Design, ranui y ranuts. Úsalos por separado, con orientación para desarrolladores y agentes.

Crear con agentesDar una estrella en GitHub
Ejemplo

Invitar a un compañero

LectorEditorAdministrador
Simular un fallo de la peticiónEnviar invitación

Secciones de la guía que sigue este ejemploInteractionWords

Componentes ranui reales. Deja el correo vacío o simula un fallo para ver cada estado.

Componentes
41
Utilidades
90+
Idiomas
8
Licencia
MIT

Estados reales hechos con ranui

Subiendo
quarterly-report.pdf64%
Cancelar
Ejecución del agente
  1. Leer 4 archivos
  2. Ejecutar las pruebas
  3. Abrir un pull request
Cargando
Vidrio
<r-glass>

Elige por dónde empezar

ranui

Una biblioteca de Web Components independiente de cualquier framework. Coloca 41 elementos r- ya estilizados en Vue, React o HTML puro.

Explorar componentes

ranuts

Más de 90 utilidades tipadas para cadenas, objetos, color, tiempo, archivos y el DOM. Compatibles con tree-shaking y sin dependencias.

Leer la documentación

Ran Design

Métodos de composición, interacción, movimiento y revisión con evidencia, independientes de una biblioteca.

Explorar diseño

Lo que la mayoría de bibliotecas deja fuera

ranuicomponentes
  • Reproductor <r-player>Un reproductor de vídeo HLS con tasa de bits adaptativa y un núcleo de control modular.
  • Selector de color <r-colorpicker>Un selector HSV completo con deslizadores de tono y alfa, y salida HEX / RGBA en vivo.
  • Gráfico de radar <r-radar>Un gráfico de radar dibujado en canvas, con etiquetas y estilos de etiqueta por eje.
  • Fórmulas <r-math>Convierte LaTeX en MathML nativo con Temml cargado bajo demanda, desde un único atributo.
  • Tarjeta rasca y gana <r-scratch>Un raspado interactivo en canvas, con umbral de finalización.
ranutsutilidades
  • Bridge PostMessageBridgeRPC basado en promesas sobre postMessage entre iframes, workers y pestañas, con transporte por clonado estructurado y canales aislados.
  • Visual ApplicationUn grafo de escena al estilo de PixiJS, con backend de renderizado intercambiable: WebGPU, WebGL o Canvas.
  • DOM virtual h() · init()Un DOM virtual al estilo de snabbdom: hyperscript, patch, módulos intercambiables y hooks de ciclo de vida.
  • TOTP TOTPContraseñas de un solo uso según RFC-6238, de SHA-1 a SHA3-512, sin ninguna dependencia criptográfica.
  • Registro MIME getMime()Una búsqueda bidireccional MIME ⇄ extensión con unas 1000 entradas.

Instalar y usar

Instala ambos paquetes, registra los elementos una vez y úsalos donde quieras. Sin paso de compilación ni framework.

npm i ranui ranuts
Instalar y registrar
$ npm i ranui ranuts

// register the <r-*> elements once
import 'ranui'
import { debounce } from 'ranuts'
Usar en cualquier sitio
<!-- Vue, React, or plain HTML -->
<r-button type="primary">Save</r-button>
<r-progress percent="66"></r-progress>