Tide Lines
backgroundProHaarfeine Linien, die sich zum Mauszeiger hin wölben und mehr werden, je näher er der Mitte kommt.
Bald verfügbar
Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.
Vorschau
Die Vorschau konnte nicht geladen werden.
Live-Demo. Das Theme schaltet die Demo selbst um.
Code
tide-lines.tsxPro
Der Code ist gesperrt
Tide Lines gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.
Bald verfügbar49 € · 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
CLI
npx shadcn@latest add @manniche-pro/tide-linesMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
TideLinesProps
| Prop | Typ | Standard | Was sie tut |
|---|---|---|---|
minLines | number | 14 | Fewest lines on screen, shown when the pointer is far from the centre or absent. |
maxLines | number | 72 | Most lines on screen, reached when the pointer sits in the middle. Containers narrower than about 700 px scale both numbers down. |
thickness | number | 1 | Stroke width in CSS pixels. |
color | string | – | Line colour. Any CSS colour, including var(--x). Defaults to the inherited text colour. |
background | string | 'var(--background)' | Background colour, also the colour the vignette fades into. Any CSS colour, including var(--x). |
curvature | number | 1 | How strongly the lines bow toward the pointer, from 0 (straight) to 2. |
follow | number | 1 | How quickly the lines follow the pointer, from 0.2 (heavy, slow) to 2 (snappy). 1 is a soft glide. |
vignette | number | 0.75 | Strength of the fade into the background around the edges, from 0 (none) to 1. |
children | ReactNode | – | Content drawn above the lines. |
aria-label | string | – | Accessible name. Give it when the effect carries meaning: the drawing becomes role="img" with this name (children stay accessible). Without it the effect is treated as decoration. |
className | string | – | – |
A11y
Noch keine Hinweise zur Barrierefreiheit.
Die Hinweise kommen mit dem Quellcode, wenn Pro öffnet.