Text Pressure⁽⁰⁰⁴⁾

Variable font weight and optical sizing that react dynamically to cursor proximity.

Hover

PRESSURE

Loading…

Installation

$npx kibo add text-pressure

Usage

1import { TextPressure } from "@/components/kibo/text-pressure/component";
2 
3export default function MyComponent() {
4  return (
5    <div className="relative h-[200px] w-full">
6      <TextPressure
7        text="INTERACT"
8        flex={true}
9        width={true}
10        weight={true}
11        textColor="#ffffff"
12      />
13    </div>
14  );
15}

Props Reference

Prop	Type	Default	Description
`text`	`string`	"Compressa"	The text to display.
`fontFamily`	`string`	"Roboto Flex"	The Google Font family to use.
`fontUrl`	`string`	"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,100..1000&display=swap"	The URL to the Google Font.
`width`	`boolean`	true	Whether to adjust font width based on cursor.
`weight`	`boolean`	true	Whether to adjust font weight based on cursor.
`italic`	`boolean`	true	Whether to adjust italic slant based on cursor.
`alpha`	`boolean`	false	Whether to adjust opacity based on cursor.
`flex`	`boolean`	true	Whether to use flexbox spacing.
`stroke`	`boolean`	false	Whether to render a stroke effect instead of solid text.
`scale`	`boolean`	false	Whether to scale text to fill container height.
`textColor`	`string`	"#FFFFFF"	Base text color.
`strokeColor`	`string`	"#FF0000"	Stroke color if stroke is true.
`strokeWidth`	`number`	2	Stroke width in pixels if stroke is true.
`className`	`string`	""	Additional CSS classes.
`minFontSize`	`number`	24	Minimum font size in pixels.