Dark Hero

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.

Copy the dark-hero folder and the ferrofluid 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="ferrofluid/ferrofluid.css">
<link rel="stylesheet" href="dark-hero/dark-hero.css">
<div id="dark-hero"></div>

<script type="module">
  import Ferrofluid from './ferrofluid/ferrofluid.mjs';
  import { mount } from './dark-hero/dark-hero.mjs';

  const darkHero = mount(document.getElementById('dark-hero'), {
    studio: 'Kessel & Vane',
    eyebrow: 'Interaction studio · Rotterdam',
    headline: 'Work that pulls you in',
  }, { Ferrofluid });

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

mount(element, options, { Ferrofluid })

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

handle.update(next = {})

Change options in place.

handle.fluid

handle.root

handle.destroy()

Stops it and cleans up after it.

1. 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.
2. At restA smooth black pool on a charcoal ground with studio reflections; asleep; a hint invites the cursor where there is one.
3. 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.
4. ReleasedThe cursor leaves the section: the spikes melt back with a wobble, the surface trembles and stills, and the pool sleeps.
5. TouchA press held on the section pulls; a vertical swipe scrolls and cancels it; the hint is not shown.
6. 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.
7. PaletteCharcoal with a vermilion full stop, midnight with blue, oxblood with coral: one accent, used on the full stop and the status dot only.
8. TabletAt container widths 640–999px the pool spans behind the eyebrow and headline, full-bleed; paragraph and actions share a row; cases three across.
9. 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.
10. Reduced motionNo arrival; the pool shows the spiked still, drawn once, and never follows; the hint is hidden; every word is present.
11. Off screen or hiddenThe object pauses itself; the block runs no loop or timer of its own.

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

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.

• 04FerrofluidFerrofluid in a dish.

More blocks on the same object:

• 04.1Speaker LaunchA speaker launch where the product works on the page.
• 04.3Processing StateA long job’s progress card, crowned by ferrofluid.