Motion Highlight

Motion highlight component that displays the motion highlight effect.

Animated Components

Beautiful Motion-animated components for dynamic websites.

Open Source

A project built for the dev community with the dev community.

Complementary to Shadcn UI

The components are designed to be used with Shadcn UI components.

Component Distribution

Install the components in your project and modify them as you wish.

Installation

Examples

Tabs

Tab 1

Tab 2

Tab 3

Tabs Hover

Tab 1

Tab 2

Tab 3

Tabs Hover with Parent Mode

Tab 1

Tab 2

Tab 3

Usage

Uncontrolled Items

By default, child items will have the highlight effect. This will map the children elements and surround them with the MotionHighlightItem element.

<MotionHighlight>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</MotionHighlight>

Controlled Items

Using the controlledItems props, you place your MotionHighlightItem wherever you like in the MotionHighlight component.

<MotionHighlight controlledItems>
  <MotionHighlightItem>Item 1</MotionHighlightItem>
  <div>
    <MotionHighlightItem>Item 2</MotionHighlightItem>
  </div>
  <MotionHighlightItem>Item 3</MotionHighlightItem>
</MotionHighlight>

Children Mode

By default, in mode with the value children the highlight is placed in the MotionHighlightItem component using Motion's layoutId technique. This technique should be preferred in most cases. However, in some cases, you may run into z-index problems, so it's best to use the parent mode to avoid visual bugs.

<MotionHighlight>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</MotionHighlight>

Parent Mode

By using the mode property with the value parent, the MotionHighlight component will set the highlight to absolute in MotionHighlight. This may be useful in some cases to avoid the visual z-index bugs you can get with mode children.

<MotionHighlight mode="parent">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</MotionHighlight>

MotionHighlightItem asChild

Children Mode

// With asChild
<MotionHighlight>
  <MotionHighlightItem asChild>
    <div id="item-1">Item 1</div>
  </MotionHighlightItem>
  <MotionHighlightItem asChild>
    <div id="item-2">Item 2</div>
  </MotionHighlightItem>
</MotionHighlight>
// Result
<div className="relative" id="item-1">
  <div /> {/* Highlight */}
  <div className="relative z-[1]">Item 1</div>
</div>
<div className="relative" id="item-2">
  <div /> {/* Highlight */}
  <div className="relative z-[1]">Item 2</div>
</div>
 
// Without asChild
<MotionHighlight>
  <MotionHighlightItem>
    <div id="item-1">Item 1</div>
  </MotionHighlightItem>
  <MotionHighlightItem>
    <div id="item-2">Item 2</div>
  </MotionHighlightItem>
</MotionHighlight>
// Result
<div className="relative" >
  <div /> {/* Highlight */}
  <div className="relative z-[1]" id="item-1">Item 1</div>
</div>
<div className="relative" >
  <div /> {/* Highlight */}
  <div className="relative z-[1]" id="item-2">Item 2</div>
</div>

Parent Mode

// With asChild
<MotionHighlight mode="parent">
  <MotionHighlightItem asChild>
    <div id="item-1">Item 1</div>
  </MotionHighlightItem>
  <MotionHighlightItem asChild>
    <div id="item-2">Item 2</div>
  </MotionHighlightItem>
</MotionHighlight>
// Result
<div className="relative">
  <div /> {/* Highlight */}
  <div id="item-1">Item 1</div>
  <div id="item-2">Item 2</div>
</div>
 
// Without asChild
<MotionHighlight mode="parent">
  <MotionHighlightItem>
    <div id="item-1">Item 1</div>
  </MotionHighlightItem>
  <MotionHighlightItem>
    <div id="item-2">Item 2</div>
  </MotionHighlightItem>
</MotionHighlight>
// Result
<div className="relative">
  <div /> {/* Highlight */}
  <div>
    <div id="item-1">Item 1</div>
  </div>
  <div>
    <div id="item-2">Item 2</div>
  </div>
</div>

Props

MotionHighlight

Prop	Type	Default
`children`	`React.ReactNode`	-
`className?`	`string`	-
`containerClassName?`	`string`	-
`itemsClassName?`	`string`	-
`controlledItems?`	`boolean`	`false`
`value?`	`string \| null`	-
`defaultValue?`	`string \| null`	-
`onValueChange?`	`(value: string \| null) => void`	-
`transition?`	`Transition`	`{ type: "spring", stiffness: 200, damping: 25 }`
`hover?`	`boolean`	`false`
`disabled?`	`boolean`	`false`
`exitDelay?`	`number`	`0.2`
`mode?`	`'children' \| 'parent'`	`children`
`boundsOffset?`	`Partial<Bounds>`	`undefined`
`forceUpdateBounds?`	`boolean`	`undefined`

MotionHighlightItem

Prop	Type	Default
`children`	`React.ReactElement`	-
`className?`	`string`	-
`activeClassName?`	`string`	-
`transition?`	`Transition`	-
`id?`	`string`	-
`value?`	`string`	-
`disabled?`	`boolean`	`false`
`exitDelay?`	`number`	-
`withoutDataAttributes?`	`boolean`	`false`
`asChild?`	`boolean`	`false`
`forceUpdateBounds?`	`boolean`	`undefined`

Credits

Credits to motion-primitives for the inspiration

Built by Skyleen. The source code is available on GitHub.