Effects Fancy Stable
DimSiblings
Wraps a group of cards, links, or list items so hovering or keyboard-focusing one dims (or blurs) every other one — a pure CSS :has() affordance with zero pointer-tracking JavaScript
Available for Svelte 5, React, and Vue 3.
Preview
svelte
<script lang="ts">
import { DimSiblings } from "fancy-ui-svelte";
const COLUMNS = [
{ heading: "Product", links: ["Overview", "Pricing", "Changelog"] },
{ heading: "Docs", links: ["Guides", "API reference", "Examples"] },
{ heading: "Company", links: ["About", "Careers", "Blog"] },
{ heading: "Legal", links: ["Privacy", "Terms", "Security"] },
];
</script>
<div class="w-full p-6">
<DimSiblings as="footer" class="grid grid-cols-2 gap-x-6 gap-y-6 sm:grid-cols-4">
{#each COLUMNS as column}
<div>
<h3 class="text-foreground text-sm font-semibold">{column.heading}</h3>
<ul class="mt-3 flex flex-col gap-2">
{#each column.links as link}
<li>
<a
href="#{link.toLowerCase().replace(/\s+/g, '-')}"
class="text-muted-foreground hover:text-foreground text-sm">{link}</a
>
</li>
{/each}
</ul>
</div>
{/each}
</DimSiblings>
<p class="text-muted-foreground mt-4 text-xs">
Hover any link, or Tab to it — the other three columns dim so the one you're in stands out.
</p>
</div>Installation
pnpm add fancy-ui-svelte
import { DimSiblings } from "fancy-ui-svelte";
Usage
svelte
<script lang="ts">
import { DimSiblings } from "fancy-ui-svelte";
const COLUMNS = [
{ heading: "Product", links: ["Overview", "Pricing", "Changelog"] },
{ heading: "Docs", links: ["Guides", "API reference", "Examples"] },
{ heading: "Company", links: ["About", "Careers", "Blog"] },
{ heading: "Legal", links: ["Privacy", "Terms", "Security"] },
];
</script>
<div class="w-full p-6">
<DimSiblings as="footer" class="grid grid-cols-2 gap-x-6 gap-y-6 sm:grid-cols-4">
{#each COLUMNS as column}
<div>
<h3 class="text-foreground text-sm font-semibold">{column.heading}</h3>
<ul class="mt-3 flex flex-col gap-2">
{#each column.links as link}
<li>
<a
href="#{link.toLowerCase().replace(/\s+/g, '-')}"
class="text-muted-foreground hover:text-foreground text-sm">{link}</a
>
</li>
{/each}
</ul>
</div>
{/each}
</DimSiblings>
<p class="text-muted-foreground mt-4 text-xs">
Hover any link, or Tab to it — the other three columns dim so the one you're in stands out.
</p>
</div>Examples
Basic Usage
svelte
<script lang="ts">
import { DimSiblings } from "$lib/fancy-ui/dim-siblings";
const COLUMNS = [
{ heading: "Product", links: ["Overview", "Pricing", "Changelog"] },
{ heading: "Docs", links: ["Guides", "API reference", "Examples"] },
{ heading: "Company", links: ["About", "Careers", "Blog"] },
{ heading: "Legal", links: ["Privacy", "Terms", "Security"] },
];
</script>
<div class="w-full p-6">
<DimSiblings as="footer" class="grid grid-cols-2 gap-x-6 gap-y-6 sm:grid-cols-4">
{#each COLUMNS as column}
<div>
<h3 class="text-foreground text-sm font-semibold">{column.heading}</h3>
<ul class="mt-3 flex flex-col gap-2">
{#each column.links as link}
<li>
<a
href="#{link.toLowerCase().replace(/\s+/g, '-')}"
class="text-muted-foreground hover:text-foreground text-sm">{link}</a
>
</li>
{/each}
</ul>
</div>
{/each}
</DimSiblings>
<p class="text-muted-foreground mt-4 text-xs">
Hover any link, or Tab to it — the other three columns dim so the one you're in stands out.
</p>
</div>With Blur
Blur non-active siblings in addition to dimming them.
svelte
<script lang="ts">
import { DimSiblings } from "$lib/fancy-ui/dim-siblings";
const PLANS = [
{ name: "Starter", price: "$9", blurb: "For solo projects." },
{ name: "Team", price: "$29", blurb: "For small teams." },
{ name: "Scale", price: "$99", blurb: "For growing products." },
];
</script>
<div class="w-full p-6">
<DimSiblings effect="both" class="grid grid-cols-1 gap-4 sm:grid-cols-3">
{#each PLANS as plan}
<div class="border-border bg-card rounded-xl border p-4">
<p class="text-foreground text-sm font-semibold">{plan.name}</p>
<p class="text-foreground mt-1 text-2xl font-bold">{plan.price}</p>
<p class="text-muted-foreground mt-2 text-sm">{plan.blurb}</p>
</div>
{/each}
</DimSiblings>
<p class="text-muted-foreground mt-4 text-xs">
Hover or focus one plan — the others dim <em>and</em> blur, via
<code class="text-xs">effect="both"</code>.
</p>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
effect | "dim" | "blur" | "both" | "dim" | Which visual property the non-active siblings lose |
opacity | number | 0.4 | Opacity the non-active siblings settle to — a floor, not zero |
blur | number | 2 | Blur radius in px, applied only when effect includes blur |
duration | number | 150 | Transition duration in ms for the opacity/blur change |
as | keyof HTMLElementTagNameMap | "div" | The rendered root element — "ul"/"ol" for a list whose CSS list semantics need to survive the wrapper |
class | string | - | Additional CSS classes |
ref | HTMLElement | null | null | Bindable reference to the root element |
Slots
| Slot | Description |
|---|---|
children | The sibling group — every direct child participates |
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