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

Flux Image

imagePro

Ein Foto, das unter dem Mauszeiger wie Flüssigkeit fließt: eine kleine WebGL2-Fluidsimulation mit Prismenaufspaltung, Glanz und sich verziehenden Rändern. Ein Klick sendet einen Ring aus.

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.

flux-image.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type FluxImageProps = {  src: string  alt: string  fit?: 'cover' | 'contain'  focusX?: number  focusY?: number  intensity?: number  radius?: number  resolution?: number  recovery?: number  swirl?: number  chroma?: number  shine?: number  edges?: 'warp' | 'clamp'  hint?: boolean  children?: ReactNode  className?: string}export function FluxImage({  src,  alt,  fit = 'cover',  focusX = 0.5,  focusY = 0.5,  intensity = 1,  radius = 90,  resolution = 128,  recovery = 1,  swirl = 0.45,  chroma = 0.4,  shine = 0.35,  edges = 'warp',  hint = true,  children,  className,}: FluxImageProps) {  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

Flux Image 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/flux-image

MCP

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

FluxImageProps

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.
`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.
`intensity`	`number`	`1`	How hard the pointer stirs the surface. 1 is a firm stir; 0.4 a gentle one.
`radius`	`number`	`90`	Reach of the pointer in CSS pixels.
`resolution`	`number`	`128`	Cells along the long side of the simulation. Higher is finer and costs more; 64 to 256 is sensible.
`recovery`	`number`	`1`	How quickly the photo heals after a stir. 1 settles in about three seconds; 2 in half that.
`swirl`	`number`	`0.45`	0 to 1: how much the flow curls into eddies.
`chroma`	`number`	`0.4`	0 to 1: colour fringing where the surface is pulled hardest.
`shine`	`number`	`0.35`	0 to 1: a glassy sheen on the slopes of each ripple.
`edges`	`'warp' \| 'clamp'`	`'warp'`	`warp` lets the frame's edges ripple too; `clamp` keeps a clean rectangle.
`hint`	`boolean`	`true`	Gives one short stir when the photo first scrolls into view, so people see it is alive.
`children`	`ReactNode`	–	Content shown on top of the photo.
`className`	`string`	–	–

Vorschau

Code

Der Code ist gesperrt

Props

A11y