Hero library · interactive
Cursor reveal
hero.interactive-cursor-reveal: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.
- 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
- eyebrow
1-3 · headline 4-12 · image full · hint 1-3 · subhead 4-8 · cta 10-12 - 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.
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.
Try this hero in the pickerllms.txt