.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

En afstandsmålerramme, der træder gennem en sætning, trækker ét ord i fokus og låser med et kort klik. Den følger markøren og piletasterne og står stille på ét ord ved reduceret bevægelse.

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

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

Koden er låst

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

MCP

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

FocusFrameProps

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

Tager også alle props fra Omit<HTMLAttributes<HTMLDivElement>, 'children'>.

Preview

Kode

Koden er låst

Props

A11y