Cinco piezas y sus contraindicaciones.
Todas son CSS, no componentes React: se aplican poniendo clases en tu propio marcado. Por eso la landing —Astro sin React— puede usarlas sin pagar el peso de un framework, y los productos React envuelven estas mismas clases.
Cómo se importa el sistema
@import "@pantherkit/design-system/tokens.css"; /* siempre primero */
@import "@pantherkit/design-system/components.css"; /* botón, cristal, ficha, tira */
@import "@pantherkit/design-system/carrusel.css"; /* solo si lo quieres */-
El botón de cristal fluido: el reflejo persigue al cursor en vez de saltar a él.
Cuándo no Dos primarios en el mismo bloque.
-
El material, no la barra: velo, desenfoque, filo iluminado y un brillo que sigue al puntero.
Cuándo no En un pie de página. Se probó y se retiró.
-
La hoja tipo App Store: la tarjeta no saca al visitante a otra pestaña en el primer clic.
Cuándo no Como diálogo de confirmación o formulario.
-
La prueba social. Son dos patrones, no uno: la tira estática y la cinta en bucle.
Cuándo no La cinta con pocos logos.
-
La tira que se arrastra, con coverflow atado al scroll y sin una línea de JavaScript. No se importa solo.
Cuándo no Importándolo desde
components.css.
Las dos reglas que más se incumplen
El carrusel no se importa solo.
No entra en components.css a
propósito: sus selectores son globales y pisan el carrusel que el
consumidor ya tenga. En la landing se superpusieron dos coverflow y
las tarjetas de los lados salían lavadas.
El cristal necesita algo detrás. Se reconoce por cómo refleja lo que tiene detrás; sobre un fondo plano y quieto es una caja gris. El footer de cristal se probó y se retiró por esto exacto.
Lo que ninguna pieza hace
- Ni un valor propio. Todo color, radio, duración y curva sale de los tokens. Lo que queda literal está anotado, pieza por pieza.
- Ninguna aporta semántica.
.fbtnno hace un botón: lo hace<button>. - Ninguna trae JavaScript. Lo que necesita guion lo pone el consumidor, y todo funciona sin él salvo abrir la ficha.