.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

A rangefinder frame that steps through a sentence, pulls one word into focus and locks with a short detent; follows the pointer and arrow keys. Still on one word under reduced motion.

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.

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

The code is locked

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

MCP

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

FocusFrameProps

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

Also takes every prop from Omit<HTMLAttributes<HTMLDivElement>, 'children'>.

Preview

Code

The code is locked

Props

A11y