# Attract CTA

A newsletter band whose button is a magnet. As the pointer comes near, brass filings behind it turn, stream in and stand round it in a bristling ring, and stay there.

Block · With a Pass · https://tactileui.dev/blocks/attract-cta

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

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

## Usage notes

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.

## Options

| Option | Type | Description |
| - | - | - |
| eyebrow | text | Eyebrow |
| title | text | Name of the letter |
| subtitle | text | Standfirst |
| body | text | Paragraph |
| proof | text | Separated by “·”; up to four. |
| fieldLabel | text | Field label |
| placeholder | text | Field placeholder |
| button | text | Button (the magnet) |
| fine | text | Fine print |
| success | text | Thank-you line |
| action | text | Where the form posts. Empty: nothing is sent, and the section says so. |
| palette | enum | Brass filings on black, or dark iron on bone paper. |
| reach | number | How near the pointer must come before the button starts to pull. |
| light | number | Light from (degrees) |

## Methods

- update
- level
- sheet
- root
- destroy

## States

1. **Waiting**: An even scatter of filings behind the form; the button's magnet is off; a small tag says to bring the pointer closer.
2. **Approaching**: The magnet is switched on by nearness (full on the button, off at the reach, in twentieths).
3. **Leaving**: The magnet goes off, but the gathered iron stays where it went, as iron does; the sheet settles and sleeps.
4. **Keyboard**: Focus in the field or on the button switches the magnet fully on until focus leaves the form.
5. **Invalid address**: The section says so in its own voice, marks the field invalid and returns focus to it.
6. **Sent or not**: A 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. **Palette**: Brass filings on black, or dark iron on bone paper with an oxide-red accent.
8. **Narrow**: 
9. **Reduced motion**: The iron is gathered round the button on the first paint; nothing moves.
10. **Off screen**: The sheet's loop pauses; the block runs nothing of its own.

## How it works

Original composition; Remanence and its copy are invented. The ring magnet is Filings' shape option, drawn from the button's measured box.