.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

A raymarched glass cross, ring, ball or extruded logo with colour fringes, frost and pointer lean.

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.

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

The code is locked

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

MCP

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

PrismIconProps

Prop	Type	Default	What it does
`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.

Preview

Code

The code is locked

Props

A11y