ComponentsPower Off Slide
Power Off Slide
Inspired by the power off animation of iPhones, this component allows the user to slide to power off the device.
Code
1
Install with shadcn Beta
Terminal
npx shadcn@latest add "https://smoothui.dev/r/power-off-slide.json"
Or install the demo
Terminal
npx shadcn@latest add "https://smoothui.dev/r/power-off-slide-demo.json"
2
Add the CSS
global.css
@layer utilities {
.loading-shimmer {
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
animation-delay: 0.5s;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: loading-shimmer;
background: var(--text-quaternary)
gradient(
linear,
100% 0,
0 0,
from(var(--text-quaternary)),
color-stop(0.5, var(--text-primary)),
to(var(--text-quaternary))
);
background: var(--text-quaternary) -webkit-gradient(
linear,
100% 0,
0 0,
from(var(--text-quaternary)),
color-stop(0.5, var(--text-primary)),
to(var(--text-quaternary))
);
background-clip: text;
-webkit-background-clip: text;
background-repeat: no-repeat;
background-size: 50% 200%;
display: inline-block;
}
.loading-shimmer {
background-position: -100% top;
}
.loading-shimmer:hover {
-webkit-text-fill-color: var(--text-quaternary);
animation: none;
background: transparent;
}
@keyframes loading-shimmer {
0% {
background-position: -100% top;
}
to {
background-position: 250% top;
}
}
}
How to use
Demo.tsx
"use client"
import React, { useState } from "react"
import PowerOffSlide from "@/components/smoothui/ui/PowerOffSlide"
const PowerOffSlideDemo = () => {
const [poweredOff, setPoweredOff] = useState(false)
return (
<div className="flex flex-col items-center gap-4">
<PowerOffSlide
label="Slide to power off"
duration={1500}
onPowerOff={() => setPoweredOff(true)}
/>
</div>
)
}
export default PowerOffSlideDemo
Props
Prop | Type | Default |
---|---|---|
onPowerOff? | () => void | - |
label? | string | - |
className? | string | - |
duration? | number | - |
disabled? | boolean | - |