Demos · 152
Todo lo que se ha construido con Trama.
Landings, portfolios editoriales y webs de referencia, además de fondos generativos, efectos de texto y páginas con scroll. Cada una se abre a pantalla completa, tal como se vería en producción.
Landings del kit
Páginas completas construidas solo con components/ui/: la mejor referencia para montar una landing.
- 01PARLA · idiomas que conectanUna plataforma ficticia de idiomas inspirada en Preply: rosa vivo, retratos, profesores filtrables y una clase de prueba simulada. Estrena la guía Aprendizaje cercano.
- 02CIPHERGRID · producto ciberpunkLanding retrowave completa construida solo con components/ui/: fondos reactivos al scroll, modal, notificaciones, formulario y prácticamente todo el catálogo.
- 03MYCEL · red micelar orgánicaSegunda landing completa construida solo con components/ui/, opuesta a CIPHERGRID: una red de sensores de campo que germina de verdad al hacer scroll por el héroe, sin que el fondo tape nunca el contenido.
- 04FOLIO · editorial de tema claroTercera landing completa construida solo con components/ui/, la única de tema claro: papel, tinta y tipografía para una herramienta editorial, con fondos en patrones de papelería real en vez de escenas cargadas.
- 05SIGNAL · dot matrixLanding de referencia del tema dot matrix: monocromo, variante dotmatrix en todo el kit y un único RetroCanvas (react-three-fiber con filtro ASCII y scanlines) de fondo que cambia de figura en cada acto.
- 06SILO · hard techno minimalLanding de un productor de hard techno con minimalismo extremo: negro, blanco y un gris, tipografía enorme y un único RetroCanvas de fondo (ASCII de puntos invertido, scanlines de 1 px en barrido y glitch leve) que cambia de figura en cada sección.
- 07MARÉ · minimal pixelLanding mínima de Maré Surf Club: fondo dither de cuadrados duros que evoluciona de amanecer a noche con el scroll, tipografía pixel, titulares con aparición glitch y palabra rotativa.
- 08FORMAS · 2000dvhDemo de 2000dvh en ocho capítulos: el scroll interpola el tamaño de celda (fino casi siempre), bloom, grano y tinte; en cada cambio la imagen se rompe en bloques y salta de cubo a pirámide, esfera, octaedro, icosaedro, prisma, nudo toroidal y cono. Varias figuras se colocan al borde de la página y cada una tiene su propio hover.
- 09FACETA · landing larga con kitLanding de prueba de más de 3000dvh: dieciséis actos con el fondo de formas 3D evolucionando con el scroll (celda fina, figuras al borde, hover propio) y, entre carteles con aparición distinta, componentes del kit en estilo pixel duro: características, cifras, marquesina, proceso, pestañas, precios, opiniones, FAQ, galerías de imágenes con Swiper, carrusel de opiniones, cinta de marcas, formulario y pie.
Portfolios editoriales
Experiencias de autor con obra propia, archivo explorable y movimiento integrado en la narración.
Relatos WebGL
Demos con escenas generativas, shaders y movimiento enlazado al recorrido.
SONDA · tres direcciones de producto
La misma oferta, tres narrativas de venta radicalmente distintas: materia, juego WebGL y comercio editorial directo.
Lucero · cuatro conceptos, un encargo
El mismo tren nocturno, con los mismos datos y la misma reserva, resuelto como tabla, dibujo, película y maqueta 3D.
- 01Lucero · HorarioLa página es la tabla: se elige tramo y plaza sobre el propio horario.
- 02Lucero · VagónEl tren en corte lateral: se recorre de lado y se toca el asiento.
- 03Lucero · VentanillaUna sola toma: el scroll hace pasar las once horas de viaje.
- 04Lucero · MaquetaReinterpreta Night Train de pmndrs: las plazas libres se eligen en 3D.
Webs completas
Sitios de varias páginas con navegación, estado compartido (carrito, suscripción, chat) y contenido propio.
- 01Esparta · barbería de carácterBarbería de barrio con fotografías de corte y barba, navegación lateral, ticket del ritual, carta de servicios y reserva con profesional y agenda persistente.
- 02Forja · entrena tu siguiente nivelCuaderno de entrenamiento oscuro: una sesión explicada en tres capítulos 3D, fotografía de grupo, horario, reservas y espera, lista de cuotas y área personal persistente.
- 03Hebra · un buen día de peloSalón de corte y color con diagnóstico de estilo, servicios con precio y duración, reserva por profesional, agenda y cambios de cita guardados en el navegador.
- 04Cadencia · encuentra tu ritmoClub social de movimiento con planificador de frecuencia semanal, clases reservables, lista de espera, comparación de planes y área personal persistente.
- 05Kernel Log · blog de tecnologíaEl blog de una ingeniera de plataformas: artículos largos con código, índice y barra de lectura, buscador por temas, newsletter con archivo y página personal.
- 06Pixelforge · tienda de assetsTienda de assets para videojuegos: catálogo con filtros, orden y búsqueda, fichas con licencias, carrito que se guarda entre páginas, cupón, pago en pasos, FAQ y páginas legales.
- 07Vigía · videovigilanciaEmpresa de seguridad con chatbot en todas las páginas: servicios con ficha propia, planes mensual/anual que llevan al presupuesto, formulario de presupuesto en cuatro pasos con estimación y contacto.
- 08Onda Instruments · equipos para DJ y músicosFabricante de controladoras, sintetizadores, cajas de ritmos, monitores y auriculares: catálogo por categorías, fichas con especificaciones y descargas, artistas y soporte con registro de producto.
- 09Clara Vidal · estilismoWeb de una estilista con estética minimalista (fondo claro, mucho aire, tipografía grande): servicios con precios, lookbook, diario con artículos, página personal y reserva de cita con huecos disponibles.
- 10Marea Studio · estudio creativoWeb de un estudio creativo con los patrones de las webs premiadas: scroll suave, preloader con contador, titulares que entran por líneas, menú a pantalla completa, cursor con etiqueta, lista de proyectos con vista previa y pie con titular a todo el ancho.
- 11Pulso · panel de métricasPanel de un SaaS con los patrones de producto: marco de aplicación con barra lateral plegable, paleta de comandos ⌘K, tarjetas de indicadores con mini gráficas, gráficos de líneas, áreas y barras en SVG, y una tabla de datos con búsqueda, orden, selección y paginación.
- 12Barro · cerámica hecha a manoTienda de cerámica con el flujo completo de comercio: listado con filtros y orden, ficha con galería y zoom, selector de color y tamaño, carrito lateral con envío gratis, y un pedido por pasos. Usa useCart (estado del carrito con persistencia), ProductCard, OptionPicker, FilterBar y CartDrawer.
- 13Plano · revisión de modelos de edificaciónWeb de producto técnico con la fórmula «plano»: marco de línea fina con regla de marcas y cruces de registro, navegación en celdas, etiquetas mono en mayúsculas, titulares gruesos y apretados, rejillas de celdas con divisores discontinuos, un único acento naranja sobre blanco y negro y la maqueta 3D de un edificio real (la clínica de muestra de buildingSMART, convertida de IFC) con cuatro incidencias medidas en su modelo. En «Recorrido», un relato 3D: la foto se disuelve en la planta, un barrido de luz encuentra las incidencias, el edificio se separa por capas en cuatro pasos y la cámara visita cada incidencia como una sala con su ficha. Usa BlueprintFrame, CellGrid, EdgeTab, MetaTable, ExplorableCanvas (despiece, barrido, foco y fondo por parada), PinnedSection, ScrubText, FitText, ImageReveal y GridBackground (grano).
- 14ArcoForo · una semana de diseño, arte y cultura digitalWeb de un festival con la fórmula «evento»: preloader con la marca que se rellena, wordmark de borde a borde en dos tipografías, hero a sangre con fotografías que se funden (con botón de pausa), ficha de datos en caja de línea fina, programa con filtros por día y pie con la marca gigante. Usa Preloader (fill), FitText, CrossfadeHero, MetaTable, FilterBar y ProjectList.
- 15Arbor · residencias entre árbolesWeb de un complejo residencial con la fórmula «arquitectura de lujo tranquilo»: navegación en forma de isla (píldora de vidrio) con el menú a pantalla completa debajo, hero a sangre con la marca en serif que se dispersa al hacer scroll, paneles verticales que se expanden, ficha de datos, botón circular dentro del titular y pestaña lateral de visita. Usa IslandNav, ScatterText, ExpandingPanels, MetaTable, CircleButton, EdgeTab y el tema forestTokens.
- 16Sonar · estudio de identidad sonoraWeb de un estudio de sonido con la fórmula «experiencia explorable»: pantalla de entrada «con sonido / sin sonido», titular serif que se estira con el puntero, mapa de proyectos que se arrastra con inercia (con vista de lista alternativa), interruptor de sonido con ecualizador y cambio de vista animado en la página de proyectos. Usa Modal (pantalla completa), Toggle con indicador, SplitText (elastic), ExplorableCanvas, ProjectList con OptionPicker y BigFooter.
- 17Mota · interiorismo y marca con carácterWeb de un estudio de interiorismo con la fórmula «estudio con personalidad»: wordmark monoespaciado gigante en una sola pantalla, collage de pegatinas arrastrables, frase con letras elásticas que reaccionan al scroll, proyectos con cambio de vista animado (lista, cuadrícula, índice) y aviso de cookies con la marca. Usa FitText, StickerCollage, SplitText (elastic), ProjectList con OptionPicker, CookieBanner y CustomCursor (con imagen).
- 18Alzado · arquitectura que se entiende en maquetaWeb de un estudio de arquitectura con la fórmula «maqueta que se recorre»: preloader con la marca, portada fijada en la que el scroll lleva la cámara de la planta con cotas a la maqueta 3D de madera y metacrilato (three.js), proyectos con la foto dentro del cursor y cambio de vista, y mapa 3D de obras que se arrastra. Usa Preloader, PinnedSection, ExplorableCanvas (depth="3d", nav="scroll" y "drag"), SplitText, ProjectList con OptionPicker, CustomCursor, CellGrid y BigFooter.
- 19Vértice · grupo industrialWeb corporativa de un grupo industrial con la fórmula «Corporativo claro»: barra de utilidades (inversores, prensa, empleo, proveedores), megamenú con una línea por enlace y buscador, una frase en el hero, cifras con fuente y fecha, entrada por sector, soluciones filtradas con una frase («Fabricamos [qué] para [sector]»), clientes y premios con laureles, inversores con cotización e informes, sala de prensa, empleo y contacto por área. Movimiento mínimo. Usa NavBar (utility, mega, search), FilterBar (sentence), LogoCloud (awards), KpiCard, DataTable, Breadcrumbs, ContactForm, Footer y CookieBanner.
- 20Nora Vidal · ciclista profesionalWeb personal de una ciclista con la fórmula «Atleta en voltaje» (Lando Norris, sitio del año 2025): oliva y amarillo ácido, curvas de nivel de fondo, titular con palabras en serifa que entran tapadas por barras de color, firma que se dibuja sobre la foto, collage con lugar y fecha, estela de fotos bajo el cursor, el tema de la página cambia por sección (oliva → hueso → negro) y fichas de palmarés con la esquina recortada. Usa GridBackground (contour), SplitText (block, emphasis), LineDraw, ThemeScroll, ImageTrail, Marquee, Parallax, MetaTable y BigFooter.
- 21Faro · soporte para equipos y agentesLanding de producto con la fórmula «Producto nocturno» (Linear, Raycast): negro casi puro, titular en Inter 510 con tracking negativo, haces de luz en WebGL detrás, la propia aplicación como imagen principal con un foco desde arriba y fundido al suelo, logos de clientes, párrafo en dos tonos, secciones título-texto, explorador de funciones con capturas, atajos con teclas, ⌘K que busca en la página, precios y un cierre con manchas de color. Usa GradientField (beams, mesh), AppShell, FeatureExplorer, Kbd, CommandPalette, LogoCloud, PricingSection, Badge y Footer.
- 22Hamaca · radio de veranoRadio de verano con la fórmula «Escritorio Y2K» (Poolsuite): papel cuadriculado rosa, barra de menú con la hora, ventanas de sistema antiguo que se arrastran, se apilan y se cierran, reproductor de música sintetizada como ventana principal, foto en semitono y un dock de iconos pixel que abre la agenda, las postales y el club. Con teclado: cada ventana es un diálogo no modal con su botón de cerrar. Usa AudioPlayer (retro), GridBackground, Icon (pixel), LocalTime, TextField y Button.
- 23Travesía · documentales de marProductora de documentales con la coreografía de las webs de cine premiadas (docs/14): la portada es un índice tipográfico con una ventana de vídeo que reproduce el título que señalas y tiñe la página con su luz; al abrirlo, esa misma ventana —sin cortar el vídeo— se expande a pantalla completa mientras las palabras del título vuelan hasta el titular; «Siguiente documental» encoge el vídeo a una ventana, cambia de película y lo vuelve a expandir; y la marca de la cabecera se convierte, palabra a palabra, en el titular gigante de la productora. Usa Traveler, TravelSlot, SharedText, AmbientLight, MetaTable y PageTransition.
- 24Almíbar · pastelería de obradorPastelería de barrio con la fórmula «Obrador editorial» (relato de procedencia, nivel de movimiento 1–2): crema, tinta y frambuesa, serif grande, foto y vídeo del obrador a sangre. Resuelve lo que pide el sector: horario con estado «abierto ahora» en cada tienda, carta en HTML con los 14 alérgenos y filtro «sin…», pedido para recoger y tarta por encargo en UNA página cada uno (tienda, día con atajos «Hoy · Mañana», hora, nombre y teléfono; pago al recoger; precio y alérgenos en vivo, 48 h de antelación, señal del 30 %), reseñas con resumen y slider, transición de página en barrido frambuesa, barra de acciones en móvil y JSON-LD Bakery. Usa OpeningHours, MenuList, DatePicker (shortcuts), ActionBar, PageTransition, SplitText, ImageReveal, Timeline, OptionPicker, CartDrawer, TestimonialSection, FAQSection y CookieBanner.
- 25Almíbar Taller · tartas a medidaTartas a medida con la fórmula «Taller 3D»: la tarta es una escena three.js procedural (pisos, capas de bizcocho y relleno, cobertura con goteo, frutos rojos, flores y velas) que gira sobre un GradientField, hace despiece capa a capa con el scroll (PinnedSection) y cambia en vivo en el configurador con precio, alérgenos y DatePicker de recogida con antelación. Bodas (degustación con cita y estimador por invitados), empresas (precios por volumen) y el encargo en la misma pantalla del diseñador (recogida con atajos de día, nombre y teléfono, señal del 30 %). Transiciones de página en iris y la tarta que viaja de la portada al diseñador. Sin WebGL o con movimiento reducido, la misma tarta en SVG.
- 26Almíbar · café de barrio en puntosTercera versión de la pastelería Almíbar, fórmula «Café en puntos» (dot matrix en claro, movimiento 1): el vídeo del obrador pintado en puntos en el hero y lo práctico del día a día — carta en HTML con los 14 alérgenos y filtro «Sin…», QR imprimible para cada mesa que abre /mesa/<n> con pedido a barra sin registro, barra de acciones en móvil, club de sellos con código personal y horario «abierto ahora» con festivos. Usa VideoPlayer (ascii dots), MenuList, QRCode (dots), OpeningHours, ActionBar, QuantityStepper, Toggle, TextField, Toast y CookieBanner.
- 27Quilate · taller de joyeríaTaller de joyería contado solo con sus servicios: siete capítulos (escuchar, elegir, dar forma, ajustar, cuidar, transformar, heredar) con un anillo 3D procedural que cambia de estado y una luz que cambia de finalidad en cada uno (LightScroll: vitrina, fuego, luz de día honesta, rasante, lámpara). Configurador de alianza (metal, ancho, perfil, acabado, grabado con luz rasante) y de solitario por pasos (montura, piedra con conmutador de luz, quilates, metal, pavé, talla), con precio desglosado y plazo; medidor de talla en pantalla, servicios del taller con antes/después (BeforeAfter) y cita que se lleva la pieza diseñada.
- 28Ánima · fiesta de Halloween en ValenciaFiesta de Halloween contada como una noche en seis actos (la puerta, el pasaje del terror, la pista, el concurso de disfraces, la cena de los muertos y la medianoche) con una calavera 3D procedural, modelada con una función de distancia y MarchingCubes, que abre la mandíbula, castañetea, enciende los ojos, se parte y se multiplica. Cuadros que pasan por detrás de la calavera entre niebla y ascuas, cuenta atrás hasta la fiesta (Countdown), programa por horas, entradas con tipo y cantidad, y la información práctica: lugar, normas y preguntas.
- 29Cota · topografía con dron y gemelos digitalesTopografía con dron contada con una nube de puntos 3D procedural (PointCloud del kit): un barrido que revela el terreno con una estela de luz, color por cota, línea de medida con su cifra, edificios que se levantan como gemelo digital y una lupa que lee la X/Y/Z bajo el ratón (un clic lanza un pulso de escaneo). Recorrido en cinco pasos con useScrollStory, servicios, cifras y contacto.
- 30Maravillas · un gabinete de curiosidades que hay que recomponerHistoria interactiva entre rutas con diseño editorial de letras grandes: cuatro piezas 3D reales (un nautilo, un amonites escaneado por un museo, un astrolabio y un reloj de bolsillo con sus agujas) se perdieron en una tormenta de 1894. Cada sala es una ruta con un juego (girar la concha hasta su espiral, rascar el sedimento, apuntar la alidada a una estrella, poner el reloj en hora) y la pista de una sala resuelve la siguiente. Las piezas viajan entre rutas: del índice a su sala, de la sala al estante de la cabecera y del estante a la vitrina final (Traveler, SharedText, ScratchReveal).
- 31Runa · el roguelite de Estudio Musgo, en una demo que se juega en la webWeb de lanzamiento de un videojuego indie que es su propia demo: pantalla de título con el jefe detrás de las letras, selección de héroe entre tres modelos 3D animados (el elegido se queda en el HUD de todas las páginas), un cofre que se abre forzando la cerradura (SkillCheck) y suelta una runa (la gema de Quilate) que vuela al inventario, y el jefe, que viaja desde la portada, al que solo se le hace daño con la runa. Transiciones duras entre rutas (pixelado, glitch, barrido de líneas), cartel de nivel y temblor de pantalla; marcador, lista de deseados y kit de prensa.
- 32La Voz de la Tierra · el Disco de Oro de las Voyager, en cuatro rutasUna carta desde la Tierra en cuatro capítulos: el Disco de Oro, sus voces, el viaje y tu mensaje. Disco y cubierta 3D con archivo fotográfico de NASA, saludos originales, película de la Tierra desde la ISS y fotografías históricas con atribución. El mismo objeto acompaña la navegación; el mensaje se conserva solo en este dispositivo y se puede descargar.
- 33NÁDIR · una señal al otro lado del silencioExpedición de ficción en tres capítulos: una señal, un descenso y un hallazgo. Una semilla mecánica procedural de Three.js se abre y se descompone al avanzar por scroll, con cámara coreografiada, partículas, audio sintetizado opcional y un mensaje que se revela en la última ruta. Sin modelos ni texturas externos; alternativa estática para movimiento reducido y ausencia de WebGL.
- 34La Tramoya · venta-teatro en ChiclanaRestaurante con espectáculo en directo en Chiclana de la Frontera: cartelera por noches, ficha de cada función, reserva de mesa en el plano de la sala con menú y entrada en QR, carta de venta gaditana, eventos privados y un telón entre páginas.
Inspiraciones
Webs premiadas estudiadas en el laboratorio y rehechas con Trama: marca, textos e imágenes propios, la estructura y la estética de la original. Cada una sigue una guía de estilo.
- 01MatizBasada en Il Colorista: mosaico de formas salmón con fotos que se disuelven en color.
- 02NuraBasada en ALICE Hair & Art: collage suelto que se desenfoca y una sola letra en mayúsculas.
- 03Cita BarbersBasada en Rendezvous: naranja, serif con cursiva y palabras gigantes.
- 04MelenaBasada en Hair Me Up: arco melocotón y palabras de fondo; salón, tienda y academia.
- 05RaízBasada en Marco Ambrosi: oscuro y cobre, antes y después.
- 06PatrónBasada en Don Barber & Groom: gótica condensada, cinta y la familia.
- 07NúcleoBasada en Core Atelier Pilates: acordeón de aparatos con la foto fija.
- 08ImpulsoBasada en Essor Fitness: negro absoluto y titular a todo el ancho.
- 09ViveBasada en FIT AND YOU: condensada naranja, damero y tarjetas ladeadas.
- 10TallaBasada en Skulpt Fitness: lima, bordes curvos y menú en columnas verticales.
- 11LoboBasada en Fenriz Gym: B/N con un degradado de marca.
- 12RemadaBasada en Surfing Academy: minúsculas, ilustración de línea y viajes por convocatoria.
- 13AhoraBasada en Future London Academy: amarillo, muro de profesores y tarjetas solapadas.
- 14OficioBasada en Honhar: neobrutalismo amarillo y programas por promoción.
- 15Abuela RosaBasada en Peppa Sauce: el bote fijo y dos tintas.
- 16Q47Basada en K72: menú de filas con marquesina y transición en escalera.
- 17CénitBasada en Lusion: racimo de cruces en 3D, cintas que se dibujan con el scroll y un reel que crece hasta llenar la pantalla.
- 18BrasaBasada en Meer Mohsin: retrato en rojo, llamas que suben con el scroll y palabras caligráficas gigantes.
- 19PolillaBasada en Aardvark Book Club: amarillo con manchas orgánicas, ultranegra y libros con volumen que caen con el scroll.
- 20Sesión DobleBasada en A24 de Ravi Klaassens: catálogo en discos que giran y una didona apretada con estrellas.
- 21Casa MelosaBasada en House of Honey: rosa y chocolate, ultranegra de borde a borde cruzada por una caligráfica.
- 22MarejadaBasada en Seasats: web en tarjeta con columna de menú en degradado de arena a bosque y serifa fina sobre el mar.
- 23Alba ResidenciaBasada en ERA Residence: burdeos con caligrafía fantasma, marco biselado que se abre y selector de viviendas.
- 24No mires abajoBasada en Don't Look Up: juego satírico jugable a tinta: dos zapatos gigantes y una multitud que se enfada.
- 25CanteraBasada en Aspen Search: mosaico de baldosas con semitono, menta y reloj de cada ciudad en la cabecera.
- 26UltramarBasada en United Carriers: globo de puntos con rutas, titular extendido y un contenedor que cruza al bajar.
- 27ZancoBasada en Noho: muro escalonado de baldosas de color con muebles dibujados y tienda con color real.
- 28Pulso LentoBasada en Paul Kalkbrenner: blanco suizo con foto dentro del nombre, vinilo que gira, años gigantes y reproductor que suena.
- 29Tierra AnchaBasada en Tengile MalaMala Collection: crema y oliva, serifa finísima en mayúsculas y un collage de fauna que flota a distintas velocidades.
- 30BocadoBasada en Délice: bloques de rojo, turquesa, verde y granate, serifa blanda y platos del día en círculos bajo un título en arco.
- 31PausaBasada en Odyssée: marfil y azul tinta, fotos en duotono que recuperan el color al pasar y párrafos de serifa con sangría.
- 32Solera ArquitecturaBasada en LPAS: fila de cinco paneles por sector, foto arriba y color tierra abajo, que se ensanchan al pasar.
- 33VencejoBasada en Spyker Cars: penumbra azul petróleo, condensada en mayúsculas, detalles dispersos y un configurador con el coche dibujado.
- 34NácarBasada en Moto: piedra negra, tarjeta de acero en 3D sobre un pedestal y una galería que se recorre en profundidad.
- 35NimboBasada en Cerebrium: negro violáceo con una cinta de luz magenta que se dibuja sola y tarjetas blancas con barras, mapa y gráfica en directo.
- 36PLENOBasada en OFFF Forum: blanco y negro, fotos de escenario que se funden bajo un titular en serifa mayúscula y un logotipo de formas ultranegras.
- 37BoloBasada en Truck'N Roll: negro carbón, condensada de 900 a toda la pantalla con fotos entre las palabras, pegatina girada y pie violeta con cintas cruzadas.
- 38GranoBasada en Glitch&Grit: muro de proyectos fijado al scroll: dos mitades por proyecto y su nombre en grotesca de 900 y color pastel que salta con un glitch.
- 39Turia GroteskBasada en PP Neue Montreal: una tipografía presentada como guía de viaje: bloques de color pleno, el nombre a todo lo ancho, carta de pesos en franjas de colores y cintas de acentos.
- 40MajoBasada en Fauna Robotics: crema cálido, titulares centrados en grotesca de 500, tarjetas muy redondeadas y figuras de formas geométricas de colores.
- 41Nada CorrienteBasada en Normal is Boring: serifa editorial ultrafina en mayúsculas escalonada por la pantalla, marca partida entre dos esquinas, bloques azul claro y coral y palabras gigantes cortadas.
- 42TuesteBasada en CoffeeTech: portada negra con grotesca enorme, cuerpo crema con catálogo de máquinas en tarjetas grises, sobretítulos entre corchetes y naranja solo en las llamadas.
- 43TrochaBasada en Radian: gris cálido y fotos de campo a sangre, grotesca contenida y un amarillo de reserva; visor de la moto en cuatro ángulos con puntos de detalle.
- 44LlaveBasada en Units: rejilla de tarjetas de color pleno muy redondeadas, letra gruesa y redonda, lateral de pestañas de colores y aviso amarillo de oferta.
Landings temáticas
Landings de 300vh con cards de efectos ASCII y fondos que cambian de escena, anteriores al kit.
- 01Maré · surfEscuela de surf: el sol cruza el cielo del amanecer a la noche sobre olas de puntos. Cards con barrido.
- 02Grano · caféTostador artesanal: de los granos al vapor y al latte art en mosaico. Cards que suben con elegancia serif.
- 03Órbita · espacialAgencia aeroespacial en textmode.js: del cohete en la rampa al limbo del planeta y la luna. Cards que se disuelven en ASCII.
- 04Pulso · clubClub nocturno cyberpunk en textmode.js: skyline con lluvia y neón que vira de rosa a cian. Hover con glitch de texto.
- 05Hoja · plantasVivero: enredaderas que crecen con el scroll hasta florecer, en trazos de línea. Cards de cristal redondeadas.
- 06Pixel Club · arcadeSalón recreativo en píxel Game Boy: bloques, invasores e INSERT COIN. Cards con borde grueso y disolución.
Scroll
Páginas de 300vh donde el scroll (GSAP ScrollTrigger) mueve el fondo: base para héroes y secciones.
- 01Zoom tipográficoAl bajar te sumerges dentro de las letras, hasta 70 aumentos.
- 02EnsamblajePartículas dispersas que se agrupan en tu texto y estallan al final.
- 03Lluvia que respondeLa lluvia acelera con tu scroll y acaba solidificándose en tu texto.
- 04Ascenso con paralajeDel valle al espacio con capas de montañas a distinta velocidad.
- 05Terminal que se escribeUna terminal que teclea sola según avanzas, con tu texto como nombre de proyecto.
- 06Cifras que cuentanasciify-engine genera los números bitmap y textmode.js los dibuja contando hacia arriba.
- 07Resolución progresivaLa imagen se afina al bajar: de bloques enormes a caracteres finos y, al final, imagen limpia.
- 08Cambio de estiloCada tramo del scroll cambia el estilo de render: ascii, braille, puntos, Lego, voxel…
- 09Texto elásticoEl texto se estira y deja estelas según la velocidad del scroll.
- 10Héroe en capasImagen de asciify-engine que se afina y cambia de estilo, con un titular de textmode.js que se ensambla encima.
Texto
Escribe tu texto y míralo cambiar en tiempo real con textmode.js, asciify-engine o las dos.
- 01Onda de textoLetras enormes que ondulan y se apartan del puntero.
- 02PartículasMiles de partículas con muelle que componen tu texto.
- 03GlitchBandas desplazadas, separación cromática y ruido.
- 04Lluvia con textoLluvia digital que se enciende donde hay letras, usando las tuyas.
- 05MarquesinasFilas de texto con t.print() que corren en sentidos alternos.
- 06Mosaico de textoTu texto repetido por toda la pantalla, con los 9 efectos de hover del motor.
- 07FIGlet21 fuentes FIGlet más la bitmap 7×7, convertidas a ASCII con hover de agua.
- 08Texto LegoLetras de degradado reconstruidas con ladrillos.
- 09Texto en ditherLetras con halo tramadas en ámbar con patrón que deriva.
- 10Texto brailleLetras luminosas dibujadas con puntos braille y bloom.
- 11FIGlet animadoasciify-engine genera el arte de texto y textmode.js lo anima carácter a carácter.
- 12Capas combinadasOlas de puntos de asciify-engine con partículas de texto de textmode.js encima.
- 13DecodificadoEl texto se descifra de izquierda a derecha entre glifos aleatorios, en bucle.
- 14Texto 3DTu texto extruido como nube de puntos en 3D que gira con perspectiva.
- 15Letrero neónLetras de neón rosa con bloom, glitch y grano de CRT.
textmode.js
Sketches generativos que dibujan directamente sobre la rejilla de caracteres.
- 01PlasmaInterferencia de ondas convertida en rampa de glifos.
- 02Lluvia digitalColumnas de caracteres que caen y se descomponen.
- 03WarpUn campo de estrellas en fuga con estelas de caracteres.
- 04OndasSimulación de agua con ecuación de ondas.
- 05VidaEl autómata de Conway con estelas de células muertas.
- 06Campo de flujoOchocientas partículas siguiendo un campo de ruido.
- 07FuegoEl clásico algoritmo de fuego de Doom en texto.
- 08AtardecerSol, horizonte y un reflejo que centellea entre las olas.
- 09TúnelUn tablero de ajedrez infinito en perspectiva.
- 10AuroraCortinas de ruido sobre montañas y estrellas.
asciify-engine
Imágenes procedurales convertidas a caracteres, con estilos Studio y efectos de hover.
- 01LavaMetaballs de colores convertidas a caracteres con rampa detallada.
- 02SynthwaveSol a franjas y rejilla en perspectiva hechos de puntos con bloom.
- 03Galaxia brailleUna espiral de estrellas dibujada con caracteres braille.
- 04LadrillosOlas de color reconstruidas con piezas tipo Lego.
- 05VolúmenesPlasma convertido en columnas isométricas.
- 06Sala de espejosCaleidoscopio en teselas facetadas con una luz cenital.
- 07Dither Game BoyAnillos girando con tramado Bayer y paleta de cuatro verdes.
- 08Fósforo CRTPalabras deformadas en un monitor verde con scanlines y glitch.
- 09MosaicoUn toro de puntos girando, cubierto de teselas de color.
- 10GrabadoOrbes con estela trazados como líneas de grabado.
- 11LinternaMotor clásico: ASCII a todo color iluminado por una linterna.
- 12Neón matrixLluvia verde con un cambio de color magenta bajo el puntero.
- 13Cristal rotoAnillos de puntos que se rompen al acercarse el puntero.
- 14GravedadGalaxia cuyos caracteres son atraídos hacia el puntero.
- 15Espejo (cámara)Tu cámara en directo convertida a ASCII a todo color.