Hover Effect

A text hover effect that animates and outlines gradient on hover, as seen on x.ai.

Installation
CSS variables
- Text appearance
- Gradient colors
Props

Installation

To install, just include the following JavaScript somewhere on your page:

<!-- Load the core file first -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ft-core.iife.js"
></script>

<!-- Load the component -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ft/text-hover-effect.iife.js"
></script>

Important notes

Make sure your project is using either Frankenstyle or FrankenstyleKit.
The order of JavaScript loading is important. The ft-core.iife.js file must be loaded before any other components.
When using multiple Frankternity components, the core file only needs to be loaded once.

CSS variables

All CSS variables prefixed with --ft-* can be used to customize layout, spacing, colors, and sizing of this component.

Text appearance

Variable	Default	Description
`--ft-fill`	`transparent`	Controls the fill color of the text. Used for all text layers.
`--ft-stroke`	`var(--color-neutral-200)`	Stroke color of the text in light mode.
`--ft-dark-stroke`	`var(--color-neutral-800)`	Stroke color of the text when the `dark` variant is active.
`--ft-font-size`	`4.5rem`	Font size of the text rendered inside the SVG.
`--ft-leading`	`1`	Line height of the text.

Gradient colors

Variable	Default	Description
`--ft-gradient-stop-1`	`#eab308`	First gradient color stop, located at 0%.
`--ft-gradient-stop-2`	`#ef4444`	Second gradient color stop, located at 25%.
`--ft-gradient-stop-3`	`#3b82f6`	Third gradient color stop, located at 50%.
`--ft-gradient-stop-4`	`#06b6d4`	Fourth gradient color stop, located at 75%.
`--ft-gradient-stop-5`	`#8b5cf6`	Final gradient color stop, located at 100%.

These gradient variables control the animated stroke gradient that appears on hover and is revealed through the radial mask.

Props

To pass props, include them as JSON inside a <script> tag with the data-fn="props" attribute.

Note The data-ft-* attribute determines which Frankternity component is mounted and should be replaced with the component name.

Prop	Type	Default	Description
`text`	`string`	-	The text to be displayed with the hover effect
`duration`	`number`	`0`	The duration of the mask transition animation in seconds