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

Prism Icon

webglPro

Ein per Raymarching berechnetes Glaskreuz, ein Ring, eine Kugel oder ein extrudiertes Logo mit Farbsäumen, Mattierung und Neigung zum Mauszeiger.

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.

prism-icon.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type PrismIconProps = {  shape?: PrismShape  logo?: string  backdropColors?: string[]  backdropImage?: string  backdropText?: string  backdropTextColor?: string  backdropPattern?: BackdropPattern  transparent?: boolean  ior?: number  dispersion?: number  frost?: number  tint?: string  absorb?: number  size?: number  depth?: number  bevel?: number  interactive?: boolean  children?: ReactNode  label?: string  className?: string}export function PrismIcon({  shape = 'cross',  logo,  backdropColors = DEFAULT_COLORS,  backdropImage,  backdropText,  backdropTextColor = DEFAULT_TEXT_COLOR,  backdropPattern = 'none',  transparent = false,  ior = 1.45,  dispersion = 0.035,  frost = 0.3,  tint = '#ffffff',  absorb = 0.5,  size = 1,  depth = 0.2,  bevel = 0.14,  interactive = true,  children,  label,  className,}: PrismIconProps) {  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

Prism Icon 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/prism-icon

MCP

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

PrismIconProps

Prop	Typ	Standard	Was sie tut
`shape`	`PrismShape`	`'cross'`	The glass solid. `cross` is an X, `plus` an upright cross, `torus` a ring, `sphere` a ball, and `logo` round-extrudes the shape of the `logo` image (or a built-in four-point mark when no image is given).
`logo`	`string`	–	Image for `shape="logo"`: a PNG, SVG or any image URL whose transparent pixels are the outside. A fully opaque picture is read by how much it differs from its top-left pixel. Cross-origin images need CORS headers; if the image cannot be read the built-in mark is used instead.
`backdropColors`	`string[]`	`DEFAULT_COLORS`	What the glass looks through. WebGL cannot read the page behind a canvas, so the component paints its own plate and the glass refracts that. These colours form a soft diagonal gradient (any CSS colour, `var()` included).
`backdropImage`	`string`	–	Optional photo drawn over the gradient, scaled to cover the box. Same CORS rule as `logo`.
`backdropText`	`string`	–	Big headline painted on the plate, centred; use `\n` for a second line. The glass bends it, which sells the effect.
`backdropTextColor`	`string`	`DEFAULT_TEXT_COLOR`	Colour of the plate text and pattern. Any CSS colour.
`backdropPattern`	`BackdropPattern`	`'none'`	Stripes or a grid painted on the plate: nothing shows lensing quite like straight lines.
`transparent`	`boolean`	`false`	Leaves the plate empty (transparent) so the page shows around the glass. The glass itself keeps its reflections, rim and tint, so it still reads as glass; only the refracted view is empty, because the page cannot be sampled.
`ior`	`number`	`1.45`	Base index of refraction. 1 is invisible glass, 1.5 is ordinary glass, higher bends harder.
`dispersion`	`number`	`0.035`	How far the red and blue indices split from green. 0 is colourless, around 0.03 gives clear colour fringes.
`frost`	`number`	`0.3`	Frosted blur of the view through the glass, 0 (polished) to 1 (heavily frosted).
`tint`	`string`	`'#ffffff'`	Colour the glass body lets through. White is clear. Any CSS colour.
`absorb`	`number`	`0.5`	How strongly the tint and the thickness darken the view through the glass. 0 is none.
`size`	`number`	`1`	Scale of the solid inside the box. 1 fills about 60 percent of the short side.
`depth`	`number`	`0.2`	Half thickness of the `cross`, `plus` and `logo` solids in world units. Thicker looks heavier and bends more.
`bevel`	`number`	`0.14`	Bevel radius of the `logo` walls: 0 is a hard extrusion, near `depth` is a pillow.
`interactive`	`boolean`	`true`	Turns on pointer lean, drag-to-orbit and arrow keys, and makes the icon a tab stop. Touch uses `touch-action: pan-y`, so a vertical swipe still scrolls the page and only horizontal drags orbit. Under reduced motion the solid does not float or follow the pointer, but the arrow keys still turn it, one still frame per key.
`children`	`ReactNode`	–	Drawn above the canvas, centred. Not refracted: the glass only sees the plate painted by the component.
`label`	`string`	–	Accessible name. When set, the glass is exposed as an image; leave it out for pure decoration. An interactive icon is focusable and always gets a name, `"Glass icon"` when none is given.
`className`	`string`	–	Sizes the box. The canvas fills it.

Vorschau

Code

Der Code ist gesperrt

Props

A11y