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

Retour en haut avec anneau de progression

Un bouton rond apparaît au défilement, avec un anneau qui montre la lecture ; un appui remonte tout en haut.

Réglages

16px
1x

Code

<div class="uv-nbt"><article class="sc" tabindex="0"><h3>Comment préparer un café filtre</h3><p>Choisis un café fraîchement moulu, entre le sel fin et le gros sel.</p><p>Chauffe l’eau à environ 93 degrés, juste avant l’ébullition.</p><p>Mouille le filtre en papier pour retirer son goût et tiédir le cône.</p><p>Verse un peu d’eau et attends 30 secondes : le café gonfle et dégaze.</p><p>Continue à verser lentement en spirale jusqu’au poids voulu.</p><p>Laisse finir l’écoulement et sers dans une tasse tiède.</p><p>Change la mouture s’il est amer ou trop acide.</p><p>Note tes proportions pour refaire ta tasse préférée.</p></article><button type="button" class="up" aria-label="Retour en haut"><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 pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Navigation

Voir tout : Navigation

Onglets segmentés iOS

NavigationReact + Motion

Barre d’onglets inférieure

NavigationReact + Motion

Barre de navigation rétractable

NavigationReact + Motion

Dock avec agrandissement

NavigationReact + Motion

Barre de catégories à icônes

NavigationReact + Motion

Menu plein écran éditorial

NavigationReact + Motion

Fil d’Ariane rétractable

NavigationReact + Motion

Étapes de paiement

NavigationReact + Motion

Où l’utiliser

Les longs articles, les recettes et la documentation gagnent à offrir un retour rapide en haut, et un anneau de progression de lecture ajoute du contexte. Dès qu'on défile un peu, le bouton rond surgit dans le coin ; son anneau se remplit au fil du défilement, et un appui remonte en douceur tout en haut en plaçant le focus sur l'article.

La démo lit son propre conteneur, mais le même script marche sur la fenêtre avec deux petits changements. Le défilement doux est désactivé avec le mouvement réduit.