Wonky Headlines
Police Fraunces animée en CSS pur — les 4 axes WONK, SOFT, opsz et wght transitionnent entre style display expressif et texte lisible.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur la police variable Fraunces et son axe expérimental WONK (0 = tracé classique, 1 = courbes exagérées rappelant l'encre fraîche) couplé à SOFT (ouverture des contrepoinçons, 0–100). Ces deux axes d'auteur, exclusifs à Fraunces, confèrent au caractère une personnalité typographique entièrement pilotable en CSS.
L'animation @keyframes vfWonky fait osciller simultanément les 4 valeurs de font-variation-settings : de "WONK" 1, "SOFT" 100, "opsz" 144, "wght" 900 (display lourd, grande taille optique) à "WONK" 0, "SOFT" 0, "opsz" 9, "wght" 300 (texte léger, petite taille optique) et retour. La courbe ease-in-out sur 4 s crée une respiration typographique continue plutôt qu'un saut abrupt entre deux états.
Deux modificateurs CSS séparent les rôles : .vf-wonky-text--anim reçoit l'animation infinite ; .vf-wonky-text--alt fige l'état texte (WONK 0, SOFT 0, opsz 9, wght 300) pour un sous-titre statique en contraste. L'effet ne contient aucune ligne de JavaScript — il est compatible avec tout générateur de sites statiques ou SSR sans hydratation côté client.
Accessibilité
- prefers-reduced-motion absent : le code ne contient aucune media query
prefers-reduced-motion. L'animation tourne en boucle même si l'OS signale une préférence réduite. Compensez dans votre feuille de style :@media (prefers-reduced-motion: reduce) { .vf-wonky-text--anim { animation: none; } }. - Le texte est du HTML natif (
<span>) — les lecteurs d'écran le lisent normalement sans attribut ARIA supplémentaire. - Contraste : texte blanc
#fffsur fond sombre#0a0a0f— ratio WCAG AA largement dépassé (>18:1). - Aucune interaction clavier ou souris (pur CSS) — aucun gestionnaire d'événements, aucune trap focus.
- Repli police : si Fraunces échoue à charger, le fallback
serifpréserve la lisibilité ;font-variation-settingsest ignoré silencieusement par le navigateur.
Compatibilité navigateur
Nécessite font-variation-settings (CSS Fonts Level 4) et une police variable. Fraunces est servie par Google Fonts.
Sans support <code>font-variation-settings</code>, Fraunces s'affiche dans son instance statique par défaut (Regular 400) — le texte reste lisible, l'animation est ignorée sans erreur JS.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="vf-wonky-scene">
<!-- Titre animé : cycle display ↔ texte en boucle -->
<span class="vf-wonky-text vf-wonky-text--anim">Votre titre</span>
<!-- Sous-titre optionnel figé dans l'état texte (wght 300, WONK 0) -->
<span class="vf-wonky-text vf-wonky-text--alt">Sous-titre ou label d'axe</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| animation-duration (.vf-wonky-text--anim) | 4s | Durée d'un cycle WONK→texte→WONK. Ralentissez à 6–8 s pour un effet contemplatif, accélérez à 2 s pour une présentation dynamique. |
| animation-timing-function (.vf-wonky-text--anim) | ease-in-out | Courbe de progression. linear donne une oscillation mécanique ; cubic-bezier(0.4,0,0.2,1) accentue les paliers aux extrêmes. |
| font-size (.vf-wonky-text) | 2rem | Corps du texte. L'axe opsz oscille entre 9 et 144 — plus le font-size est élevé, plus la différence visuelle entre les deux états est marquée. |
| color (.vf-wonky-text) | #fff | Couleur du texte. Appliquez votre couleur brand ou un dégradé CSS (background-clip: text) pour un rendu plus riche. |
| "WONK" (keyframe 0% et 100%) | 1 | Valeur max de l'axe Wonk. 0 = tracé standard, 1 = courbes exagérées. Réduisez à 0,5 pour une subtilité accrue. |
| "SOFT" (keyframe 0% et 100%) | 100 | Ouverture des contrepoinçons à l'état display. 0 = contrepoinçons fermés, 100 = contrepoinçons ouverts (aspect plus aéré). |
| "wght" (keyframe 0% et 100%) | 900 | Graisse à l'état display. Réduisez à 700 pour un contraste de graisse moins dramatique. |
| "opsz" (keyframe 50%) | 9 | Taille optique minimum (état texte). Augmentez à 30–40 pour un état texte moins condensé et plus lisible en sous-titre. |
FAQ
@keyframes vfWonky et deux classes modificatrices. Il n'y a aucune ligne de JS — compatible avec tout générateur de sites statiques ou SSR sans hydratation côté client.wght et opsz. Les axes WONK et SOFT sont propres à Fraunces — si votre police ne les expose pas, retirez-les de font-variation-settings dans le keyframe et adaptez les plages wght et opsz aux valeurs min/max déclarées par votre fonte.animation-iteration-count: 1 et animation-fill-mode: forwards sur .vf-wonky-text--anim, puis basculez animation-play-state: paused / running via un IntersectionObserver. L'effet se joue une fois quand l'élément entre dans le viewport, puis se fige dans l'état texte (wght 300, WONK 0).
