.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

Tekst, hvor hvert bogstav er en lille terning, der ruller en kvart omgang på en fjeder, med fire forskydningsmønstre, start ved hover eller når den kommer ind i billedet, og en valgfri alternativ tekst at vende til.

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

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

Koden er låst

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

MCP

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

CubeLettersProps

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

Tager også alle props fra Omit<ComponentPropsWithoutRef<'span'>, keyof CubeLettersOwnProps | 'children'>.

Preview

Kode

Koden er låst

Props

A11y