# Dark Hero

A dark editorial hero over black ferrofluid. The pool follows the cursor from anywhere on the section and rises into spikes under it before the headline has been read.

Block · With a Pass · https://tactileui.dev/blocks/dark-hero

> 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

Section wide magnet, Pointer through copy layer, Object behind headline, Touch hold to pull, Container query recomposition, Single accent

## Usage notes

Open a studio's or product's site with its claim made physical: the headline says attention, and the material behind it answers the visitor's hand wherever it is on the section, no instruction needed, nothing running when nobody is there.

## Options

| Option | Type | Description |
| - | - | - |
| studio | text | The wordmark in the nav. |
| eyebrow | text | Eyebrow |
| headline | text | Its full stop is set in the mark colour. |
| lede | text | Paragraph |
| cta | text | Button |
| href | text | Button link |
| second | text | Second link |
| secondHref | text | Second link target |
| nav | text | Comma-separated, up to five. |
| status | text | Status beside the nav |
| cases | text | “Name: kind; Name: kind”, up to three. |
| meta | text | Corner note |
| hint | text | Shown only where there is a cursor to move. |
| palette | enum | Charcoal with an amber stop, midnight with blue, oxblood with coral. |
| pull | number | How hard the cursor pulls. |
| density | number | Spike density |
| sharpness | number | Spike sharpness |
| light | number | 0 is from above, clockwise. |

## Methods

- update
- fluid
- root
- destroy

## States

1. **Arriving**: 
2. **At rest**: A smooth black pool on a charcoal ground with studio reflections; asleep; a hint invites the cursor where there is one.
3. **Pulling**: The cursor anywhere on the section is a magnet in the pool's own coordinates: the pool gathers toward it, leans, and rises into spikes under it; the hint fades.
4. **Released**: The cursor leaves the section: the spikes melt back with a wobble, the surface trembles and stills, and the pool sleeps.
5. **Touch**: A press held on the section pulls; a vertical swipe scrolls and cancels it; the hint is not shown.
6. **Hover and focus**: 
7. **Palette**: Charcoal with a vermilion full stop, midnight with blue, oxblood with coral: one accent, used on the full stop and the status dot only.
8. **Tablet**: 
9. **Phone**: 
10. **Reduced motion**: No arrival; the pool shows the spiked still, drawn once, and never follows; the hint is hidden; every word is present.
11. **Off screen or hidden**: The object pauses itself; the block runs no loop or timer of its own.

## How it works

Original composition; Kessel & Vane, its cases and all copy are invented. The only imagery is the Ferrofluid.