hero.interactive-cursor-reveal · Cursor reveal

A hero pattern from the hero library, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.interactive-cursor-reveal". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Eyebrow in 1–3 beside a display headline (step 5) in 4–12; a full-bleed 21:9 grayscale photo under it where a soft circle following the cursor reveals the colour version; hint, subhead and CTA below.
Slots
eyebrow, headline, heroImage, meta, subhead, cta
Grid areas
eyebrow 1-3 · headline 4-12 · image full · hint 1-3 · subhead 4-8 · cta 10-12 (12-column grid, 1-based inclusive spans)
Notes
Two aligned images (grayscale base, colour reveal) stacked; the reveal layer uses a radial-gradient mask positioned at the pointer (CSS variables updated in pointermove, eased with rAF). Touch and reduced motion: show the colour image statically. See the reveal-hover-effect skill.
Tokens
bg #0E0D0B · text #E8E0CB · heading #E6C676 · accent #C9A24B · accent2 #88660B · Limelight / Josefin Sans · radius 0px · space unit 8px (full list in design/tokens.json)

Do

  • Stack two aligned versions of one photo: grayscale base and colour reveal.
  • Reveal the colour layer through a soft 180–260 px circle that follows the pointer with slight easing.
  • Show a small hint ('Move to reveal') in 1–3 under the image.
  • Fall back to the colour image on touch devices and under prefers-reduced-motion.

Don't

  • Don't hide any text or links behind the reveal.
  • Don't hijack the native cursor; the reveal circle follows it, the system cursor stays visible.
  • Don't load the reveal image eagerly at full resolution on phones.

Phone width

  • Eyebrow, headline (step 5), colour photo at 4:3, subhead, CTA; no reveal effect.

Brand & product studio

We make complicated companies simple to choose

Booking projects from June 2026

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project