Gloss Type

textNeuPro

Glänzende Sticker-Schrift in jeder Schriftart: eine dicke weiche Kontur, ein heller Rand, eine perlmuttartige Verlaufsfüllung, ein nasses Glanzlicht obendrauf und ein Schimmer, der ab und zu darüberzieht, während das Wort leicht schwebt.

Kaufen · 49 €

Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.

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

Breite

Die Vorschau konnte nicht geladen werden.

Live-Demo. Das Theme schaltet die Demo selbst um.

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

Der Code ist gesperrt

Gloss Type gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 66 Effekte.

Kaufen · 49 €

Schon gekauft?Anmelden, um den Code zu sehen

49 € · Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.

Einmalzahlung
Ein Entwickler
Melde dich an und erstelle deinen Schlüssel sofort
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/gloss-type

MCP

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

GlossTypeProps

Prop	Typ	Standard	Was sie tut
`text` erforderlich	`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.

Vorschau

Code

Der Code ist gesperrt

Props

A11y

Screenreader

Reduzierte Bewegung

Sonstiges