Now Live

Visual Configurators Available — New Animated Elements Coming June 30th Animations June 30th

Get Started
Variable Proximity Text Effect Configurator

How to Use in Breakdance Builder

  1. Customize your variable font effect using the controls below
  2. Click the Get Code button and copy the JavaScript
  3. In Breakdance Builder, add a Code Block element and paste the JavaScript
  4. Add the attribute
    data-variable-proximity📋
    with value true to any text element
The element text styling (size, color, alignment) will be handled by Breakdance Builder. You need a variable font installed for this effect to work. Remember to set the attribute value to true.
HOVER ME
Breakfusion Exclusive Get Your Variable Font Effect

Add an interactive variable font effect to your website that responds to mouse proximity.

  • Easy implementation with simple data attributes
  • Smooth font variations based on mouse movement
  • Fully responsive with touch support for mobile
  • Customizable proximity radius and falloff effect
General Settings
Sample Text
Proximity Radius 100px
Falloff Type
Font Variation Settings
Default

Default State

Hover

Hover State

Weight (wght)
From 400
To 700
Width (wdth)
From 100
To 100
Optical Size (opsz)
From 14
To 72
Grade (GRAD)
From 0
To 150

JavaScript Code