Text Pressure

A heading rendered in the Compressa variable font that warps each letter's weight, width, italic, and alpha axes based on cursor proximity. Push your cursor toward a letter and it expands; pull away and it contracts.

React

Interactive

#variable-font

#compressa

#typography

#interactive

#headline

#pressure

Usage

import TextPressure from '@crazygl/hero-text-pressure';

export default function Hero() {
  return (
    <TextPressure
      heading="Compressa"
      pressureRadius={600}
      smoothing={0.18}
    />
  );
}

The display face is the Roboto Flex variable font, loaded from Google Fonts on first render (a frame of the fallback system stack may show before it takes over).

Customise

Content — heading (short words read best), subheading, ctaLabel, onCTAClick (URL string or function).
Axes — useWidth, useWeight, useItalic, useAlpha — independently toggle each warped axis.
Pressure — pressureRadius (cursor reach), smoothing (elastic ↔ snappy).
Typography — textAlign, fontSize, letterSpacing.
Colours — textColor, useStroke + strokeColor (outline instead of fill).
Backdrop — transparentBackground, bgColor.

Best for

Type-foundry sites and fonts-for-sale showcases.
Design-system landing pages and agency / portfolio covers.
Typographic case-study headers where the font itself is the story.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-text-pressure

02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx

import TextPressure from '@crazygl/hero-text-pressure';

export default function Landing() {
  return (
    <TextPressure />
  );
}

03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx

// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import TextPressure from '@crazygl/hero-text-pressure';

export default function Page() {
  return (
    <section>
      <TextPressure
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}