.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

A photo that flows like liquid under the pointer: a small WebGL2 fluid simulation with a prism split, sheen and warping edges. A click sends out a ring.

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.

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

The code is locked

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

MCP

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

FluxImageProps

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.
`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`	–	–

Preview

Code

The code is locked

Props

A11y