ArDacity Text Pressure

A React component library that adds dynamic pressure effects to text using variable fonts.

Installation

npm install @ar-dacity/ardacity-text-pressure

or

yarn add @ar-dacity/ardacity-text-pressure

What Happens During Installation

When you install this package, it automatically:

1. Creates a components/ArDacityUi directory in your project (if it doesn't exist)
2. Creates a TextPressure subdirectory
3. Copies the TextPressure component files into that directory:
   • TextPressure.jsx
   • index.js

Usage

After installation, you can import the component directly from your components directory:

import TextPressure from './components/ArDacityUi/TextPressure/TextPressure';
// Or simply:
import { TextPressure } from './components/ArDacityUi/TextPressure';

function App() {
  return (
    <div style={{position: 'relative', height: '300px'}}>
      <TextPressure
        text="Ardacity!"
        flex={true}
        alpha={false}
        stroke={false}
        width={true}
        weight={true}
        italic={true}
        textColor="#ffffff"
        strokeColor="#ff0000"
        minFontSize={36}
      />
    </div>
  );
}

Component Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | text | string | "ardacity" | Text content that will be displayed and animated. | | fontFamily | string | "ardacity VF" | Name of the variable font family. | | fontUrl | string | (ardacity font URL) | URL for the variable font file (needed) | | flex | boolean | true | Whether the characters are spaced using flex layout. | | scale | boolean | false | If true, vertically scales the text to fill its container height. | | alpha | boolean | false | If true, applies an opacity effect based on cursor distance. | | stroke | boolean | false | If true, adds a stroke effect around characters. | | width | boolean | true | If true, varies the variable-font "width" axis. | | weight | boolean | true | If true, varies the variable-font "weight" axis. | | italic | boolean | true | If true, varies the variable-font "italics" axis. | | textColor | string | auto | The fill color of the text. Automatically adapts to light/dark themes when not specified. | | strokeColor | string | "#FF0000" | The stroke color that will be applied to the text when "stroke" is set to true | | strokeWidth | number | 2 | The width of the stroke in pixels | | className | string | "" | Additional class for styling the <h1> wrapper. | | minFontSize | number | 24 | Sets a minimum font-size to avoid overly tiny text on smaller screens. |

Important Notes

• Make sure the font you're using supports all the variable properties you enable.
• The component works best with variable fonts that support width, weight, and italic axes.
• For best results, place the TextPressure component in a container with a defined height.
• The default font is provided as an example and should not be used in commercial projects.
• If no textColor is specified, the component will automatically detect the theme and use black text on light backgrounds and white text on dark backgrounds.

Example: Customizing the Font

<TextPressure
  text="Custom Font"
  fontFamily="My Variable Font"
  fontUrl="https://example.com/path/to/my-variable-font.woff2"
  width={true}
  weight={true}
  italic={false}
  textColor="#000000"
/>

Example: Minimal Usage

You can also use the component with minimal configuration:

<TextPressure/>

This will render the component with all default settings and automatic text color based on theme.

Compatibility

This package is compatible with:

• React 16.8.0 and above (requires Hooks)
• React with JSX
• Vite projects
• Next.js projects
• Create React App projects

License

MIT