# Focus

> Text component that cycles focus through words with blur and corner frame.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Text & Typography
- Tags: text, animation, focus, blur, words, typography
- Docs: https://fancy-ui.rama.app/docs/components/focus
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/focus

## Import

```svelte
<script lang="ts">
  import { Focus } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Focus } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `sentence` | `string` | `"Fancy Focus"` | Space-separated words to cycle focus through |
| `manualMode` | `boolean` | `false` | Enable manual control via mouse hover instead of auto-cycling |
| `blurAmount` | `number` | `5` | Blur amount in pixels for unfocused words |
| `borderColor` | `string` | `"green"` | Color of the corner frame border |
| `animationDuration` | `number` | `0.5` | Transition duration in seconds |
| `pauseBetweenAnimations` | `number` | `1` | Pause between word cycles in seconds |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { Focus } from "fancy-ui-svelte";
</script>

<Focus sentence="Build beautiful interfaces easily" />
```

### Custom Border Color

```svelte
<script lang="ts">
	import { Focus } from "fancy-ui-svelte";
</script>

<Focus sentence="Design with confidence" borderColor="cyan" />
```

### Manual Mode

Hover to focus each word.

```svelte
<script lang="ts">
	import { Focus } from "fancy-ui-svelte";
</script>

<Focus sentence="Hover over each word" manualMode borderColor="orange" />
```

### High Blur

Strong blur effect.

```svelte
<script lang="ts">
	import { Focus } from "fancy-ui-svelte";
</script>

<Focus
	sentence="Strong blur effect here"
	blurAmount={10}
	borderColor="red"
	animationDuration={0.3}
	pauseBetweenAnimations={0.5}
/>
```