Components / Text Animations / Thread Pull
Thread Pull
A thread strung under a line of text. Grab it and pull — it hangs in a real catenary, y = a·cosh(x/a), not the parabola everyone approximates it with. The thread has a fixed length, so pulling to one side starves that segment and floods the other, and the letters above lean into the slope beneath them.
Usage
import ThreadPull from '@/components/thread-pull'
<ThreadPull text="Pull the thread" slack={1.06} />Installation
npx shadcn@latest add https://morphiq.prathampatel.design/r/thread-pull.jsonModel
y = a·cosh(x/a), √(ℓ² − v²) = 2a·sinh(w/2a)a solved by Newton each frame · ℓ thread length · w, v the span · on release the hook springs home, ẍ = −k·x − c·ẋ
Props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | 'Pull the thread' | Rendered per glyph, and used as the element's accessible name. |
slack | number | 1.06 | Thread length as a multiple of its span, 1–10. 1 is taut; above 1 it hangs in a catenary. A change eases in over ~80 ms. |
stiffness | number | 160 | Pull-back spring on the hooked point once released, 1/s². It starts from the velocity the thread was let go with. 0 leaves the kink where it was dropped. |
damping | number | 13 | That spring's damping, 1/s, never less than 0.5. With stiffness k the damping ratio is damping / 2√k: at the defaults about 0.5, one swing just past rest, then still. |
lean | number | 0.9 | How much the thread's slope beneath a letter tilts it. 0 keeps the letters upright. |
rise | number | 0.35 | How much the thread's sag pulls the letters down with it. 0 leaves them on their line. |
thickness | number | 2 | Stroke width, px. The stroke firms up by a quarter under a hovering pointer and by a half while held. |
steps | number | 48 | Samples per catenary segment, 2–512. |
color | string | — | Stroke colour. Defaults to currentColor. |