---
titulo: Hero
resumen: Titular enorme y centrado fuera de la rejilla de capítulos, con líneas
  finas que lo enmarcan y trazos de color que se pintan alrededor.
estado: produccion
nivel: seccion
creado: 2026-10-11
actualizado: 2026-10-13
tokens:
  - line
  - line-2
  - sans
  - gutter
  - ease
relacionados:
  - componentes/boton
  - componentes/cabecera
plataformas:
  web:
    estado: produccion
    superficies:
      - id: landing
        fuente: public/site/report.css
        clases:
          - hero
          - hero-lines
          - hl
          - hero-body
          - hero-title
          - hero-lede
          - hero-canvas
          - hero-tools
          - hero-tool
id: patrones/hero
url: /designloop/patrones/hero
sync: ok
---

# Hero

Titular enorme y centrado fuera de la rejilla de capítulos, con líneas finas que lo enmarcan y trazos de color que se pintan alrededor.

## Ejemplo

Sin el lienzo de pintura (WebGL) ni las líneas, que se colocan con `hero.js` según dónde caiga el titular.

```html preview superficie=landing
<section class="hero" style="min-height: 0; padding: 72px 16px">
  <div class="hero-body">
    <h1 class="hero-title">Partner de diseño para fundadores y equipos</h1>
    <p class="sub hero-lede">Cubre todas tus necesidades de diseño desde la concepción hasta el frontend en una suscripción mensual.</p>
    <div class="actions">
      <a class="pill pill-accent" href="#">Reservar llamada</a>
      <a class="pill" href="#">Ver el plan</a>
    </div>
  </div>
</section>
```

## Piezas

| Clase | Qué hace |
| --- | --- |
| `.hero` | Ocupa al menos toda la pantalla (mínimo 640 px), centra su contenido y cierra con una línea `--line`. |
| `.hero-title` | Inter Tight 600, de 52 a 176 px, interletraje −0,055 em, como mucho 13 caracteres por línea. |
| `.actions` | Reservar llamada (principal, abre el diálogo de reserva) y ver el plan (secundario, baja a Precios). |
| `.hero-lede` | Entradilla (`.sub`) de 30 caracteres de ancho como máximo. |
| `.hero-lines`, `.hl` | Cuatro líneas `--line-2` que tocan los bordes del titular, como una rejilla de maquetación. |
| `.hero-canvas` | Lienzo WebGL 2 donde se pintan los trazos (degradados de malla, a la manera de mmeshy). |
| `.hero-tools`, `.hero-tool` | Pluma, goma y borrar, abajo a la derecha. Sin WebGL 2 se ocultan. |

## Movimiento

- Al cargar, cada línea del titular sube desde detrás de una máscara; la entradilla y los botones la siguen. Si el script tarda, el texto aparece igualmente a los 1,5 s.
- Tres trazos (cielo, tierra y oliva) se pintan alrededor del texto, nunca debajo: detrás del texto la pintura se desvanece.
- Con movimiento reducido el texto aparece sin animar.

# Web

Estado: En producción. Sin implementación documentada.

# iOS

Estado: Sin iniciar. Sin implementación documentada.

# Android

Estado: Sin iniciar. Sin implementación documentada.

# Enlace con producción

| Fuente | Estado | Huella |
| --- | --- | --- |
| `public/site/report.css` | Sincronizado | e814b735b514204d |
| `tokens.produccion.json` | Sincronizado | — |