AIMRAN

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 + CSSNavigation

Back to top button with progress ring

A round button appears after scrolling, with a ring that shows how much you have read; pressing it goes back up.

Settings

16px
1x

Code

<div class="uv-nbt"><article class="sc" tabindex="0"><h3>How to make filter coffee</h3><p>Pick freshly ground coffee, somewhere between fine and coarse salt.</p><p>Heat the water to about 93 degrees, just before boiling.</p><p>Wet the paper filter to remove its taste and warm the cone.</p><p>Pour a little water and wait 30 seconds: the coffee blooms and releases gas.</p><p>Keep pouring slowly in a spiral until you reach your target weight.</p><p>Let it finish dripping and serve in a warm cup.</p><p>Adjust the grind if it tastes bitter or too sour.</p><p>Note your ratios so you can repeat your favorite cup.</p></article><button type="button" class="up" aria-label="Back to top"><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 for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Navigation

See all Navigation

iOS segmented tabs

NavigationReact + Motion

Bottom tab bar

NavigationReact + Motion

Shrinking navbar

NavigationReact + Motion

Magnifying dock

NavigationReact + Motion

Icon category bar

NavigationReact + Motion

Editorial fullscreen menu

NavigationReact + Motion

Collapsing breadcrumb

NavigationReact + Motion

Checkout stepper

NavigationReact + Motion

Where to use it

Long articles, recipes and documentation benefit from a quick way back to the top, and a reading progress ring adds context at the same time. Once the reader scrolls a little, the round button springs into the corner; its ring fills as the scroll advances, and pressing it scrolls smoothly back to the top and moves focus to the article.

The demo reads its own scroll container, but the same script works on the window with two small changes. Smooth scrolling is skipped when reduced motion is on, and the main color sets the ring and the arrow.