Power Off Slide

A slide component that allows users to power off by dragging. It shows a label and a power icon. It resets after sliding past a threshold. Use it for power-off interactions in a UI.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/power-off-slide

npx layro-cli add @educlopez/power-off-slide

npx layro-cli add @educlopez/power-off-slide

bunx layro-cli add @educlopez/power-off-slide

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { Power } from "lucide-react";
import {
  motion,
  useAnimation,
  useAnimationFrame,
  useMotionValue,
  useReducedMotion,
} from "motion/react";
import { type RefObject, useRef, useState } from "react";

const SLIDE_THRESHOLD = 160;
const SLIDE_MAX_DISTANCE = 168;