.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

A text marquee that flows along an adjustable curve, from slight arc to deep bow, that you can drag and throw. It loops seamlessly with edge fade, direction and speed controls.

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.

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

The code is locked

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

MCP

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

ArcMarqueeProps

Prop	Type	Default	What it does
`text` required	`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).

Preview

Code

The code is locked

Props

A11y