.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

Et foto, der flyder som væske under markøren: en lille WebGL2-væskesimulering med prismeopdeling, glans og vridende kanter. Et klik sender en ring afsted.

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

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

Koden er låst

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

MCP

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

FluxImageProps

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

Kode

Koden er låst

Props

A11y