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

Cube Letters

textPro

Text, in dem jeder Buchstabe ein kleiner Würfel ist, der sich auf einer Feder eine Vierteldrehung weiterrollt, mit vier Staffelungsmustern, Auslösung per Hover oder beim Einblenden und einem optionalen Alternativtext zum Umschalten.

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.

cube-letters.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type CubeLettersProps = {  text: string  flipTo?: string  href?: string  target?: string  rel?: string  as?: ElementType  trigger?: 'hover' | 'enter'  stagger?: CubeLettersStagger  staggerDelay?: number  direction?: 'up' | 'down'  stiffness?: number  damping?: number  height?: number  perspective?: number  enterDelay?: number  onFlip?: (flipped: boolean) => void  className?: string}export function CubeLetters({  text,  flipTo,  href,  target,  rel,  as = 'span',  trigger = 'hover',  stagger = 'first',  staggerDelay = 38,  direction = 'up',  stiffness = 260,  damping = 22,  height = 1.18,  perspective = 5,  enterDelay = 0,  onFlip,  className,}: CubeLettersProps) {  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

Cube Letters 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/cube-letters

MCP

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

CubeLettersProps

Prop	Typ	Standard	Was sie tut
`text` erforderlich	`string`	–	The text shown at rest.
`flipTo`	`string`	–	The text to flip to. Without it every letter flips onto a copy of itself, so the word rolls over once and lands where it started. With it the word turns into this text, and back again when the trigger lets go.
`href`	`string`	–	Link attributes, for `as="a"`.
`target`	`string`	–	Link target, for `as="a"`.
`rel`	`string`	–	Link relation, for `as="a"`.
`as`	`ElementType`	`'span'`	The element to render, e.g. `h1`, `p`, `a`, `button` or `span`.
`trigger`	`'hover' \| 'enter'`	`'hover'`	`hover` (also on keyboard focus, and tap on touch screens) or `enter` (once, when it scrolls into view).
`stagger`	`CubeLettersStagger`	`'first'`	Which letter goes first: from the `first` letter, from the `last`, outwards from the `center`, or in `random` order.
`staggerDelay`	`number`	`38`	Delay between one letter and the next, in milliseconds.
`direction`	`'up' \| 'down'`	`'up'`	`up`: the cube rolls upwards and the new face comes from below. `down`: it rolls downwards and the new face comes from above.
`stiffness`	`number`	`260`	How stiff the spring is. Higher is quicker.
`damping`	`number`	`22`	How strongly the spring is held back. Lower overshoots and wobbles, higher settles at once.
`height`	`number`	`1.18`	Height of each letter's cube as a multiple of the font size. Also the line height.
`perspective`	`number`	`5`	Perspective distance in cube heights; lower looks more dramatic, higher flatter.
`enterDelay`	`number`	`0`	Wait before an `enter` flip starts, in milliseconds.
`onFlip`	`(flipped: boolean) => void`	–	Called when a flip has settled, with `true` when the alternate text is showing.

Nimmt auch alle Props von Omit<ComponentPropsWithoutRef<'span'>, keyof CubeLettersOwnProps | 'children'>.

Vorschau

Code

Der Code ist gesperrt

Props

A11y