Text & Typography Fancy Stable
EditorialEngine
Live magazine layout: multi-column text flowing around draggable orbs with zero DOM reads, powered by pretext
Preview
svelte
<script lang="ts">
import { EditorialEngine } from "fancy-ui-svelte";
</script>
<div class="h-[600px] w-full overflow-hidden rounded-lg border">
<EditorialEngine />
</div>
<p class="text-muted-foreground mt-3 text-xs">
Drag an orb — text reflows around it every frame. Click an orb to pause its drift.
</p>Installation
pnpm add fancy-ui-svelte
import { EditorialEngine } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { EditorialEngine } from 'fancy-ui-svelte';
</script>
<EditorialEngine />Examples
Basic Usage
Drag the orbs, click to pause them, resize the window.
svelte
<script lang="ts">
import { EditorialEngine } from "$lib/fancy-ui/editorial-engine";
</script>
<div class="h-[600px] w-full overflow-hidden rounded-lg border">
<EditorialEngine />
</div>
<p class="text-muted-foreground mt-3 text-xs">
Drag an orb — text reflows around it every frame. Click an orb to pause its drift.
</p>Props
| Prop | Type | Default | Description |
|---|---|---|---|
headline | string | built-in copy | Auto-sized headline (largest font size that breaks no word) |
body | string | built-in copy | Body text, paragraphs separated by blank lines |
pullquotes | string[] | built-in quotes | Up to two pullquotes embedded in the columns |
fontFamily | string | Palatino serif stack | Font family stack used for all text |
class | string | - | Additional CSS classes for the stage |
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