Attract CTA

Datasheet

Mechanism

Button as magnet, Ring magnet shape, Proximity power, Iron remembers, Honest form, Container query recomposition

Stack

Vanilla ES modules, CSS, WebGL2, Canvas 2D

Needs

Filings

States

10 documented

Version

0.1.0

Licence

With a Pass

States

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.