The ingredient string cursor trail

Hover, PhysicsGSAPMediumCompressed weight: Demo 6.0 KBGSAP + MorphSVG 37 KBFreeDownload the zip

From the Crav Burgers site: the pointer of a burger joint drags a white string with four frosted glass beads, lettuce, tomato, cheese and patty. The head follows at once, every point chases the one before only when it gets too far, so the string curls behind the movement; as soon as you stop it gathers under the pointer, and over the Order now button it fades away.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The ingredient string</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/bagel-fat-one@5.3.0/400.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <header class="top">
      <span class="brand">STAKK</span>
      <span class="hours">Smash burgers, open till 2 am</span>
    </header>

    <section class="hero">
      <div class="title-wrap">
        <h1 class="title" aria-label="Stack it up" data-title>Stack it up</h1>
        <span class="sticker sticker--a" data-sticker>Double smash</span>
        <span class="sticker sticker--b" data-sticker>Cheese pull</span>
      </div>
      <p class="line">Smashed patties, toasted buns, and four good things on a string.</p>
      <!-- over the button the string fades away, as on the original site (data-cursor-hide) -->
      <a class="order" href="#order" data-cursor-hide data-order>
        <svg class="order__blob" viewBox="-10 -10 220 100" preserveAspectRatio="none" aria-hidden="true">
          <path data-blob d="M14 6 C60 -2 140 -2 186 6 C198 8 202 22 200 40 C198 60 196 74 184 76 C140 82 60 82 16 76 C4 74 0 60 0 40 C0 22 2 8 14 6 Z"/>
        </svg>
        <span class="order__text">Order now</span>
      </a>
    </section>

    <p class="hint" data-hint>Move around, then stop: the string gathers.</p>

    <!-- the string that follows the pointer: one path and four frosted beads with an ingredient each -->
    <div class="rope" aria-hidden="true" data-rope>
      <svg class="rope__line"><path data-line/></svg>
      <div class="bead" data-bead>
        <svg viewBox="0 0 40 40"><path class="leaf" d="M6 23c2-6 6-11 13-13 3-1 4 1 6 0 3-1 5-1 7 1 2 2 1 4 2 6 1 3-1 6-4 8-3 3-7 3-10 3-5 1-10 0-14-5Z"/><path class="leaf-vein" d="M9 24c6-3 13-6 22-9M17 20l-1-5M23 18l1-5M22 19l3 5M15 22l2 4"/></svg>
      </div>
      <div class="bead" data-bead>
        <svg viewBox="0 0 40 40"><circle class="tomato" cx="20" cy="20" r="14"/><circle class="tomato-in" cx="20" cy="20" r="10.5"/><path class="tomato" d="M20 10v20M11 20h18M13.5 13.5l13 13M26.5 13.5l-13 13" stroke-width="2"/><g class="seed"><ellipse cx="20" cy="14.5" rx="1.3" ry="2"/><ellipse cx="25.5" cy="20" rx="2" ry="1.3"/><ellipse cx="20" cy="25.5" rx="1.3" ry="2"/><ellipse cx="14.5" cy="20" rx="2" ry="1.3"/></g></svg>
      </div>
      <div class="bead" data-bead>
        <svg viewBox="0 0 40 40"><path class="cheese" d="M6 27 L30 9 C33 12 35 17 35 22 L35 29 C35 30 34 31 33 31 L8 31 C6 31 5 29 6 27Z"/><path class="cheese-top" d="M6 27 L30 9 C33 12 35 17 35 22 L9 24Z"/><circle class="hole" cx="14" cy="27.5" r="1.8"/><circle class="hole" cx="24" cy="27" r="2.4"/><circle class="hole" cx="29" cy="18" r="1.6"/><circle class="hole" cx="20" cy="20.5" r="1.4"/></svg>
      </div>
      <div class="bead" data-bead>
        <svg viewBox="0 0 40 40"><rect class="patty" x="5" y="12" width="30" height="17" rx="8.5"/><path class="patty-top" d="M8 17c4-4 20-4 24 0"/><path class="grill" d="M11 15l5 12M18 14l5 13M25 14l4 10"/></svg>
      </div>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MorphSVGPlugin.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

29 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The ingredient string cursor trail” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a red page the invented burger joint STAKK has the title “Stack it up” in mustard yellow with a maroon outline, which enters one letter at a time hopping up from below, tilted, and settles with a spring; below it a line and the Order now button, a yellow blob. The pointer drags a white string of eight points with four frosted glass beads, one per ingredient: a lettuce leaf, a tomato slice, a wedge of cheese with holes, a patty with grill marks. Each bead turns with the direction of the string. While moving the string stretches and curls behind; when you stop it shortens until the beads gather one over the other under the pointer. Over the button the string fades away and the button’s blob swells into a new shape with a small bounce. On a phone the string follows the dragging finger.

How it works

Eight points

The string is a list of eight points with x and y. On every frame the head goes towards the pointer with a five hundredths tween; every other point looks at the one before and, only if it is further than one segment, sets off towards it up to that distance, with a slightly slower tween for each point down the line.

The drawing

The path runs through the midpoints between a point and the next, with a quadratic curve that uses the point as control: so the string stays smooth even with few points. The beads sit on four chosen points and turn by the angle between their point and the one before.

Stopping

On every move the segment length goes back to full and at once starts dropping to zero in half a second. If the moves keep coming it stays long; when they stop it reaches zero and every point chases the one before until they meet: the string gathers.

Vanishing on the button

The button has the data-cursor-hide attribute: when the pointer goes over it, a tween takes the string’s opacity to zero, and brings it back when it leaves. The button’s blob changes shape with MorphSVG.

Values to change

Name	File	Default	What it changes
`SEGMENTS`	script.js	`8`	How many points make the string.
`SEGMENT`	script.js	`16`	The length of one segment in pixels (the original site uses 8).
`BEADS`	script.js	`[0, 3, 5, 7]`	On which points of the string the four beads sit.
`HEAD`	script.js	`0.05`	The seconds the head takes to reach the pointer.
`FOLLOW`	script.js	`0.12`	The seconds each point takes to catch up with the one before.
`GATHER`	script.js	`0.5`	The seconds the string takes to gather when the pointer stops.
`FADE`	script.js	`0.6`	The seconds of the fade over the button.
`POP`	script.js	`0.055`	The delay between the letters of the title.

Try them in the Playground

When to use it

For the home page of a burger joint, a food truck or a pizzeria, a menu page, a delivery site: a pointer that carries the ingredients around and steps aside on the buttons.

On phones

The string follows the dragging finger (the original site switches it off on phones: here it stays, with the same animations). The title and the button are sized on the height too and fit in the box.

With reduced motion

The string rests below the button with its beads and does not follow the pointer; the title fades in and the button’s blob does not change shape.

Pitfalls

Each point’s tween has to start with overwrite: true, or a new one piles up on every frame and the string jitters.
The string layer needs pointer-events: none: otherwise it is what sits under the pointer and the button no longer knows it is hovered.
To know whether the pointer is over the button, closest('[data-cursor-hide]') on the event target is enough: it works even when the target is the blob’s SVG path.

Libraries

GSAP 3.15.0, MorphSVGPlugin 3.15.0, Bagel Fat One 5.3.0, Instrument Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 6.0 KB; the libraries: GSAP + MorphSVG 37 KB.

Testing

Tested on 23 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.