.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 where every letter is a little cube that rolls a quarter turn on a spring, with four stagger patterns, hover or on-enter triggers, and an optional alternate text to flip to.

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.

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

The code is locked

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

MCP

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

CubeLettersProps

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

Also takes every prop from Omit<ComponentPropsWithoutRef<'span'>, keyof CubeLettersOwnProps | 'children'>.

Preview

Code

The code is locked

Props

A11y