.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Warp Type

textPro

Displaytext auf einem WebGL-Mesh, das der Mauszeiger zieht und das zurückfedert, mit Farbsäumen, die beim Ziehen durch eine Palette wechseln.

Bald verfügbar

Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.

Breite

Die Vorschau konnte nicht geladen werden.

Live-Demo. Das Theme schaltet die Demo selbst um.

warp-type.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type WarpTypeProps = {  text: string  force?: number  radius?: number  fringe?: boolean  palette?: string[]  cycleMs?: number  color?: string  stiffness?: number  as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4'  className?: string}export function WarpType({  text,  force = 24,  radius,  fringe = true,  palette = DEFAULT_PALETTE,  cycleMs = 420,  color,  stiffness = 1,  as = 'span',  className,}: WarpTypeProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

Der Code ist gesperrt

Warp Type gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.

Bald verfügbar

49 € · Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.

Einmalzahlung
Ein Entwickler
Der Schlüssel kommt sofort per E-Mail
Keine Umsatzsteuer (§ 19 UStG)

Hast du einen Schlüssel? Hol den Code mit der CLI oder per MCP.

Der Schlüssel liegt in MANNICHE_PRO_KEY, nie im Code oder in der Adresse. So richtest du ihn ein

CLInpx shadcn@latest add @manniche-pro/warp-type

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

WarpTypeProps

Prop	Typ	Standard	Was sie tut
`text` erforderlich	`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.

Vorschau

Code

Der Code ist gesperrt

Props

A11y

Screenreader

Reduzierte Bewegung

Sonstiges