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

Focus frame

motionPro

Ein Messsucherrahmen, der einen Satz Wort für Wort durchschreitet, ein Wort scharfstellt und mit einem kurzen Einrasten arretiert. Er folgt dem Mauszeiger und den Pfeiltasten und bleibt bei reduzierter Bewegung auf einem Wort stehen.

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.

focus-frame.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type FocusFrameProps = {  children: string | string[]  interval?: number  blur?: number  autoPlay?: boolean  rounds?: number  paused?: boolean  pauseOnInteraction?: boolean  onFocusWord?: (word: FocusFrameWord) => void  as?: 'p' | 'span' | 'h1' | 'h2' | 'h3'  className?: string}export function FocusFrame({  children,  interval = 1800,  blur = 1.6,  autoPlay = true,  rounds = 3,  paused = false,  pauseOnInteraction = true,  onFocusWord,  as = 'p',  className,}: FocusFrameProps) {  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

Focus frame 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/focus-frame

MCP

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

FocusFrameProps

Prop	Typ	Standard	Was sie tut
`children` erforderlich	`string \| string[]`	–	The sentence. A string is split at spaces; an array sets each stop yourself, e.g. `['Made in', 'Aalborg']`.
`interval`	`number`	`1800`	Milliseconds the frame rests on each word while it plays.
`blur`	`number`	`1.6`	Blur in pixels on the words outside the frame.
`autoPlay`	`boolean`	`true`	Step through the words on its own.
`rounds`	`number`	`3`	Rounds through the sentence before it stops on the last word. 0 keeps going; then offer a pause button (see `paused`).
`paused`	`boolean`	`false`	Stops the frame where it is, e.g. from a pause button of your own.
`pauseOnInteraction`	`boolean`	`true`	Hold still while the pointer is over the sentence or it has keyboard focus.
`onFocusWord`	`(word: FocusFrameWord) => void`	–	Called when the frame moves to a word, and again when it locks onto it.
`as`	`'p' \| 'span' \| 'h1' \| 'h2' \| 'h3'`	`'p'`	The element that holds the sentence.

Nimmt auch alle Props von Omit<HTMLAttributes<HTMLDivElement>, 'children'>.

Vorschau

Code

Der Code ist gesperrt

Props

A11y