.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

Et raymarchet glaskors, en ring, en kugle eller et ekstruderet logo med farvekanter, matte flader og en hældning mod markøren.

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

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

Koden er låst

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

MCP

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

PrismIconProps

Prop	Type	Standard	Hvad den gør
`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

Kode

Koden er låst

Props

A11y