.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

Silky ribbons on spring ropes that chase the pointer, fan out on fast moves and cycle through colours that glow where they cross.

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.

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

The code is locked

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

MCP

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

SilkRibbonsProps

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

Preview

Code

The code is locked

Props

A11y