True Focus

A typographic animation that moves a camera-like focus frame between words while blurring the rest. It supports both automatic interval scrolling and manual hover modes.

Live Preview

Installation

CLI

npx @modus-ui/cli add true-focus

Manual

Copy the code from the component tab.
Create a file at components/ui/true-focus.tsx.
Paste the code.

Usage

tsx

import { TrueFocus } from "@/components/ui/true-focus";

export default function Example() {
  return (
    <TrueFocus
      sentence="Focus On What Matters"
      manualMode={false}
      blurAmount={4}
      borderColor="hsl(var(--primary))"
      animationDuration={0.6}
      pauseBetweenAnimations={1.5}
    />
  );
}

Props

Prop	Type	Default	Description
`sentence`	`string`	`"True Focus"`	The sentence to render.
`separator`	`string`	`" "`	String the sentence is split on.
`manualMode`	`boolean`	`false`	Focuses the hovered word instead of cycling automatically.
`blurAmount`	`number`	`5`	Blur in pixels on unfocused words.
`borderColor`	`string`	`"hsl(var(--primary))"`	Colour of the focus frame corners.
`glowColor`	`string`	`"hsl(var(--primary) / 0.6)"`	Glow colour around the focus frame.
`animationDuration`	`number`	`0.5`	Seconds the focus frame takes to move.
`pauseBetweenAnimations`	`number`	`1`	Seconds between automatic moves.

True Focus

Installation

CLI

Manual

Usage

Props

Comments