Mesh Text Hover
0
Used by 0Controls
Mesh Text Hover
Warp text across a WebGL mesh that drags and springs back under the cursor, with chromatic color-split fringes that cycle through your palette.
KEY FEATURES
- — Cursor-driven mesh drag with spring-back and damping physics
- — Adjustable pull strength via a 0-50 Force slider
- — Toggleable chromatic color-split fringe effect on hover
- — Custom color palette that cycles roughly every 400 ms while dragging
- — Editable display text with Framer font family, variant, weight, and size controls
- — Custom text fill color
- — WebGL2 grid rendering with device-pixel-ratio aware resizing
- — Proximity and velocity-based deformation falloff around the pointer
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
text
string
MESH
The text rendered into the mesh and warped by the cursor.
font
font
{"..."}
Font family, weight, size, variant, and style of the text.
customColors
array
[...]
Palette of fringe colors cycled through on hover, ~400 ms each.
force
number
18
How strongly the cursor drags the mesh; higher pulls harder.
COLORS
PROP
TYPE
DEFAULT
DESCRIPTION
color
color
#ffffff
Fill color of the text glyphs.
colorSplit
boolean
true
Toggles chromatic color-split fringes while the cursor drags the text.
