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

Glyph Lens

imagePro

Ein Foto, gesetzt in Monospace-Schrift, mit einem treibenden Lichtband und Flackern. Der Mauszeiger öffnet eine Linse auf das Foto, umringt von Zeichen in der Akzentfarbe.

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.

glyph-lens.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type GlyphLensProps = {  src: string  alt: string  ramp?: string  columns?: number  contrast?: number  invert?: boolean  color?: 'mono' | 'tint'  ink?: string  background?: string  accent?: string  radius?: number  softness?: number  trail?: number  flicker?: number  wave?: number  fit?: 'cover' | 'contain'  focusX?: number  focusY?: number  children?: ReactNode  className?: string}export function GlyphLens({  src,  alt,  ramp = ' .,:;+=xX%#@',  columns = 120,  contrast = 1.25,  invert = false,  color = 'mono',  ink = '#ebe7dd',  background = '#0a0a0b',  accent = '#ff6a3d',  radius = 140,  softness = 0.15,  trail = 0.45,  flicker = 0.35,  wave = 0.6,  fit = 'cover',  focusX = 0.5,  focusY = 0.5,  children,  className,}: GlyphLensProps) {  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

Glyph Lens 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/glyph-lens

MCP

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

GlyphLensProps

Prop	Typ	Standard	Was sie tut
`src` erforderlich	`string`	–	The photo. Cross-origin images must be served with CORS headers, or the still image is shown instead.
`alt` erforderlich	`string`	–	Describes the photo for screen readers.
`ramp`	`string`	`' .,:;+=xX%#@'`	Characters from darkest to brightest. The first one is usually a space.
`columns`	`number`	`120`	Roughly how many characters fit across the box. Never smaller than 6 CSS pixels per character.
`contrast`	`number`	`1.25`	Tone contrast before the characters are picked. 1 leaves the photo as it is.
`invert`	`boolean`	`false`	Swaps the ramp, so bright parts of the photo get the sparse characters.
`color`	`'mono' \| 'tint'`	`'mono'`	`mono` prints every character in `ink`; `tint` prints each in the colour of the photo beneath it.
`ink`	`string`	`'#ebe7dd'`	Character colour in `mono`, as hex.
`background`	`string`	`'#0a0a0b'`	Background colour, as hex.
`accent`	`string`	`'#ff6a3d'`	Colour of the characters around the edge of the lens, as hex.
`radius`	`number`	`140`	Radius of the lens in CSS pixels.
`softness`	`number`	`0.15`	0 opens the lens cell by cell; 1 opens it as a soft circle.
`trail`	`number`	`0.45`	0 to 1: how long the lens lingers where the pointer has been.
`flicker`	`number`	`0.35`	0 to 1: how often characters flicker to a random one.
`wave`	`number`	`0.6`	0 to 1: how strongly a slow band of light drifts through the characters.
`fit`	`'cover' \| 'contain'`	`'cover'`	`cover` crops the photo to fill the box, `contain` shows all of it.
`focusX`	`number`	`0.5`	Horizontal focus point from 0 (left) to 1 (right), used when `cover` crops the photo.
`focusY`	`number`	`0.5`	Vertical focus point from 0 (top) to 1 (bottom), used when `cover` crops the photo.
`children`	`ReactNode`	–	Content shown on top of the characters.
`className`	`string`	–	–

Vorschau

Code

Der Code ist gesperrt

Props

A11y

Screenreader

Reduzierte Bewegung