{{NAME}} Unravel

One thread, pulled from the corner of the {{START_LETTER}}

The loose {{START_COLOR}} end hangs from the {{START_CORNER}} of the {{START_LETTER}}. Scrolling pulls it down toward a point below the logo, and the stitches come out row by row in the order they would really unpick. The same thread changes colour as it moves from one block of stitching to the next. Scroll back up and everything restitches.

Order

Adding it to your site

Everything is in one file, {{FILE}}, with the artwork built in. It has no dependencies and works in plain HTML, React, Next.js or a Webflow custom-code embed.

<div id="logo"></div>
<script src="/{{FILE}}"></script>
<script>
  const unravel = {{GLOBAL}}.mount(document.getElementById('logo'), {
    hint: 'Scroll to unravel'
  });
  unravel.bindScroll();               // unravels over the first 1.2 screens of scrolling
</script>

Controls

Call	What it does
`setProgress(p)`	Sets how far the logo has unravelled, from 0 (fully stitched) to 1 (gone). Use this to drive it from any scroll library.
`bindScroll({ start, distance })`	Ties progress to page scroll. `start` and `distance` are in pixels (numbers or functions).
`play({ duration: 3000 })`	Runs the unravel once on a timer. Returns a promise.
`getProgress()`	Returns the current target progress.
`destroy()`	Removes the logo, the thread layer and all listeners.

The thread is drawn on a transparent layer fixed over the page, so it can trail past the logo's edges. Stitches use WebGL, which keeps it smooth on phones.