.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

Silkebløde bånd i fjedrende reb, der jager markøren, spreder sig ved hurtige bevægelser og skifter mellem farver, som gløder, hvor de krydser hinanden.

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

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

Koden er låst

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

MCP

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

SilkRibbonsProps

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

Kode

Koden er låst

Props

A11y