---
title: "Text Pressure"
canonical_url: "https://framerhub.io/components/text-pressure"
last_updated: "2026-06-15T14:46:31.880Z"
---

## Interactive Variable Font Typography

Create stunning cursor-responsive text effects with TextPressure. Each character dynamically adjusts its font weight, width, and style based on cursor proximity, creating an engaging and interactive typographic experience.

## Features

**Cursor Proximity Detection**
Characters respond to mouse/touch position with smooth interpolation. The closer the cursor, the more dramatic the effect on each letter.

**Variable Font Variations**
Support for multiple font axes including weight (wght), width (wdth), and italic (ital). Toggle each variation independently for complete control.

**Alpha & Stroke Effects**
Add depth with opacity variation based on cursor distance. Enable stroke effects for a distinctive outlined look with customizable colors.

**Flexible Layout**
Choose between flex layout (justified spacing) or standard inline display. Scale to fit option fills the container height.

## Use Cases

**Hero Sections** — Create memorable first impressions with interactive headlines that respond to user movement.

**Portfolio Headers** — Stand out with typography that captures attention and showcases creativity.

**Landing Pages** — Increase engagement with dynamic text that encourages cursor exploration.

**Brand Websites** — Reinforce brand identity with custom variable fonts and unique interactions.

![Text Pressure Preview](/framerhub/img/components/control/text-pressure.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find <span>

Text Pressure

</span>

 in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

Configure your text and font settings, then enable the effects you want.

**Text Settings**

- Text: The display text
- Font Family: Variable font family name
- Font URL: URL to your variable font file (.woff2)
- Min Font Size: Minimum font size in pixels

**Appearance**

- Text Color: Main text color
- Stroke Color: Color for stroke effect (when enabled)

**Effects**

- Width Variation: Animate font width axis
- Weight Variation: Animate font weight axis
- Italic Variation: Animate italic axis
- Alpha Variation: Animate opacity based on distance
- Flex Layout: Use flexbox for justified spacing
- Stroke Effect: Add colored outline behind text
- Scale to Fit: Scale text to fill container height

### Quick Tips

**Use Variable Fonts** — This component requires a variable font with wght, wdth, and ital axes. The default Compressa VF font works great, or use Google Variable Fonts.

**Dark Backgrounds** — Light text on dark backgrounds creates the most dramatic effect. Try white text with subtle stroke colors.

**Container Size** — The text automatically sizes to fit the container width. Use Scale to Fit for full container coverage.

**Performance** — The animation runs at 60fps using requestAnimationFrame. Longer texts with many characters may impact performance on mobile devices.

## License

**Free Component** — Use in unlimited personal and commercial projects. No attribution required.

## Refund Policy

This is a free component. No purchase required!

## Why Designers Love This

TextPressure transforms static headlines into living typography. The smooth, physics-based interpolation creates a satisfying interaction that users can't resist exploring. Perfect for modern websites that prioritize user engagement and memorable experiences.

---