.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

A list of large names; hovering one opens a spring-following picture window with a directional vertical image reel.

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.

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

The code is locked

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

MCP

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

NameReelProps

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

Also takes every prop from Omit<HTMLAttributes<HTMLDivElement>, 'children'>.

Preview

Code

The code is locked

Props

A11y