---
title: "VariableFontScrubber — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Clément Rog · Text. Mouse-interactive typography component."
canonical: "https://framer.elliotli.dev/component/variablefontscrubber"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/VariableFontScrubber

# VariableFontScrubber

Mouse-interactive typography component.

[View on Framer](https://framer.com/marketplace/components/variablefontscrubber/?via=elliot-li)

![VariableFontScrubber preview image 1](https://framer.elliotli.dev/og/component/variablefontscrubber/01da0017a211e176/1600x1200.jpg)

## Summary

Mouse-interactive typography component.

## Description

Let users interact with variable fonts directly. Drag to scrub weight from 100 to 900, hover to explore width, or bind axis values to scroll position. Works with any variable font axis—weight, width, slant, optical size, or custom registered axes.

Four interaction modes: drag (horizontal scrub), hover (position-mapped), scroll (page scroll drives axis), and auto (animated ping-pong with pause-on-hover). Snap points let you lock to specific values on release with spring physics for smooth transitions.

Includes 8 pre-configured Google variable fonts (Inter, Roboto Flex, Outfit, DM Sans, etc.) or paste any Google Fonts URL. The indicator badge shows current axis value in real-time.

Built for hero sections, portfolio pieces, or anywhere you want typography that responds to user input.

## Rank history [How rankings work →](/terms#rankings)

-   All · #8273

## Details

- **Author**: Clément Rog
- **Price**: $6.00
- **Published**: 2026-01-26
- **Updated**: 2026-01-25
- **Added**: 2026-01-04
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing