Trama

01 — Qué es

Trama reúne componentes de React y Next.js de ASCII, textmode y pixel art, y secciones de landing ya compuestas: hero, precios, FAQ, blog, formularios y overlays. Todos comparten un tema por tokens CSS y ocho estilos.

El repositorio es la librería y también el sitio que la enseña: una galería de demos, un catálogo interactivo con props editables y landings de referencia construidas solo con Trama. Esta web está hecha con ella.

02 — Qué hace

• Fondos de caracteres. Escenas animadas en ASCII, textmode.js y asciify-engine, con estilos de render y la paleta del tema.
• Ocho estilos y tema por tokens. Glass, solid, outline, neón, retro, terminal, minimal y dot matrix, adaptables con variables CSS.
• Secciones de landing. Hero, precios, FAQ, blog, galerías y formularios listos para componer una web completa.
• Catálogo interactivo. Búsqueda y filtros por categoría y estilo, props editables y el código listo para copiar.
• Transiciones de página. Componentes de transición entre páginas, como los que usa esta misma web.
• Pixel art. Marcos y sprites con recursos de Kenney («Pixel UI», CC0) y Pixelarticons (MIT).

03 — Instalar y usar

npm i trama-ui
npx trama-ui assets   # copia las imágenes de PixelFrame y Sprite a public/

// app/layout.tsx
import "trama-ui/styles.css";

import { Hero, PricingSection, Button } from "trama-ui";

04 — Bueno saber

• La referencia de props está en docs/CATALOG.md del repositorio.
• Licencia MIT. Recursos de terceros: Kenney «Pixel UI» (CC0) y Pixelarticons (MIT).