This Framer component showcases the power of variable fonts, animating two text elements by smoothly transitioning their weight and width properties. Using Roboto Flex, a fully variable typeface, the component alternates between initial and final font-variation values — creating a fluid typographic animation that feels modern, expressive, and visually engaging.
Key features include:
Dynamic Variable Font AnimationEach text element animates independently using CSS custom properties (@property) to morph weight and width in real time.
Fully Customizable TextControl both text strings, font size, colors, and background directly from Framer.
Bidirectional Alternating AnimationThe text transitions endlessly using animation-direction: alternate, creating a smooth back-and-forth font transformation.
Fine-Tuned Typography ControlsAdjust initial and final values for:✔ Weight (wght)✔ Width (wdth)— giving you total control over the typography motion feel.
Lightweight, Pure CSS AnimationNo JavaScript motion library required — all transitions rely on native CSS variable font capabilities for optimal performance.
Perfect for creating expressive headlines, animated greetings, seasonal messages, interactive brand statements, or any layout where dynamic typography is the hero element.
Harman Pixels
