.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

En liste med store navne: når markøren holder over et, åbner der sig et billedvindue, der følger med på en fjeder, med en lodret billedrulle, som kører i en bestemt retning.

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

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

Koden er låst

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

MCP

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

NameReelProps

Prop	Type	Standard	Hvad den gør
`items` påkrævet	`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.

Tager også alle props fra Omit<HTMLAttributes<HTMLDivElement>, 'children'>.

Preview

Kode

Koden er låst

Props

A11y