TextPressure

text-pressure

Varies glyph weight, width, slant, and opacity according to pointer proximity.

Usage

Basic usage

Move the mouse to the text on the dark stage, and the font will be extruded and deformed in real time according to the distance of the cursor.

Compressa

tsx

<div
  className="relative h-44 overflow-hidden rounded-xl px-6"
  style={{ background: "oklch(0.14 0.02 255)" }}
>
  <TextPressure
    text="Compressa"
    textColor="oklch(0.98 0 0)"
    className="flex items-center"
  />
</div>

Stroke hollow

stroke Make the center of the text transparent and leave only the token stroke outline to create a hollow neon title.

Hulian

tsx

<TextPressure
  text="Hulian"
  stroke
  textColor="oklch(0.98 0 0)"
  strokeColor="var(--color-primary)"
  className="flex items-center"
/>

Transparency linkage

alpha After turning it on, the characters further away from the cursor will become lighter and appear when they are closer.

Pressure

tsx

<TextPressure
  text="Pressure"
  alpha
  textColor="oklch(0.98 0 0)"
  className="flex items-center"
/>

Font weight axis only

Turn off the width and tilt axis, and only let the font weight change with proximity, and the effect is more restrained.

Bold

tsx

<TextPressure
  text="Bold"
  width={false}
  italic={false}
  textColor="oklch(0.98 0 0)"
  className="flex items-center"
/>

When to use

Use TextPressure for a large hero or brand heading whose characters change weight, width, and slant as the pointer approaches. For variable-font axis interpolation in a supplied container coordinate system with tiered falloff, use VariableProximity. Use Shuffle for scramble-and-resolve text.

Import

import { TextPressure } from "@hulianui/ui"

Props

Name	Type	Default	Description
text	`string`	`"Compressa"`	Text to render as individually responsive characters.
fontFamily	`string`	System sans serif stack	Font family. System fonts simulate the effect with `scaleX`, `font-weight`, and opacity; a true variable font enables `font-variation-settings`.
fontUrl	`string`	—	URL for a custom `@font-face`. Omitting it or passing an empty string loads no external font; any nonempty URL is injected without origin validation. Project policy requires callers to use a local or self-hosted asset.
width	`boolean`	`true`	Whether to animate the `wdth` axis and use `scaleX` as a fallback.
weight	`boolean`	`true`	Whether to animate the `wght` axis or `font-weight` based on proximity.
italic	`boolean`	`true`	Whether to animate the `ital` axis; effective only with a compatible variable font.
alpha	`boolean`	`false`	Whether characters become more opaque as the pointer approaches.
flex	`boolean`	`true`	Whether to distribute characters across the available width with flexbox.
stroke	`boolean`	`false`	Whether to render a hollow outline with transparent fill and the configured stroke color.
scale	`boolean`	`false`	Whether to stretch the text vertically to fill the container height.
textColor	`string`	`var(--color-foreground)`	Text color, using a theme-aware token by default.
strokeColor	`string`	`var(--color-primary)`	Outline color when `stroke` is enabled.
minFontSize	`number`	`24`	Minimum font size in pixels when the container narrows.
className	`string`	—	Additional class name merged onto the root `div`.

Example

tsx

// Move the pointer across the heading to change character pressure
<TextPressure text="Compressa" className="flex items-center" />

// Hollow text with the primary theme token as its outline
<TextPressure
  text="Hulian"
  stroke
  strokeColor="var(--color-primary)"
  className="flex items-center"
/>

Usage guidelines

Full width and italic behavior requires a variable font with wght, wdth, and ital axes. With a system font, width falls back to scaleX and italic may have no effect; this is a font limitation.
Tokens passed to strokeColor or textColor must use the --color- prefix, such as var(--color-primary); bare var(--primary) is not resolved. See [[hulian-token-color-var-needs-color-prefix]].
With no fontUrl, TextPressure does not load an external font. Any nonempty fontUrl injects an @font-face rule; the component does not validate whether the URL is local or remote. Project policy requires callers to provide a local or self-hosted asset, but runtime code does not enforce that policy.
Reduced-motion mode disables pointer-driven deformation.

Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText

Playground

Compressa

<div className="relative h-44 overflow-hidden rounded-xl px-6"
     style={{ background: "oklch(0.14 0.02 255)" }}>
  <TextPressure
    text="Compressa"
    weight={true}
    width={true}
    italic={true}
    alpha={false}
    stroke={false}
    className="flex items-center"
  />
</div>

Usage

Basic usage

Move the mouse to the text on the dark stage, and the font will be extruded and deformed in real time according to the distance of the cursor.

Compressa

tsx

<div
  className="relative h-44 overflow-hidden rounded-xl px-6"
  style={{ background: "oklch(0.14 0.02 255)" }}
>
  <TextPressure
    text="Compressa"
    textColor="oklch(0.98 0 0)"
    className="flex items-center"
  />
</div>

Stroke hollow

stroke Make the center of the text transparent and leave only the token stroke outline to create a hollow neon title.

Hulian

tsx

<TextPressure
  text="Hulian"
  stroke
  textColor="oklch(0.98 0 0)"
  strokeColor="var(--color-primary)"
  className="flex items-center"
/>

Transparency linkage

alpha After turning it on, the characters further away from the cursor will become lighter and appear when they are closer.

Pressure

tsx

<TextPressure
  text="Pressure"
  alpha
  textColor="oklch(0.98 0 0)"
  className="flex items-center"
/>

Font weight axis only

Turn off the width and tilt axis, and only let the font weight change with proximity, and the effect is more restrained.

Bold

tsx

<TextPressure
  text="Bold"
  width={false}
  italic={false}
  textColor="oklch(0.98 0 0)"
  className="flex items-center"
/>

Props

Name	Type	Default	Description
text	`string`	`"Compressa"`	Text to render as individually responsive characters.
fontFamily	`string`	System sans serif stack	Font family. System fonts simulate the effect with `scaleX`, `font-weight`, and opacity; a true variable font enables `font-variation-settings`.
fontUrl	`string`	—	URL for a custom `@font-face`. Omitting it or passing an empty string loads no external font; any nonempty URL is injected without origin validation. Project policy requires callers to use a local or self-hosted asset.
width	`boolean`	`true`	Whether to animate the `wdth` axis and use `scaleX` as a fallback.
weight	`boolean`	`true`	Whether to animate the `wght` axis or `font-weight` based on proximity.
italic	`boolean`	`true`	Whether to animate the `ital` axis; effective only with a compatible variable font.
alpha	`boolean`	`false`	Whether characters become more opaque as the pointer approaches.
flex	`boolean`	`true`	Whether to distribute characters across the available width with flexbox.
stroke	`boolean`	`false`	Whether to render a hollow outline with transparent fill and the configured stroke color.
scale	`boolean`	`false`	Whether to stretch the text vertically to fill the container height.
textColor	`string`	`var(--color-foreground)`	Text color, using a theme-aware token by default.
strokeColor	`string`	`var(--color-primary)`	Outline color when `stroke` is enabled.
minFontSize	`number`	`24`	Minimum font size in pixels when the container narrows.
className	`string`	—	Additional class name merged onto the root `div`.

// Move the pointer across the heading to change character pressure <TextPressure text="Compressa" className="flex items-center" /> // Hollow text with the primary theme token as its outline <TextPressure text="Hulian" stroke strokeColor="var(--color-primary)" className="flex items-center" />

Usage guidelines

Full width and italic behavior requires a variable font with wght, wdth, and ital axes. With a system font, width falls back to scaleX and italic may have no effect; this is a font limitation.

Tokens passed to strokeColor or textColor must use the --color- prefix, such as var(--color-primary); bare var(--primary) is not resolved. See [[hulian-token-color-var-needs-color-prefix]].

With no fontUrl, TextPressure does not load an external font. Any nonempty fontUrl injects an @font-face rule; the component does not validate whether the URL is local or remote. Project policy requires callers to provide a local or self-hosted asset, but runtime code does not enforce that policy.

Reduced-motion mode disables pointer-driven deformation.

Playground

Compressa

<div className="relative h-44 overflow-hidden rounded-xl px-6"
     style={{ background: "oklch(0.14 0.02 255)" }}>
  <TextPressure
    text="Compressa"
    weight={true}
    width={true}
    italic={true}
    alpha={false}
    stroke={false}
    className="flex items-center"
  />
</div>

TextPressure

Usage

Basic usage

Compressa

Stroke hollow

Hulian

Transparency linkage

Pressure

Font weight axis only

Bold

When to use

Import

Props

Example

Usage guidelines

Related

Playground

Compressa

TextPressure

Usage

Basic usage

Compressa

Stroke hollow

Hulian

Transparency linkage

Pressure

Font weight axis only

Bold

When to use

Import

Props

Example

Usage guidelines

Related

Playground

Compressa