Bencho component by Lorenzo Cabra; live demonstration recorded with reuse permission confirmed by the user. Preview: platform recorded · rights authorized.

ComponentFree

Range dial

A circular range control adjusts the start and end of a sleep window while updating its duration.

BSource LandBencho

View original source

Why it stands out

A circular range control adjusts the start and end of a sleep window while updating its duration.

Discovery vocabulary

Component React

Related by governed terms

Continue comparing

Componentsopen source

Signature

An animated SVG signature effect that draws out text as if hand-written.

by Componentry0React · TypeScriptSource

Componentsfree

Scroll Progress

A scroll progress pill that tracks reading position and expands into a squircle menu of page sections.

by Rare UI0React · TypeScriptSource

Componentsfree

Bounce sidebar

A vertical navigation list with a bouncy, spring-animated active indicator.

by Rare UI0React · TypeScriptSource

Componentsfree

OTP Input

A one-time-code input whose characters roll into place behind a caret that slides from slot to slot.

by Rare UI0React · TypeScriptSource

Componentsfree

PullCord

A cloth cord that really hangs. Pull it to switch the lights.

by FeralUI0React · TypeScriptSource

Componentsopen source

Scroll Choreography

A smooth, scroll-driven image choreography component using Framer Motion.

by Componentry0React · TypeScriptSource

Canvas toolbar

A canvas toolbar animates tool selection and reveals additional shape choices.

by Bencho0React · TypeScriptSource

Componentsfree

Progress ticks

A progress indicator fills a sequence of ticks while its numeric percentage updates.

by Bencho0React · TypeScriptSource

Componentsfree

Now playing

A compact music player expands to reveal playback controls and animated playback feedback.

by Bencho0React · TypeScriptSource

Componentsfree

Pull to refresh

A portfolio card stretches downward during a pull gesture and refreshes its displayed balance.

by Bencho0React · TypeScriptSource

Componentsfree

Magnifying dock

Dock icons magnify as the pointer travels across them.

by Bencho0React · TypeScriptSource

Componentsfree

Checklist

Task rows animate checkmarks and completion feedback as they are checked and unchecked.

by Bencho0React · TypeScriptSource