.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

Et foto sat i monospace-skrift med et drivende lysbånd og flimmer. Markøren åbner en linse ind til fotoet, omkranset af tegn i accentfarven.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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

Koden er låst

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

Åbner snart

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

Engangsbetaling
Én udvikler
Nøglen kommer på mail 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-lens

MCP

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

GlyphLensProps

Prop	Type	Standard	Hvad den gør
`src` påkrævet	`string`	–	The photo. Cross-origin images must be served with CORS headers, or the still image is shown instead.
`alt` påkrævet	`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

Kode

Koden er låst

Props

A11y