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.
Built with Ferrofluid
What it is for
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.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Section wide magnet, Pointer through copy layer, Object behind headline, Touch hold to pull, Container query recomposition, Single accent
- Stack
- Vanilla ES modules, CSS, WebGL2
- Needs
- Ferrofluid
- States
- 11 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- ArrivingEyebrow, headline, paragraph, actions and selected work rise 18px and fade in over 1s, staggered; the pool fades in on its first frame and makes one opening pass.
- At restA smooth black pool on a charcoal ground with studio reflections; asleep; a hint invites the cursor where there is one.
- PullingThe 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.
- ReleasedThe cursor leaves the section: the spikes melt back with a wobble, the surface trembles and stills, and the pool sleeps.
- TouchA press held on the section pulls; a vertical swipe scrolls and cancels it; the hint is not shown.
- Hover and focusLinks brighten, the pill lifts 1px, the second link's underline turns ink and its arrow slides; every link shows a 2px focus ring.
- PaletteCharcoal with a vermilion full stop, midnight with blue, oxblood with coral: one accent, used on the full stop and the status dot only.
- TabletAt container widths 640–999px the pool spans behind the eyebrow and headline, full-bleed; paragraph and actions share a row; cases three across.
- PhoneUnder 640px the pool sits in the flow, tucked under the headline's last line, then the paragraph, actions and the cases as a list.
- Reduced motionNo arrival; the pool shows the spiked still, drawn once, and never follows; the hint is hidden; every word is present.
- Off screen or hiddenThe object pauses itself; the block runs no loop or timer of its own.
Notes
Original composition; Kessel & Vane, its cases and all copy are invented. The only imagery is the Ferrofluid. Faces: Young Serif and Instrument Sans (SIL OFL 1.1) as WOFF2, licences beside them.
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
How it works
Original composition; Kessel & Vane, its cases and all copy are invented. The only imagery is the Ferrofluid.