Glyph Trail

cursorNyPro

Afrundede brikker med hver sin farve og sit tegn, lagt præcis hvor markøren bevæger sig, med den nyeste øverst. Halen falmer med alderen, så sporet forsvinder ind i markøren, når den hviler, og tekst med difference-blanding skifter farve, hvor den krydser brikkerne. I en boks eller over hele siden.

Køb · 49 €

Introduktionspris til og med 31. december 2026. Derefter 79 €.

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

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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)} />}

Koden er låst

Glyph Trail er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 66 effekter.

Køb · 49 €

Har du købt?Log ind for at se koden

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Log ind og opret din nøgle med det samme
Ingen moms (§ 19 UStG)

Har du en nøgle? Hent koden med CLI eller MCP.

Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op

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	Standard	Hvad den gør
`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

Kode

Koden er låst

Props

A11y

Skærmlæser

Tastatur

Mindre bevægelse

Andet