Attract CTA

Make the one action on a signup band physically attractive without a word of hype: the button pulls, the visitor sees it pull, hesitation leaves a visible trace, and the form underneath is a real, honest form.

Copy the attract-cta folder and the filings folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="filings/filings.css">
<link rel="stylesheet" href="attract-cta/attract-cta.css">
<div id="attract-cta"></div>

<script type="module">
  import Filings from './filings/filings.mjs';
  import { mount } from './attract-cta/attract-cta.mjs';

  const attractCta = mount(document.getElementById('attract-cta'), {
    eyebrow: 'A monthly letter · Issue 58',
    title: 'Remanence',
    subtitle: 'What stays with you after the field is gone.',
  }, { Filings });

  // attractCta.update({ … });   change any option in place
  // attractCta.destroy();        and take it away again
</script>

mount(element, options, { Filings })

Builds the block inside the element and returns its handle. Hand it the Filings it is built with.

handle.update(next = {})

Change options in place.

handle.level

How strongly the button's magnet is on, 0…1.

handle.sheet

handle.root

handle.destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: subscribe.

1. WaitingAn even scatter of filings behind the form; the button's magnet is off; a small tag says to bring the pointer closer.
2. ApproachingThe magnet is switched on by nearness (full on the button, off at the reach, in twentieths); the filings turn toward the button, clear a moat and gather into a ring 9–36px outside its edge.
3. LeavingThe magnet goes off, but the gathered iron stays where it went, as iron does; the sheet settles and sleeps.
4. KeyboardFocus in the field or on the button switches the magnet fully on until focus leaves the form.
5. Invalid addressThe section says so in its own voice, marks the field invalid and returns focus to it.
6. Sent or notA handled subscribe event shows the thank-you line; with an action the form posts; with neither, it says plainly that nothing was sent. Either way the magnet goes full on and the sheet is tapped at the button.
7. PaletteBrass filings on black, or dark iron on bone paper with an oxide-red accent.
8. NarrowUnder 820px one column: the copy on solid ground, the form on the iron below; under 480px the button fills its row with room for its ring.
9. Reduced motionThe iron is gathered round the button on the first paint; nothing moves.
10. Off screenThe sheet's loop pauses; the block runs nothing of its own.

Made of: Button as magnet, Ring magnet shape, Proximity power, Iron remembers, Honest form, Container query recomposition.

Original composition; Remanence and its copy are invented. The ring magnet is Filings' shape option, drawn from the button's measured box. Faces: Crimson Pro and Instrument Sans (SIL OFL 1.1) as WOFF2, licences beside them.

• 08FilingsIron filings on paper, magnets underneath.

More blocks on the same object:

• 08.1Iron HeroA magnetics company’s opening, set like a physics monograph.
• 08.2Field 404A 404 on a sheet of lost steel filings.