Glyph Trail

cursorNewPro

Rounded tiles, each with one colour and one symbol, laid down along the exact path of the pointer, the newest on top. The tail fades as it ages, so a resting pointer swallows the trail, and text with a difference blend tints where it crosses the tiles. In a container or across the whole page.

Buy · €49

Introductory price until 31 December 2026. €79 after that.

.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}

Width

The preview could not load.

Live demo. The theme switches the demo itself.

glyph-trail.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type GlyphTrailProps = {  glyphs?: string[]  palette?: GlyphTrailColor[]  length?: number  size?: number  spacing?: number  roundness?: number  life?: number  offset?: { x: number; y: number }  scope?: 'container' | 'window'  layer?: 'above' | 'behind'  touch?: boolean  zIndex?: number  children?: ReactNode  style?: CSSProperties  className?: string}export function GlyphTrail({  glyphs = DEFAULT_GLYPHS,  palette = DEFAULT_PALETTE,  length = 16,  size = 44,  spacing = 0.7,  roundness = 0.24,  life = 650,  offset = { x: 6, y: 8 },  scope = 'container',  layer = 'above',  touch = true,  zIndex = 60,  children,  style,  className,}: GlyphTrailProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

The code is locked

Glyph Trail is part of Manniche UI Pro. A key unlocks the source of all 66 effects.

Buy · €49

Have you bought it?Sign in to see the code

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Sign in and create your key 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

CLInpx shadcn@latest add @manniche-pro/glyph-trail

MCP

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

GlyphTrailProps

Prop	Type	Default	What it does
`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.

Preview

Code

The code is locked

Props

A11y

Screen reader

Keyboard

Reduced motion

Other