# Chumbo Letters near the mouse turn bolder while distant ones stay thin, in a patch of bold that follows the cursor. > Chumbo is a THM Componentes component that links a heading's variable font to the cursor: letters closest to the pointer turn bold and distant ones stay thin, in an area that follows the movement. There is also a mode where letters change in random order on hover. It suits typographic heroes and brand pages. - Category: Text and typography - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/chumbo/ ## What it looks like Imagine sweeping a flashlight over a headline and watching the lit letters turn bold. In the demo, four white words stacked on an orange background stay thin until the cursor gets close. Then the letters within a radius around the pointer thicken, more at the center and less at the edge, and the patch of weight glides with the mouse across the whole section. The falloff can be linear, more concentrated or soft like a bell curve. In random mode, the letters change in shuffled order on hover and return when the mouse leaves. ## You may be looking for this if you asked for something like - “a headline that turns bold wherever the mouse goes” - “letters that thicken near the cursor and thin out away from it” - “a typography-only hero that reacts to the mouse” - “a variable font effect that follows the pointer” - “make my site header feel like a design studio with interactive type” - “big text that changes weight as I move the mouse” ## Also known as variable font proximity, cursor proximity text, interactive typography, variable font hover effect, responsive font weight ## When to use - Typographic hero for an agency, studio or fashion brand - Manifesto pages with a few words set large - Portfolios where typography is the main piece - Event or campaign openers with one short sentence ## When to avoid - Projects without a variable font, where nothing changes - Long text: every letter is measured on every frame, which adds up with many characters - Buttons and interface text that need to stay steady for reading ## How to ask your AI ```text Create a typographic hero with a variable font that reacts to cursor proximity: letters near the pointer gain weight and distant ones stay thin, tracked across the whole section, paused off screen and static for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Chumbo ### Does Chumbo work on phones? It works in proximity mode: Chumbo also reads touches, so dragging a finger across the section thickens the nearby letters. Random mode reacts to the mouse entering the text and was designed for hover. Since the effect shows more clearly with a mouse, test it on mobile, as the THM Componentes prompt asks. ### Will Chumbo make my page heavy? In proximity mode, Chumbo measures the distance from each letter to the cursor on every frame while it is mounted. For short headings the cost is low and it is rated Light in THM Componentes, but long sentences add more letters to the work. The prompt asks you to compare LCP and INP before and after. ### What font does Chumbo need? Chumbo needs a variable font, because it changes the font axes, such as weight, letter by letter. In the demo, Roboto Flex goes from weight 300 to 700. You set the resting and highlight values, and the cursor reach radius, 50 pixels by default, is adjustable. ## Related components - [Vaivém](https://vibecode.thmtecnologia.com/en/components/vaivem/): A headline where each letter grows thinner or bolder in a continuous wave and turns heavy near the mouse. - [Arpejo](https://vibecode.thmtecnologia.com/en/components/arpejo/): On hover, the letters turn bolder one at a time, in a wave that runs through the word. - [Gaita](https://vibecode.thmtecnologia.com/en/components/gaita/): Variable font text where letters thicken and thin out one after another, as if the word were breathing. - [Miçanga](https://vibecode.thmtecnologia.com/en/components/micanga/): A word drawn with thousands of tiny colored dots that scatter when the mouse passes and drift back into place. - [Grafite](https://vibecode.thmtecnologia.com/en/components/grafite/): A giant outlined word appears when the mouse passes over it and takes on your chosen colors near the cursor. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).