Weight Field
textProEach letter's variable-font weight follows the pointer's distance, with adjustable reach and ramp-in/ramp-out smoothing. It needs a font with a wght axis.
Opening soon
Pro cannot be bought yet. The page opens when payment is ready.
Preview
The preview could not load.
Live demo. The theme switches the demo itself.
Code
weight-field.tsxPro
The code is locked
Weight Field is part of Manniche UI Pro. A key unlocks the source of all 60 effects.
Opening soon€49 · Introductory price until 31 December 2026. €79 after that.
- One-off payment
- One developer
- Your key arrives by email straight away
- No VAT (§ 19 UStG)
Have a key? Get the code with the CLI or MCP.
The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up
CLI
npx shadcn@latest add @manniche-pro/weight-fieldMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
WeightFieldProps
| Prop | Type | Default | What it does |
|---|---|---|---|
text required | string | – | The text. Each letter gets its own weight. |
from | number | 200 | Weight of a letter the pointer is far away from, 100 to 900. |
to | number | 900 | Weight of the letter right under the pointer, 100 to 900. Can be lower than from to thin letters out instead. |
reach | number | 130 | How far the pointer's pull reaches, in pixels. Letters beyond it stay at from; the pull fades smoothly with distance. |
rampIn | number | 140 | Milliseconds a letter takes to grow towards to once the pointer comes near (about 95 % of the way). |
rampOut | number | 520 | Milliseconds a letter takes to settle back to from after the pointer has left. Slower than rampIn leaves a soft trail. |
align | 'start' | 'center' | 'end' | 'start' | Where the text sits inside its reserved box: start, center or end. |
as | ElementType | 'span' | Element to render, e.g. h1. |
className | string | – | Classes for the wrapper: set font family, size, colour and tracking here. Needs a variable font, see above. |
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.