.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

A photo set in monospace type with a drifting band of light and flicker; the pointer opens a lens onto the photo, ringed by accent-coloured characters.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

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

The code is locked

Glyph Lens is part of Manniche UI Pro. A key unlocks the source of all 60 effects.

Opening soon

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

One-off payment
One developer
Your key arrives by email 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-lens

MCP

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

GlyphLensProps

Prop	Type	Default	What it does
`src` required	`string`	–	The photo. Cross-origin images must be served with CORS headers, or the still image is shown instead.
`alt` required	`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`	–	–

Preview

Code

The code is locked

Props

A11y