Saltar al contenido
TRAMA

Componentes, guías y recetas · React / Next.js · 0.13.0

TRAMA

Componentes, guías visuales y recetas para construir webs con carácter. 9 variantes, tokens y composición, con ASCII, textmode y pixel art cuando el proyecto los pide.

EmpezarVer componentes →Para agentes ↗
entradas de catálogo
187
categorías
14
estilos
9
demos
67
webs completas
34

01 — Componentes

Un componente,
9 variantes.

El tema son ocho tokens CSS en un contenedor; el estilo, la prop variant; el color semántico, la prop intent. Pruébalo: todo lo de abajo son piezas reales del kit.

variant

intent

accentv1.0
Plan
Sensor desplegadoEl primer informe llegará en menos de cinco minutos.
Sincronizando64%
Todo en orden: 0 incidencias abiertas.
page.tsx
<Button label="Desplegar" variant="minimal" intent="accent" /><Badge text="accent" variant="minimal" intent="accent" dot /><TextField label="Correo" variant="minimal" /><Alert title="Aviso" variant="minimal" intent="accent" />

14 categorías · 187 entradas de catálogo

Abrir el catálogo interactivo →
  1. 01FondosEscenas de caracteres que rellenan un contenedor.10
  2. 02TextoTitulares y cintas con efectos de texto.11
  3. 03TarjetasSuperficies de contenido con capas ASCII.10
  4. 04InteracciónRespuestas al puntero.16
  5. 05TransicionesCambios de escena y de sección.15
  6. 06DatosCifras, gráficos, terminales y tablas.17
  7. 07NavegaciónBarras, pestañas y acordeones.16
  8. 08FormulariosCampos, interruptores y deslizadores.20
  9. 09FeedbackEstados, avisos y carga.9
  10. 10Galerías, vídeo y audioGalerías de imágenes y carruseles sobre Swiper (coverflow, baraja, cubo, mosaico, cintas continuas), reproductor de vídeo y reproductor de música.27
  11. 11SeccionesBloques compuestos, listos para pegar en una landing: hero, contacto, precios, FAQ…18
  12. 12ContenidoTexto largo con formato para documentación y blogs: prosa desde Markdown, avisos, índice de la página, cabecera de artículo y el artículo completo.6
  13. 13OverlaysElementos que aparecen encima de la página: diálogos, notificaciones, ayuda.9
  14. 14Pixel artIconos SVG que se tiñen con el tema, marcos de 9 cortes y sprites: píxeles hechos a mano, no filtros.3

02 — Landings de referencia

Hechas solo con el kit.

Cada una es una página completa sin CSS de componentes propio: solo tokens, variantes y composición. Ábrelas, cópialas, parte de su estructura.

  1. 01PARLAidiomas que conectan · Ver →
  2. 02CIPHERGRIDproducto ciberpunk · ambasVer →
  3. 03MYCELred micelar orgánica · ambasVer →
  4. 04FOLIOeditorial de tema claro · ambasVer →
  5. 05SIGNALdot matrix · three.jsVer →
  6. 06SILOhard techno minimal · three.jsVer →
  7. 07MARÉminimal pixel · asciifyVer →
  8. 08FORMAS2000dvh · asciifyVer →
  9. 09FACETAlanding larga con kit · asciifyVer →

67 demos en total: fondos, texto, scroll y landings

Todas las demos →

03 — Webs completas

Varias páginas, estado real.

Blog, tienda con carrito, servicios con chatbot, fabricante y portfolio: navegación entre páginas, estado compartido y contenido propio, cada una con su tema.

  1. 01Espartabarbería · oficio · 5 páginasVer →
  2. 02Forjaentrenamiento · proceso 3D · 5 páginasVer →
  3. 03Hebrapeluquería · reservas · 5 páginasVer →
  4. 04Cadenciaclub · movimiento · 5 páginasVer →
  5. 05Kernel Logblog · newsletter · 10 páginasVer →
  6. 06Pixelforgetienda · carrito · 15 páginasVer →
  7. 07Vigíaservicios · chatbot · 9 páginasVer →
  8. 08Onda Instrumentsfabricante · catálogo · 12 páginasVer →
  9. 09Clara Vidalservicios · reservas · 9 páginasVer →
  10. 10Marea Studioestudio · movimiento · 5 páginasVer →
  11. 11Pulsodashboard · producto · 4 páginasVer →
  12. 12Barrotienda · comercio · 11 páginasVer →
  13. 13Planoproducto técnico · relato 3D · 7 páginasVer →
  14. 14ArcoForoevento · wordmark · 2 páginasVer →
  15. 15Arborarquitectura · isla · 2 páginasVer →
  16. 16Sonaraudio · mapa explorable · 2 páginasVer →
  17. 17Motaestudio · pegatinas · 2 páginasVer →
  18. 18Alzadoarquitectura · maqueta 3D · 2 páginasVer →
  19. 19Vérticecorporativo · industria · 11 páginasVer →
  20. 20Voltdeporte · marca personal · 1 páginasVer →
  21. 21FaroSaaS · producto · 1 páginasVer →
  22. 22Hamacamúsica · Y2K · 1 páginasVer →
  23. 23Travesíacine · documental · 9 páginasVer →
  24. 24Almíbarpastelería · obrador · 7 páginasVer →
  25. 25Almíbar · Tallerpastelería · 3D · 4 páginasVer →
  26. 26Almíbar · barriocafé · QR · dot matrix · 16 páginasVer →
  27. 27Quilatejoyería · luz · 3D · 6 páginasVer →
  28. 28Ánimaevento · halloween · 3D · 5 páginasVer →
  29. 29Cotadatos · nube de puntos · 3D · 1 páginasVer →
  30. 30Maravillashistoria interactiva · 3D · juegos · 6 páginasVer →
  31. 31Runavideojuego · 3D · minijuegos · 5 páginasVer →
  32. 32La Voz de la Tierracifras reales · 3D · narrativa · 4 páginasVer →
  33. 33Nádirciencia ficción · Three.js · scrollytelling · 3 páginasVer →
  34. 34La Tramoyarestaurante · espectáculo · 39 páginasVer →

04 — Empezar

Instala. Pon tus tokens. Compón.

terminal · layout.tsx
# En el repo: npm run pkg:pack# En tu proyecto: instala el .tgz exacto de esa versiónnpm i /ruta/a/trama-ui-x.y.z.tgznpx --no-install trama-ui skills install --client codex // app/layout.tsximport "trama-ui/styles.css"; // cualquier páginaimport { Hero, FeatureGrid, Footer } from "trama-ui";
  1. 01
    Secciones primero

    Hero, FeatureGrid, PricingSection, FAQSection, ContactForm, Footer… y piezas sueltas solo para lo que falte.

  2. 02
    Pasa siempre el texto

    Los defaults son copy de demostración. Un texto opcional se oculta con una cadena vacía.

  3. 03
    Sin colores fijos

    Todo sale de --bg --fg --mut --acc --acc2 --card --ln --r: cambia el tema en un solo sitio.

  4. Guía de primeros pasos →