Cada proyecto web empezaba igual: una cabecera, una sección de servicios, precios, preguntas frecuentes, un formulario y un pie. Lo resolvía una y otra vez con pequeñas variaciones, y cada vez que algo mejoraba en un proyecto se quedaba allí. Trama nació para romper ese ciclo.
Qué es#
Una librería de componentes para React y Next.js con dos mitades:
- Secciones de landing listas para usar:
Hero,FeatureGrid,PricingSection,FAQSection,ContactForm,Footer… Se componen como piezas y se rellenan con tu texto. - Una estética propia: fondos ASCII y textmode animados, pixel art y escenas 3D pasadas por un filtro de caracteres. Lo que da carácter a una web sin tener que dibujarlo cada vez.
Se instala desde npm:
npm i trama-uiTres decisiones que la hacen útil#
1. El tema son ocho variables#
Fondo, texto, texto secundario, dos acentos, superficie de tarjetas, líneas y radio de las esquinas. Todo el kit se pinta con esas ocho variables CSS, así que cambiar la identidad de una web es cambiar ocho valores en un sitio. Esta misma web usa el morado de mi marca con los mismos componentes que otra usaría en rojo.
2. El estilo es una prop#
Cada componente acepta una variant: glass, solid, outline, neon, retro, terminal, minimal o dotmatrix. El mismo formulario puede parecer una tarjeta de cristal o una terminal de los ochenta sin tocar su código.
3. Se puede usar tal cual o copiar y adaptar#
Si solo quieres usarla, npm. Si un proyecto necesita cambiar un componente a fondo, un comando copia su código al proyecto; y otro trae de vuelta a la librería las mejoras que hayas hecho allí. Así lo que aprendo en un cliente mejora el kit para el siguiente.
Lo que aprendí construyéndola#
- Documentar mientras construyes. Un catálogo con las props de cada componente, generado desde el código, ahorra más tiempo que cualquier otra cosa.
- Usarla en producción la mejora. Montar esta web sacó a la luz fallos que el catálogo no enseñaba: un formulario que siempre daba el envío por bueno, listas que no admitían comas en el texto… Ya están corregidos en la librería.
¿Te sirve?#
Si haces webs con Next.js y quieres algo con más personalidad que los kits de siempre, pruébala. Y si quieres una web a medida hecha con ella, hablamos.