Effects Fancy Stable
Presence
Mounts and unmounts content with a real entrance and exit through one direction-aware transition, tracking opening/open/closing state, marking the panel inert while it closes, and firing lifecycle callbacks
Available for Svelte 5, React, and Vue 3.
Preview
svelte
<script lang="ts">
import { Presence } from "fancy-ui-svelte";
import { Checkbox } from "fancy-ui-svelte";
let agreed = $state(false);
</script>
<div class="flex w-full flex-col gap-2 p-6">
<Checkbox bind:checked={agreed}>I agree to the terms and conditions</Checkbox>
<Presence open={!agreed} duration={200} exitDuration={150}>
<p class="text-destructive text-sm">You must agree before continuing.</p>
</Presence>
</div>Installation
pnpm add fancy-ui-svelte
import { Presence } from "fancy-ui-svelte";
Usage
svelte
<script lang="ts">
import { Presence } from "fancy-ui-svelte";
import { Checkbox } from "fancy-ui-svelte";
let agreed = $state(false);
</script>
<div class="flex w-full flex-col gap-2 p-6">
<Checkbox bind:checked={agreed}>I agree to the terms and conditions</Checkbox>
<Presence open={!agreed} duration={200} exitDuration={150}>
<p class="text-destructive text-sm">You must agree before continuing.</p>
</Presence>
</div>Examples
Basic Usage
svelte
<script lang="ts">
import { Presence } from "$lib/fancy-ui/presence";
import { Checkbox } from "$lib/fancy-ui/checkbox";
let agreed = $state(false);
</script>
<div class="flex w-full flex-col gap-2 p-6">
<Checkbox bind:checked={agreed}>I agree to the terms and conditions</Checkbox>
<Presence open={!agreed} duration={200} exitDuration={150}>
<p class="text-destructive text-sm">You must agree before continuing.</p>
</Presence>
</div>Presets
Switch between the entrance/exit looks.
svelte
<script lang="ts">
import { Presence } from "$lib/fancy-ui/presence";
import { Button } from "$lib/fancy-ui/button";
const presets = ["fade", "fade-up", "scale", "blur", "zoom"] as const;
let preset = $state<(typeof presets)[number]>("fade-up");
let open = $state(true);
</script>
<div class="flex w-full flex-col gap-4 p-6">
<div class="flex flex-wrap gap-2">
{#each presets as p (p)}
<button
type="button"
class={`rounded-full border px-3 py-1 text-xs capitalize ${
preset === p
? "bg-primary text-primary-foreground border-primary"
: "border-border text-muted-foreground"
}`}
onclick={() => (preset = p)}
>
{p}
</button>
{/each}
</div>
<Button variant="outline" size="sm" class="self-start" onclick={() => (open = !open)}>
{open ? "Hide" : "Show"} panel
</Button>
<div
class="bg-muted/40 border-border flex h-24 items-center justify-center rounded-lg border border-dashed"
>
<Presence {open} {preset}>
<div class="bg-card border-border rounded-lg border p-4 shadow-sm">
<p class="text-foreground text-sm font-medium">{preset} preset</p>
</div>
</Presence>
</div>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
open * | boolean | - | Whether the content is mounted and, once the entrance settles, visible |
preset | "fade" | "fade-up" | "fade-down" | "fade-left" | "fade-right" | "scale" | "blur" | "zoom" | "fade" | The entrance/exit look |
duration | number | 300 | Entrance duration in ms |
exitDuration | number | 200 | Exit duration in ms — shorter than the entrance by default; leaving reads faster than arriving |
delay | number | 0 | Delay in ms before the entrance starts; applied to the exit too |
distance | number | 16 | Entrance travel distance in px for the four directional presets — the exit travels half as far |
inert | boolean | true | Whether the panel is inert while closing (Svelte already does this natively for any transitioning element — false is an explicit opt-out) |
onEnterEnd | () => void | - | Fires once the entrance transition settles (onintroend) |
onExitEnd | () => void | - | Fires once the exit transition settles (onoutroend) — not guaranteed if the component is destroyed mid-exit |
class | string | - | Additional CSS classes, merged onto the root |
ref | HTMLDivElement | null | null | Bindable reference to the root element — null while closed |
Slots
| Slot | Description |
|---|---|
children | Panel content |
Links
Related components
AnimatedBeam
Fibre-optic connector between two elements: a light packet with a dispersing chromatic tail runs along a glass fibre and blooms behind the destination on arrival; theme-aware, seeded and still under reduced motion.
Effects Fancy
BorderBeam
A single comet of light riding a container's border: a white-hot head, a long feathered tail fading between two colours, a dim hairline that lights up only within the comet's reach, and a soft bloom that sits on the edge.
Effects Fancy
Confetti
Confetti celebration effect powered by canvas-confetti with button trigger support
Effects Fancy