MotionClient component

Direction Reveal

A generic reveal surface whose overlay enters and exits from the actual pointer direction.

Enter and leave from different edges

Enter from any edge

Try all four sides

Usage

tsx

import { DirectionReveal } from "@/components/effects/direction-reveal"

export function Demo() {
  return (
    <DirectionReveal reveal={<div className="p-8">Revealed content</div>}>
      <div className="p-8">Resting content</div>
    </DirectionReveal>
  )
}