Live preview recorded from Fancy Components; component and demo by Daniel Petho. Preview: platform recorded · rights authorized.

ComponentOpen Source

Elastic Line

A wobbly svg line with a spring cursor interaction.

FSource LandFancy Components

View original source Repository

Why it stands out

A wobbly svg line with a spring cursor interaction.

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

Text Rotate

A text component that switches the rendered text from a list.

by Fancy Components0React · TypeScriptSource

Componentsopen source

Underline To Background

A text component that animates a text underline into a text background.

by Fancy Components0React · TypeScriptSource

Componentsopen source

Text Cursor Proximity

A text component that animates the letters based on the cursor proximity

by Fancy Components0React · TypeScriptSource

Componentsopen source

Variable Font Cursor Proximity

A text component that animates the font variation settings of letters based on the cursor proximity. Works only with variable fonts.

by Fancy Components0React · TypeScriptSource

Componentsopen source

Stacking Cards

A component used in websites to display layered cards that stack on top of one another, often with interactive animations.

Elastic Line

Continue comparing

Signature

Scroll Progress

Bounce sidebar

OTP Input

PullCord

Scroll Choreography

Text Rotate

Underline To Background

Text Cursor Proximity

Variable Font Cursor Proximity

Stacking Cards

Scroll and Swap Text