---
title: "Text Pressuree — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Text. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/text-pressuree"
---

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

# Text Pressuree

Typography to life

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

![Text Pressuree preview image 1](https://framer.elliotli.dev/og/component/text-pressuree/c263a306dc6e521a/1600x1005.jpg)

## Summary

Typography to life

## Description

**Text Pressure** is an interactive React code component for Framer that brings typography to life through variable font manipulations. As the user moves their cursor over the text, individual characters react in real time—dynamically expanding weight, stretching width, slanting italics, and shifting opacity based on cursor proximity.

### What it does

-   **Variable Font & Transform Engines:** Modulates native variable font axes (`wght`, `wdth`, `ital`) or applies CSS transform fallbacks (`scaleX`, `skewX`) based on dynamic mouse proximity calculations.
    
-   **On-Demand RAF Loop:** Utilizes an optimized `requestAnimationFrame` loop that automatically pauses when the cursor is idle, minimizing GPU/CPU usage.
    
-   **DOM-Guarded State Tracking:** Caches character metrics and previous DOM styles to prevent redundant layout thrashing and re-renders.
    
-   **Framer Canvas-Safe Rendering:** Uses `useIsStaticRenderer` checks to ensure clean layout previews inside the Framer canvas without triggering background loops.
    

### Great for

-   **Interactive Hero Titles:** Turn main page headlines into engaging, touchpoint-driven typographic experiences.
    

### What you can customize

Full control right from the Framer right-hand property panel — no coding required:

-   **Text** — Set custom text content with automatic container responsiveness
    
-   **Font Selection** — Choose any native Framer font family or link external Google Variable Font stylesheets (`fontUrl`)
    
-   **Min Font Size** — Define minimum font size limits (`px`) to ensure legibility across smaller viewports
    
-   **Interactive Axis Toggles** — Enable or disable independent dynamic axes:
    
    -   **Width Axis:** Adjusts character width (`wdth` / `scaleX`) on hover
        
    -   **Weight Axis:** Dynamically scales font stroke weight (`wght`)
        
    -   **Italic Axis:** Applies dynamic slant angle (`ital` / `skewX`)
        
    -   **Alpha Effect:** Modulates opacity based on cursor distance
        
    

### Need help?

Have questions or feature suggestions? Reach out anytime at [karimsaif010@gmail.com](mailto:karimsaif010@gmail.com) or on X [@karimsaif0](https://x.com/karimsaif0).

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

-   All · #2261

## Details

- **Author**: Karim Saif
- **Published**: 2026-08-01
- **Updated**: 2026-08-01
- **Added**: 2026-08-01
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos