Herramientas de código abierto de estado y animación para React y React Native. Tres paquetes enfocados que funcionan desde el primer import y crecen solo hasta donde lo necesites.
Los componentes leen el mismo valor sin Provider, acciones ni reducers. Solo se vuelven a renderizar cuando cambia su selección, y guardar o restaurar ocurre exactamente cuando tú lo indicas.
Pulsa un botón en cualquiera de los lados. Ambos paneles leen el mismo valor de restate() y cambian a la vez; la insignia de envío solo escucha una selección.
Usa en React DOM los timing, spring e interpolate que conoces de React Native Animated. Un valor controla el estilo de muchos elementos, sin un render de React por fotograma.
El deslizador cambia un único Value. La posición, el giro, el tamaño y las esquinas de las doce formas se derivan de él. Pulsa el resorte y luego agarra el deslizador a mitad del movimiento.
Números que ruedan, un resaltado que se desplaza, listas que mueven solo lo que cambió, hojas y acciones al deslizar. Pasa tus datos —sin provider ni llamada de configuración— en React y React Native.
Números, pestañas, listas y hojas
El mismo import en web y en nativo
Una nueva entrada continúa desde lo que se ve en pantalla
Elige un periodo: MotionHighlight se desplaza hasta él, MotionNumber rueda, ProgressRing se llena y MotionList mueve solo las filas que cambiaron.
HoyEsta semanaEste mes
Visitas
1,284
Inicio
Precios
Docs
Blog
Datos de ejemplo
02 · Conjunto
Un golpe.Todo se mueve.
Este escenario está hecho con Animated. Un único Value con el progreso del scroll dirige a la vez la posición, el giro, la escala y la opacidad de 48 formas.
01
Resonar
Los puntos dispersos se reúnen en los anillos de un gong.
02
Dividir
El anillo se divide en tres y toma el color de cada herramienta.
03
Dar forma
Se convierten en los enlaces del estado, la trayectoria del movimiento y los pilares del coro.
04
Compás
Todo se alinea y cae en el mismo tiempo.
progress
03 · Principios
Pequeño,de principio a fin.
Empieza con un import
Sin provider envolvente ni configuración global de entrada. Añade capacidades solo cuando tu app las pida.
Solo lo que lo necesita
Solo se actualizan los componentes cuya selección cambió, los elementos que usan un valor y las filas que se movieron.
Responsable hasta el final
El movimiento interrumpido continúa desde lo que se ve en pantalla, y las suscripciones y animaciones se liberan cuando su dueño desaparece.
Tipado y documentado
Todos los paquetes incluyen tipos de TypeScript, y la documentación se puede leer en 39 idiomas.
04 · El nombre
Kkwaenggwari,el gong que arranca la banda.
Se pronuncia «kuéng-guá-ri». En el pungmul coreano, quien toca el kkwaenggwari (꽹과리) marca el ritmo de todo el conjunto. Nuestras herramientas buscan lo mismo: pequeñas pero claras, para que toda tu app vaya al mismo compás.
kkwaenggwariKkwaenggwari toma su nombre del kkwaenggwari (꽹과리), un pequeño gong coreano que se toca con una maza. Su sonido brillante y nítido inspiró el nombre de estas pequeñas herramientas de código abierto.
