Text Weight Hover

{"@webstudio/instance/v0.1":{"instanceSelector":["Lov-qNGhPTGM7p4__a6Gb","rmRKdj8prgoL-Qvxferym","HEkon7Z9IXUOpO2RGUh1P","lXh47pJuABrddDsvvC5on","fRIPqCziY4DIEMOwikSVd"],"children":[{"type":"id","value":"Lov-qNGhPTGM7p4__a6Gb"}],"instances":[{"type":"instance","id":"Lov-qNGhPTGM7p4__a6Gb","component":"Box","label":"Text Weight Hover Component","children":[{"type":"id","value":"k_Rj6DIUQpVnq8wsMmmlA"},{"type":"id","value":"IlRgEG_AEMo-0_zuQdT0Y"}]},{"type":"instance","id":"k_Rj6DIUQpVnq8wsMmmlA","component":"Paragraph","children":[{"type":"text","value":"You can hover over the entire text to see the effect in action. It will change the weight of the word based on the cursor position between the defined boundaries.\nYou can hover over the entire text to see the effect in action. It will change the weight of the word based on the cursor position between the defined boundaries."}]},{"type":"instance","id":"IlRgEG_AEMo-0_zuQdT0Y","component":"HtmlEmbed","label":"JS","children":[]}],"styleSourceSelections":[{"instanceId":"k_Rj6DIUQpVnq8wsMmmlA","values":["C42PvTETz658_6SG-Evhp"]}],"styleSources":[{"type":"local","id":"C42PvTETz658_6SG-Evhp"}],"breakpoints":[{"id":"2AQJrSP7PN3cvLY9d2vK-","label":"Base"}],"styles":[{"styleSourceId":"C42PvTETz658_6SG-Evhp","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"textWrapStyle","value":{"type":"keyword","value":"balance"},"listed":true}],"dataSources":[],"resources":[],"props":[{"id":"SZ7uCi-ZO-eiizlg1NM31","instanceId":"IlRgEG_AEMo-0_zuQdT0Y","name":"code","type":"string","value":"<script type=\"module\" src=\"https://drevo.b-cdn.net/Library/Custom%20Components/Text%20Weight%20Hover/text-weight-hover-v1.0.js\"></script>"},{"id":"BhNHkB9upLFVuaLem56lq","instanceId":"k_Rj6DIUQpVnq8wsMmmlA","name":"dv-weight-hover-effect","type":"string","value":"400-to-700"}],"assets":[]}}

Text Weight Hover

Instructions

Overview

Add an interactive text effect that dynamically changes font weight as users hover their cursor over text, creating a magnetic-like interaction.

Getting Started

Quick Start

Click the Copy Component button on the top of the page.
Paste the component into your Webstudio site.

Manual Start

Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/Text%20Weight%20Hover/text-weight-hover-v1.0.js"></script>[/code-block]

Add the Attribute: Add the dv-weight-hover-effect attribute to any text element: <h2 dv-weight-hover-effect="400-to-700">Hover over me</h2>

text weight hover effect attributes

Customization Options

Font Weight Range

Use the format initial-to-max to define the font weight range
Example: dv-weight-hover-effect="300-to-900"
Valid font weights typically range from 100 to 900

How It Works

The component splits text into individual characters
As your cursor moves over the text, each character's font weight changes based on:
- Distance from the cursor
- The defined weight range
Characters closest to the cursor receive the maximum weight
Characters farther away maintain the initial weight
When the cursor leaves, all characters return to the initial weight

Best Practices

Use with variable fonts for the smoothest transitions
Choose appropriate weight ranges for your font family
Works best with headings and short text blocks
Ensure sufficient contrast between initial and maximum weights
Test with different font families to find the best effect

Notes

The effect has a 100-pixel radius of influence around the cursor
Transitions are optimized for performance using CSS custom properties
Compatible with all modern browsers that support CSS custom properties