Text & Typography Fancy Stable
Focus
Text component that cycles focus through words with blur and corner frame
Preview
svelte
<script lang="ts">
import { Focus } from 'fancy-ui-svelte';
</script>
<Focus sentence="Build beautiful interfaces with FancyUI" />Installation
pnpm add fancy-ui-svelte
import { Focus } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { Focus } from 'fancy-ui-svelte';
</script>
<Focus />Examples
Basic Usage
svelte
<script lang="ts">
import { Focus } from "$lib/fancy-ui/focus";
</script>
<Focus sentence="Build beautiful interfaces easily" />Custom Border Color
svelte
<script lang="ts">
import { Focus } from "$lib/fancy-ui/focus";
</script>
<Focus sentence="Design with confidence" borderColor="cyan" />Manual Mode
Hover to focus each word.
svelte
<script lang="ts">
import { Focus } from "$lib/fancy-ui/focus";
</script>
<Focus sentence="Hover over each word" manualMode borderColor="orange" />High Blur
Strong blur effect.
svelte
<script lang="ts">
import { Focus } from "$lib/fancy-ui/focus";
</script>
<Focus
sentence="Strong blur effect here"
blurAmount={10}
borderColor="red"
animationDuration={0.3}
pauseBetweenAnimations={0.5}
/>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 |
Links
Related components
Bl
BlurReveal
Scroll-triggered reveal that unblurs and slides each direct child into place as the container enters the viewport, staggering up to 10 children via CSS nth-child delays and respecting reduced motion
Text & Typography Stable
Bo
BoxReveal
Reveal animation where a solid color box slides left to right across content on viewport entry, unveiling it as it fades up into place underneath, triggered once via IntersectionObserver
Text & Typography Stable
Co
ColourfulText
Per-character text animation where each glyph transitions to a new color from a shuffled palette, staggered across characters and reshuffling automatically every 5 seconds using pure CSS transitions
Text & Typography Stable