gra-ui

Component

DragThreshold

It asks you to release the content past three marks in order, resets the whole progression when you release too early, and locks the final state after the last threshold.

01 / Preview

Try it yourself.

Preview Interactive
Drag this farther

Release past the first mark. Each next mark is farther away.

Release past three marks in order. A short release sends the whole ceremony back to zero.

Mechanism
1
Drag the content and release beyond the first marker.
2
Each success keeps its marker lit and moves the next one farther away.
3
Release too early and every cleared marker goes dark again.
4
Clear all three to give one label an unnecessarily official shadow.

02 / Usage

Put it somewhere.

example.tsxTSX
import { DragThreshold } from "gra-ui";
import "gra-ui/styles.css";

export function CarefullyCommitted() {
  return <DragThreshold>Drag this farther</DragThreshold>;
}

03 / API

Small surface area.

PropTypeDescription
childrenReactNodeThe content dragged through three increasing thresholds.