Text Pressure

A highly interactive variable-font typography component. It dynamically adjusts the weight, width, and italic properties of individual characters based on their distance to the user's mouse cursor.

Installation

CLI

npx @modus-ui/cli add text-pressure

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/text-pressure.tsx.
3. Paste the code.

Usage

import { TextPressure } from "@/components/ui/text-pressure";

export default function Example() {
  return (
    <div className="h-64 w-full">
      <TextPressure text="Modus" width={true} weight={true} italic={true} />
    </div>
  );
}

Props