Gloss Type

textNewPro

Glossy sticker lettering in any font: a thick soft outline, a light rim, a pearly gradient fill, a wet highlight on top and a sheen that sweeps across now and then while the word floats a little.

Buy · €49

Introductory price until 31 December 2026. €79 after that.

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

Width

The preview could not load.

Live demo. The theme switches the demo itself.

gloss-type.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type GlossTypeProps = {  text: string  as?: ElementType  tone?: GlossTypeTone  colors?: Partial<GlossTypeColors>  outline?: number  sheen?: boolean  sheenEvery?: number  float?: boolean  style?: CSSProperties  className?: string}export function GlossType({  text,  as = 'span',  tone = 'candy',  colors,  outline = 0.085,  sheen = true,  sheenEvery = 4200,  float = true,  style,  className,}: GlossTypeProps) {  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

Gloss Type is part of Manniche UI Pro. A key unlocks the source of all 66 effects.

Buy · €49

Have you bought it?Sign in to see the code

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Sign in and create your key 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/gloss-type

MCP

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

GlossTypeProps

Prop	Type	Default	What it does
`text` required	`string`	–	The text. It stays in the page as real, selectable text and is read once.
`as`	`ElementType`	`'span'`	The element to render, e.g. `h1` or `span`.
`tone`	`GlossTypeTone`	`'candy'`	A ready-made paint set.
`colors`	`Partial<GlossTypeColors>`	–	Overrides single paints of the tone.
`outline`	`number`	`0.085`	Thickness of the outline in `em`, so it scales with the font size.
`sheen`	`boolean`	`true`	Let a sheen sweep across the letters now and then.
`sheenEvery`	`number`	`4200`	Milliseconds between two sheen sweeps.
`float`	`boolean`	`true`	Let the sticker float up and down a little.
`className`	`string`	–	Classes for the element. Set the font (a heavy weight reads best), size and alignment here.
`style`	`CSSProperties`	–	Inline style for the element.

Preview

Code

The code is locked

Props

A11y

Screen reader

Reduced motion

Other