Warp Type
textProDisplay text on a WebGL mesh that the pointer drags and that springs back, with colour fringes that cycle through a palette while you drag.
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
warp-type.tsxPro
The code is locked
Warp Type 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/warp-typeMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
WarpTypeProps
| Prop | Type | Default | What it does |
|---|---|---|---|
text required | string | – | The text to show. It stays in the page as real, selectable text; the mesh is drawn on top of it. |
force | number | 24 | How hard the pointer drags the letters, from 0 to 50. Around 24 is a firm, jelly-like pull. |
radius | number | – | How far from the pointer the drag reaches, in CSS pixels. Defaults to about one line of text. Moving fast widens it a little. |
fringe | boolean | true | Split the colours at the edges of dragged letters, like a lens that cannot quite focus. |
palette | string[] | DEFAULT_PALETTE | Colours of the fringe. They cycle while the pointer drags and settle when it stops. Any CSS colour, including var(--x). |
cycleMs | number | 420 | How long each palette colour is held while dragging, in milliseconds. |
color | string | – | Fill colour of the text. Any CSS colour; defaults to the inherited text colour (currentColor). |
stiffness | number | 1 | How stiffly the letters spring back. Below 1 they wobble for longer, above 1 they snap home. |
as | 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'span' | Which element to render, so a heading stays a heading. |
className | string | – | Classes for the wrapper. Set the font, size, weight and colour here; the effect reads them from the page. |
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.