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

Arc Marquee

textPro

Ein Text-Laufband, das entlang einer einstellbaren Kurve fließt, von leichter Wölbung bis tiefem Bogen, und sich ziehen und werfen lässt. Es läuft nahtlos im Kreis, mit Randausblendung und Reglern für Richtung und Tempo.

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.

arc-marquee.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type ArcMarqueeProps = {  text: string  curve?: number  height?: number  speed?: number  direction?: 'left' | 'right'  fade?: number  gap?: number  separator?: string  separatorClassName?: string  draggable?: boolean  settle?: number  grip?: number  paused?: boolean  textClassName?: string  className?: string}export function ArcMarquee({  text,  curve = 40,  height = 260,  speed = 70,  direction = 'left',  fade = 96,  gap = 48,  separator,  separatorClassName,  draggable = true,  settle = 900,  grip = 1,  paused = false,  textClassName,  className,}: ArcMarqueeProps) {  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

Arc Marquee 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/arc-marquee

MCP

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

ArcMarqueeProps

Prop	Typ	Standard	Was sie tut
`text` erforderlich	`string`	–	The text that flows along the curve. It is repeated as often as needed to fill the path, so a short phrase is fine.
`curve`	`number`	`40`	How much the path bows, from `-100` to `100`. `0` is a straight line, positive values arch upwards (ends sag), negative values dip like a smile. `100` bows by half of the component height.
`height`	`number`	`260`	Height of the component in pixels. The path sits in the middle, so a deeper curve needs more height.
`speed`	`number`	`70`	Flow speed in pixels per second along the path.
`direction`	`'left' \| 'right'`	`'left'`	Which way the text travels.
`fade`	`number`	`96`	Width of the soft fade at both edges, in pixels. `0` shows hard edges.
`gap`	`number`	`48`	Space between two repeats of the text, in pixels.
`separator`	`string`	–	Optional glyph shown between repeats, for example `✦`. Rendered with `separatorClassName`.
`separatorClassName`	`string`	–	Classes for the separator glyph, for example a colour or opacity.
`draggable`	`boolean`	`true`	Lets visitors grab the text and throw it. Momentum then eases back to the set speed.
`settle`	`number`	`900`	How fast, in milliseconds, a thrown marquee settles back to its set speed after release. Larger values keep the momentum longer.
`grip`	`number`	`1`	How strongly a drag is followed. `1` moves exactly with the pointer.
`paused`	`boolean`	`false`	Stops the flow (dragging still works).
`className`	`string`	–	Classes for the root. Set size, margin and so on here.
`textClassName`	`string`	–	Classes for the text: font, size, weight, tracking and colour (`text-*` sets the fill).

Vorschau

Code

Der Code ist gesperrt

Props

A11y