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

Name Reel

image-galleryPro

Eine Liste großer Namen: Beim Darüberfahren öffnet sich ein Bildfenster, das auf einer Feder folgt, mit einer vertikalen Bildrolle, die in eine bestimmte Richtung läuft.

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.

name-reel.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type NameReelProps = {  items: NameReelItem[]  imageWidth?: number  imageHeight?: number  radius?: number  offset?: { x?: number; y?: number }  spring?: NameReelSpring  activeColor?: string  dimmedColor?: string  align?: 'start' | 'center' | 'end'  itemClassName?: string  className?: string}export function NameReel({  items,  imageWidth = 220,  imageHeight = 280,  radius = 14,  offset,  spring,  activeColor,  dimmedColor,  align = 'start',  itemClassName,  className,}: NameReelProps) {  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

Name Reel 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/name-reel

MCP

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

NameReelProps

Prop	Typ	Standard	Was sie tut
`items` erforderlich	`NameReelItem[]`	–	The names, in order. The picture reel follows this order. Up to a dozen or so works well.
`imageWidth`	`number`	`220`	Width of the picture window in CSS pixels. It shrinks to fit narrow containers.
`imageHeight`	`number`	`280`	Height of the picture window in CSS pixels. Keeps its ratio when the width shrinks.
`radius`	`number`	`14`	Corner radius of the picture window in CSS pixels.
`offset`	`{ x?: number; y?: number }`	–	Gap between the pointer and the window. `x` pushes it sideways (it flips to the left near the right edge), `y` nudges it up or down from vertically centred.
`spring`	`NameReelSpring`	–	Spring that smooths the window's motion and the reel's slide.
`activeColor`	`string`	–	Text colour of the active name and of every name while nothing is hovered. Any CSS colour or `var(--x)`. Defaults to the foreground token.
`dimmedColor`	`string`	–	Text colour of the other names while one is active. Defaults to a faded foreground.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Horizontal alignment of the list.
`itemClassName`	`string`	–	Extra classes for every row's link, for example a different type size.
`aria-label`	`string`	–	Accessible name of the list.

Nimmt auch alle Props von Omit<HTMLAttributes<HTMLDivElement>, 'children'>.

Vorschau

Code

Der Code ist gesperrt

Props

A11y