Components / Text Animations / Elastic Headline

Elastic Headline

A headline strung on an elastic. The letters are nodes on a mass-spring chain pinned a letter-pitch past each end, so every letter can be pulled, and coupled by the discrete Laplacian — so a pull travels outward to the neighbours and reflects off the ends, which is what makes it one object rather than letters that each happen to wobble. Grab one and drag.

Usage

import ElasticHeadline from '@/components/elastic-headline'

<ElasticHeadline
  text="Interfaces that move"
  stiffness={900}
  anchor={120}
  damping={5.2}
/>

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/elastic-headline.json

Model

m·ÿᵢ = k·(yᵢ₋₁ − 2yᵢ + yᵢ₊₁) + η·(ẏᵢ₋₁ − 2ẏᵢ + ẏᵢ₊₁) − kₐ·yᵢ − c·ẏᵢ

a mass-spring chain, one node per letter, pinned a pitch past each end of each row · k coupling · η the elastic’s friction · kₐ anchor · c air

Props

Property	Type	Default	Description
`text`	`string`	`'Interfaces that move'`	Rendered per glyph, and used as the element's accessible name.
`stiffness`	`number`	`900`	Neighbour coupling. This is the term that makes the line a wave.
`anchor`	`number`	`120`	Pull back to the resting slot. Higher settles flatter, faster.
`damping`	`number`	`5.2`	Air resistance: damps every mode of the line alike, the slow sway included.
`viscosity`	`number`	`3`	The elastic's own friction, acting on how fast neighbours move apart. It quiets the short ripples a release throws off and barely touches the sway; 0 leaves only `damping`.
`mass`	`number`	`1`	Per-letter mass. Heavier rings lower and longer.
`grab`	`number`	`1`	How much of the pointer's travel a held letter takes, 0..1.
`stretch`	`number`	`1.2`	How far, in em, a held letter follows the pointer one-to-one before the elastic resists; past it the letter gains only logarithmically. `Infinity` follows the pointer exactly.
`reach`	`number`	`2`	How far a hover nudge spreads, in letters.
`nudge`	`number`	`0`	Vertical push from hovering, in px. 0 makes the component drag-only.
`lift`	`number`	`0.35`	How much vertical displacement tilts a glyph.