variable-font font-weight morph pulse animation wght premium decorative hero headline with breathing animation pulsing logo text on a dark splash screen idle-state animation for an app name attention-drawing CTA label static headings feel inert on long-dwell screens want animation tied to font weight, not movement need a subtle premium effect without layout shift
Font Weight Morph
Fetch snippet JSON:
curl https://webspire.de/snippets/text/font-weight-morph.json Preview
Background
Customize
Quick Start
<h2 class="font-weight-morph text-6xl" style="font-family: InterVariable, sans-serif">Webspire</h2>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 439 bytes · 20 lines
- Custom Properties
-
--wght-from--wght-to--wght-duration - Classes
-
.font-weight-morph
variable-font font-weight morph pulse animation wght premium
Requires a variable font with a wght axis (e.g. Inter Variable, Geist, Satoshi). Falls back to font-weight: 400 with no animation on browsers without variable font support.
Breathing headline
<h1 class="font-weight-morph text-6xl tracking-tight"
style="font-family: 'Inter Variable', sans-serif">
Build better.
</h1>Custom weight range
.font-weight-morph {
--wght-from: 200;
--wght-to: 700;
--wght-duration: 3s;
}