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
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.
