Glyph Trail
cursorNeuProAbgerundete Kacheln mit je einer Farbe und einem Zeichen, genau entlang des Mauszeigerwegs gelegt, die neueste oben. Der Schweif verblasst mit der Zeit, sodass ein ruhender Zeiger die Spur verschluckt, und Text mit Difference-Blending färbt sich dort, wo er die Kacheln kreuzt. In einem Container oder über die ganze Seite.
Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.
Vorschau
Live-Demo. Das Theme schaltet die Demo selbst um.
Code
Der Code ist gesperrt
Glyph Trail gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 66 Effekte.
Kaufen · 49 €49 € · Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.
- Einmalzahlung
- Ein Entwickler
- Melde dich an und erstelle deinen Schlüssel sofort
- 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
npx shadcn@latest add @manniche-pro/glyph-trailclaude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
GlyphTrailProps
| Prop | Typ | Standard | Was sie tut |
|---|---|---|---|
glyphs | string[] | DEFAULT_GLYPHS | The symbols on the tiles, laid down in this order and repeated. |
palette | GlyphTrailColor[] | DEFAULT_PALETTE | Tile colours, laid down in this order and repeated alongside the glyphs. A plain string picks a black or white glyph by itself. |
length | number | 16 | Most tiles on screen at once. The oldest one makes room for the next. |
size | number | 44 | Edge of one tile in CSS pixels. |
spacing | number | 0.7 | Distance between tiles along the path, as a share of size. Below 1 they overlap like a deck of cards. |
roundness | number | 0.24 | Corner radius as a share of size. 0.5 makes circles. |
life | number | 650 | Milliseconds one tile stays before it has faded away. When the pointer rests, the trail fades from the tail into the pointer. |
offset | { x: number; y: number } | { x: 6, y: 8 } | Where the newest tile sits relative to the pointer tip, in pixels. |
scope | 'container' | 'window' | 'container' | container keeps the trail inside this component's box; window lets it follow the pointer over the whole page. |
layer | 'above' | 'behind' | 'above' | Draw the trail over the content (default) or under it, where text with mix-blend-difference tints over the tiles. Clicks pass through either way. |
touch | boolean | true | Let a finger drag the trail. Scrolling keeps working either way. |
zIndex | number | 60 | Stack order of the page-wide layer with scope="window". |
children | ReactNode | – | The surface the trail lives in (with scope="container"). |
className | string | – | Classes for the surface. |
style | CSSProperties | – | Inline style for the surface. |
A11y
Screenreader
The trail layer is aria-hidden and has pointer-events: none, so nothing is announced and no click is blocked. Your content inside is rendered as is.
Tastatur
The trail follows only a mouse, pen or finger. It adds no tab stops and never takes focus from the page.
Reduzierte Bewegung
Under reduced motion no trail is drawn and only the children render. It uses one rAF loop with pooled tiles, and the loop sleeps once the trail has folded in.
Sonstiges
The tiles are absolutely positioned on their own layer, so the layout never shifts. With touch it follows a dragging finger without blocking page scroll (passive listeners). With scope="window" it uses a fixed overlay through a portal.