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

Silk Ribbons

cursorPro

Seidige Bänder an federnden Seilen, die dem Mauszeiger nachjagen, sich bei schnellen Bewegungen auffächern und durch Farben wechseln, die an den Kreuzungspunkten leuchten.

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.

silk-ribbons.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type SilkRibbonsProps = {  colors?: string[]  hold?: number  blend?: number  count?: number  length?: number  thickness?: number  opacity?: number  mode?: 'add' | 'normal'  label?: ReactNode  labelClassName?: string  touch?: boolean  children?: ReactNode  className?: string}export function SilkRibbons({  colors = ['#ffc69e', '#ff6fae', '#9a86ff', '#56d6ff'],  hold = 1.4,  blend = 0.9,  count = 5,  length = 32,  thickness = 7,  opacity = 0.9,  mode = 'add',  label,  labelClassName,  touch = true,  children,  className,}: SilkRibbonsProps) {  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

Silk Ribbons 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/silk-ribbons

MCP

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

SilkRibbonsProps

Prop	Typ	Standard	Was sie tut
`colors`	`string[]`	`['#ffc69e', '#ff6fae', '#9a86ff', '#56d6ff']`	The colours the ribbons cycle through, in order. Any CSS colours.
`hold`	`number`	`1.4`	Seconds each colour holds before it starts blending into the next.
`blend`	`number`	`0.9`	Seconds a blend from one colour to the next takes. Blends run through Oklab, so they stay even and bright.
`count`	`number`	`5`	How many ribbons chase the pointer.
`length`	`number`	`32`	Points per ribbon. More points make longer, lazier ribbons.
`thickness`	`number`	`7`	Widest point of a ribbon, in CSS pixels.
`opacity`	`number`	`0.9`	0 to 1.
`mode`	`'add' \| 'normal'`	`'add'`	`add` makes crossings glow on dark surfaces; `normal` suits light ones.
`label`	`ReactNode`	–	Shown in the middle until the pointer arrives, e.g. a hint. Fades out while the ribbons move.
`labelClassName`	`string`	–	Classes for the label, for full control over its font.
`touch`	`boolean`	`true`	Let fingers drag ribbons too. Scrolling keeps working either way.
`children`	`ReactNode`	–	The surface the ribbons live in.
`className`	`string`	–	–

Vorschau

Code

Der Code ist gesperrt

Props

A11y