Cómo preparar un café de filtro

Elige un café recién molido, con un punto entre la sal fina y la gruesa.

Calienta el agua hasta unos 93 grados, justo antes de hervir.

Moja el filtro de papel para quitarle el sabor y templar el cono.

Vierte un poco de agua y espera 30 segundos: el café se hincha y suelta gas.

Sigue vertiendo en espiral, despacio, hasta llegar al peso que buscas.

Deja que termine de gotear y sirve en una taza templada.

Prueba a cambiar la molienda si sale amargo o demasiado ácido.

Apunta tus proporciones para repetir la taza que más te guste.

HTML + CSSNavegación

Volver arriba con progreso

Un botón redondo aparece al bajar, con un anillo que marca cuánto llevas leído; al pulsarlo sube del todo.

Ajustes

16px
1x

Código

<div class="uv-nbt"><article class="sc" tabindex="0"><h3>Cómo preparar un café de filtro</h3><p>Elige un café recién molido, con un punto entre la sal fina y la gruesa.</p><p>Calienta el agua hasta unos 93 grados, justo antes de hervir.</p><p>Moja el filtro de papel para quitarle el sabor y templar el cono.</p><p>Vierte un poco de agua y espera 30 segundos: el café se hincha y suelta gas.</p><p>Sigue vertiendo en espiral, despacio, hasta llegar al peso que buscas.</p><p>Deja que termine de gotear y sirve en una taza templada.</p><p>Prueba a cambiar la molienda si sale amargo o demasiado ácido.</p><p>Apunta tus proporciones para repetir la taza que más te guste.</p></article><button type="button" class="up" aria-label="Volver arriba"><svg class="rg" viewBox="0 0 40 40" aria-hidden="true"><circle cx="20" cy="20" r="18" pathLength="1"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5.5 11.5L12 5l6.5 6.5"/></svg></button></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Navegación

Ver todos: Navegación

Dónde usarlo

Los artículos largos, las recetas y la documentación agradecen una forma rápida de volver arriba, y un anillo de progreso de lectura aporta contexto a la vez. En cuanto se baja un poco, el botón redondo aparece en la esquina con un muelle; su anillo se llena según avanza el scroll y al pulsarlo sube suave hasta arriba y lleva el foco al artículo.

La demo lee su propio contenedor con scroll, pero el mismo script sirve para la ventana con dos cambios pequeños. El desplazamiento suave se omite con movimiento reducido y el color principal define el anillo y la flecha.