Elastic line

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   A marked rule takes its height and its background from the settings thickness and color, so a height or a background set on its class is overridden. Its path spills out of its box while it bends: a parent with overflow: hidden close to the rule cuts the bend off.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-elastic-line	Marks a rule the pointer pulls like a string. It takes no value: leave the value field empty. It goes on an empty div that draws the rule, between two rows, under a heading or above a footer; the stylesheet makes that div a box as thick and as dark as the settings say, as wide as its container.
   data-elastic-line-state	Written by the engine on the rule: live while the line is bent or moving, idle at rest, still under reduced motion. Never written by hand. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-elastic-line-color	#15100c	Colour of the line, at rest and in motion. Options: any CSS colour, currentColor included, which takes the text colour of the rule's parent.
   data-elastic-line-thickness	1	Thickness of the line, in px, the height of the box at rest and the stroke of the path in motion.
   data-elastic-line-bend	clamp(24px, 3vw, 44px)	How far the pointer can pull the line before it slips free, any CSS unit; it is also the most a line ever bends.
   data-elastic-line-reach	clamp(8px, 1vw, 16px)	Distance from the line, above and below, at which the pointer catches it without crossing it, any CSS unit.
   data-elastic-line-stiffness	380	Tension of the string, the pull that brings the line back to rest, 20 to 2000.
   data-elastic-line-damping	7	How fast the wobble dies, 1 to 60.
   data-elastic-line-touch	1	Whether a finger pulls the line, 0 or 1. Options: 1 a finger put on a rule holds it and a tap plucks it; 0 touch is ignored and the rules stay straight on a phone.

Two files, no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call ElasticLine.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-elastic-line-color	#15100c	Colour of the line, at rest and in motion. Options: any CSS colour, currentColor included, which takes the text colour of the rule's parent.
   data-elastic-line-thickness	1	Thickness of the line, in px, the height of the box at rest and the stroke of the path in motion.	Under 1 a hairline that a plain screen draws pale	A bar rather than a rule, and its wobble reads heavier
   data-elastic-line-bend	clamp(24px, 3vw, 44px)	How far the pointer can pull the line before it slips free, any CSS unit; it is also the most a line ever bends.	A tight string that lets go almost at once and rings small	A slack string that follows the pointer across the next rows before it lets go
   data-elastic-line-reach	clamp(8px, 1vw, 16px)	Distance from the line, above and below, at which the pointer catches it without crossing it, any CSS unit.	At 0 only a pointer that crosses the line catches it	The line jumps to a pointer that only passes near, and clings to it along a row
   data-elastic-line-stiffness	380	Tension of the string, the pull that brings the line back to rest, 20 to 2000.	A slow, loose swing, like a rope	A fast, nervous ring, like a wire
   data-elastic-line-damping	7	How fast the wobble dies, 1 to 60.	The line rings for seconds	Past 2 times the square root of stiffness it comes back without a single wobble
   data-elastic-line-touch	1	Whether a finger pulls the line, 0 or 1. Options: 1 a finger put on a rule holds it and a tap plucks it; 0 touch is ignored and the rules stay straight on a phone.

2. Drive it from JavaScript

   When something other than the pointer should pluck a rule, when rules arrive after the page has loaded, or when the page reacts to a line being let go.
   JavaScript Copy

   const element = document.querySelector('[data-elastic-line]');
   element.addEventListener('elastic-line:pluck', (e) => {
     console.log(e.detail);
   });
   
   const line = ElasticLine.mount(element);   // the rule auto() mounted, or a new one
   line.pluck(40, 0.5);    // 40px below the rule at its middle, then it rings
   line.offset();         // the pull of its tip in px, 0 at rest
   
   // Rules added after the page loaded: mount everything marked inside it.
   ElasticLine.auto(container);
   
   // When the rules leave the page:
   ElasticLine.destroy(container);   // every rule inside it goes back to a plain div

3. Fit it to your page

   • Structure: an empty div marked data-elastic-line, wherever the page needs a rule: between two rows, under a heading, above a footer. The stylesheet makes it a box one thickness tall in the colour of the settings, as wide as its container. Each marked rule is on its own spring; nothing links two rules together.
   • It is the rule itself, not a border. A border-bottom on a row cannot bend. Take the border off and put a marked div in its place.
   • One setting for every rule of the page, without opening the file: declare window.ElasticLineSettings = { color: '#ffab1a' } in a script placed before elastic-line.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-elastic-line-* attribute on the rule itself (data-elastic-line-color="#ffab1a"), so one rule can still differ from the page-wide setting.
   • What the script writes: on the rule, the two custom properties --elastic-line-color and --elastic-line-thickness, which the stylesheet reads, and data-elastic-line-state, live while the line is bent or moving, idle at rest, still under reduced motion. While a line is live it also carries an inline transparent background and holds one svg, elastic-line-string; both are gone or hidden at rest. No width and no height is ever written on the rule, and no position either as long as the stylesheet is loaded.
   • How a line is caught: the pointer comes within reach of it, or crosses it between two moves. Held, its tip follows the pointer. It slips free once the pointer is further than bend from where the line rests, or past one of its ends, or out of the window. A pointer that crosses a rule too fast to be caught plucks it: one push, as far as it travelled.
   • Scroll plucks too: when the page scrolls under a resting pointer, a rule that passes under it is caught or plucked the same way.
   • **From JavaScript, beyond mount, auto and destroy**: the api of a rule carries element, settings, pluck(amount, at) which pushes the line amount px (below the rule when positive, above when negative) at at, 0 to 1 along it, offset() the pull of its tip in px, frames() and isRunning() for a test that wants to see the loop sleep, and freeze() and unfreeze(), which keep a line bent where it was let go, for a thumbnail. ElasticLine.destroy(root), freeze(root) and unfreeze(root) act on every mounted rule that is root or inside it, the document by default.
   • One event: elastic-line:pluck on the rule, bubbling, each time a held line is let go. detail carries element, offset, the pull in px at the moment it was let go, and at, 0 to 1 along the line. A page can play a note from it.
   • **destroy() leaves the rule as it was**: the path removed, the two custom properties, the state attribute and any inline style taken off. When the last rule of the page is destroyed the listeners on the window go too.
   • Touch: a finger put within 24px of a rule, or within reach if it is larger, holds it, through touch events, so the page still scrolls under the finger. Lifting the finger lets the line go. A short touch that barely moves (under 10px and 350ms) is a tap, and plucks the line by a good half of bend. With touch at 0 nothing answers a finger.
   • **prefers-reduced-motion**: the rules stay straight, plain boxes in the colour and thickness of the settings. The state reads still, and turning the preference off brings the effect back without a reload.
   • The words of the markup are the preview's, and they ship as they are. Put the user's own words in their place whenever they want.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.

4. Avoid the pitfalls

   • **A div, never an hr.** The script lays its path inside the rule, and an hr is a void element that holds no child.
   • The settings own the colour and the thickness. The stylesheet sets the height and the background of a marked rule from the two custom properties the script writes, so a height or a background given to the rule by a class of the page is overridden. Change color and thickness, by attribute or in the settings block.
   • A parent that clips cuts the bend. The path spills out of the one pixel of its box, up to bend above and below. An ancestor with overflow: hidden close to the rule cuts it off; leave it room, or move the clipping further out.
   • The bent line passes over the text around it. The rule is positioned, so its path paints over the rows above and below while it moves, and never takes the pointer: links under it keep working. Content that must stay above takes position: relative and a z-index.
   • A rule needs a width. In a flex row, a marked div with no width of its own is 0px wide and catches nothing. Give it flex: 1, or put it in a block or a column.
   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts on DOM ready, and mount() on a rule that already carries the effect returns the existing one. A page-wide block goes in window.ElasticLineSettings, which auto() reads itself. Rules added later are mounted with ElasticLine.auto(container).
   • **Two rules closer than bend are pulled together.** A pointer that pulls one past its neighbour catches the neighbour too. That is the strum; if it is too much for a dense table, lower bend under the height of a row.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.