[ Kine UI ]
GitHub
REGISTRY: SWIPE_AREA

Swipe Area

> Detects high-velocity horizontal hand motion. Try swiping your hand left or right in front of the camera to cycle the carousel.

Live Preview

> The preview requires mounting the webcam tracking engine. Click below to initialize.

Installation

system.out
$
npx @opendevsociety/kine-ui@latest add swipe-area

Example Usage

import { SwipeArea } from "@/components/kine/gestures/SwipeArea";

export default function GalleryLayout() {
  return (
    <div className="w-full h-screen">
      <SwipeArea 
        onSwipeLeft={() => nextImage()}
        onSwipeRight={() => previousImage()}
        velocityThreshold={0.15}
        className="w-full h-full"
      >
        <ImageCarousel />
      </SwipeArea>
    </div>
  );
}