Sibling Dimming

Hover

Sibling dimming — hovering one item dims every non-hovered sibling to 50%. Pure CSS.

Overview

Pricing

Docs

Changelog

Installation

One command drops the source into your repo — editable, with the provider and motion pulled in automatically.

npx shadcn add https://motion.asmitsah.dev/r/sibling-dimming.json

PrerequisiteInstall the provider base first

This component imports from @/lib/motion and needs <MotionProvider> mounted in your root layout — install the base once, before copying this component.

npx shadcn add https://motion.asmitsah.dev/r/provider.json

Step 1Install the runtime dependency

npm install motion

Step 2Copy the source into components/motion/sibling-dimming.tsx

components/motion/sibling-dimming.tsx

import type { ComponentPropsWithoutRef, CSSProperties } from "react";
import { feel } from "@/lib/motion";
import { cn } from "@/lib/utils";

// Container: when it HAS a hovered item, every non-hovered item dims to 50%.
// `:not(:hover)` keeps the hovered item untouched, so there's no self-hover
// specificity race. Pair with SiblingDimmingItem (adds the `.dim-item` marker).
export function SiblingDimming({ className, ...props }: ComponentPropsWithoutRef<"div">) {
  return (
    <div
      className={cn("[&:has(.dim-item:hover)_.dim-item:not(:hover)]:opacity-50", className)}
      {...props}
    />
  );
}

const dimTransition: CSSProperties = {
  transitionDuration: `${feel.duration.fast}s`,
  transitionTimingFunction: `cubic-bezier(${feel.ease.join(",")})`,
};

export function SiblingDimmingItem({
  className,
  style,
  ...props
}: ComponentPropsWithoutRef<"div">) {
  return (
    <div
      className={cn("dim-item transition-opacity motion-reduce:transition-none", className)}
      style={{ ...dimTransition, ...style }}
      {...props}
    />
  );
}

Usage

Basic group

Wrap a set of items in SiblingDimming, each item in SiblingDimmingItem. Pure CSS — no JS, no state.

import { SiblingDimming, SiblingDimmingItem } from "@/components/motion/sibling-dimming";

<SiblingDimming className="flex gap-3">
  <SiblingDimmingItem>Overview</SiblingDimmingItem>
  <SiblingDimmingItem>Pricing</SiblingDimmingItem>
  <SiblingDimmingItem>Docs</SiblingDimmingItem>
</SiblingDimming>

Nav bar

A common home — hovering a nav link dims the others so the active hover reads clearly. SiblingDimming renders the container div itself.

<SiblingDimming className="flex items-center gap-6">
  <SiblingDimmingItem>
    <Link href="/product">Product</Link>
  </SiblingDimmingItem>
  <SiblingDimmingItem>
    <Link href="/pricing">Pricing</Link>
  </SiblingDimmingItem>
  <SiblingDimmingItem>
    <Link href="/about">About</Link>
  </SiblingDimmingItem>
</SiblingDimming>

Feature grid

Works in a grid just as well — the :has() selector only cares about the dim-item marker, not layout.

<SiblingDimming className="grid grid-cols-3 gap-4">
  {features.map((f) => (
    <SiblingDimmingItem key={f.title} className="rounded-md border p-4">
      <h3>{f.title}</h3>
      <p>{f.description}</p>
    </SiblingDimmingItem>
  ))}
</SiblingDimming>

Props

Prop	Type	Default	Description
children	ReactNode	—	The SiblingDimmingItem elements to group — hovering one dims its non-hovered siblings.
className	string	—	Passed straight through — SiblingDimming becomes your layout element (e.g. a flex row or grid).
style	CSSProperties	—	Inline style passthrough.

SiblingDimmingItem

Prop	Type	Default	Description
children	ReactNode	—	The item's content.
className	string	—	Passed straight through — SiblingDimmingItem becomes your item element.
style	CSSProperties	—	Merged after the built-in opacity-transition timing, so you can override it per instance.