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

Glass Loupe

imagePro

Eine lichtbrechende Glaslinse, die dem Mauszeiger folgt und das Bild vergrößert, mit Rand, Glanzlichtern und weichem Schatten.

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.

glass-loupe.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type GlassLoupeProps = {  src: string  alt: string  zoom?: number  size?: number  rimColor?: string  rimWidth?: number  refraction?: number  fit?: 'cover' | 'contain'  focusY?: number  style?: CSSProperties  className?: string}export function GlassLoupe({  src,  alt,  zoom = 2.5,  size = 180,  rimColor = '#f4efe4',  rimWidth = 2.5,  refraction = 0.6,  fit = 'cover',  focusY = 0.5,  style,  className,}: GlassLoupeProps) {  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

Glass Loupe 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/glass-loupe

MCP

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

GlassLoupeProps

Prop	Typ	Standard	Was sie tut
`src` erforderlich	`string`	–	The image to inspect.
`alt` erforderlich	`string`	–	What the image shows, for screen readers.
`zoom`	`number`	`2.5`	Magnification, from 1 to 10.
`size`	`number`	`180`	Lens diameter in CSS pixels.
`rimColor`	`string`	`'#f4efe4'`	Colour of the lens rim. Any CSS colour.
`rimWidth`	`number`	`2.5`	Rim thickness in CSS pixels; 0 hides it.
`refraction`	`number`	`0.6`	0 to 1: how much the glass bends and splits colour towards its edge. 0 is a flat, perfect lens.
`fit`	`'cover' \| 'contain'`	`'cover'`	Crop the image to fill the frame, or fit all of it inside.
`focusY`	`number`	`0.5`	Where the image sits vertically when it is cropped or letterboxed, from 0 (top) to 1 (bottom).
`className`	`string`	–	–
`style`	`CSSProperties`	–	–

Vorschau

Code

Der Code ist gesperrt

Props

A11y