Ghosty reveal

Photographs that bleed in and out of view through a soft, cloudy mask, like forming out of fog.

npx skills add https://design.how/vault/ghosty-reveal

Installs the template, the brief and a check script as one skill.

What it is

Seven photographs sit in a staggered scatter on a white card, each in a 4:3 box between 13 and 24 percent of the card's width. None of them fades. Each one bleeds in through a soft, cloudy front that rises from the bottom over 1.5 seconds, holds for 1.5 seconds, and dissolves the same way, then comes back as a different photograph. The spots start 0.7 seconds apart, so the field breathes instead of pulsing.

The whole trick is one mask. A feathered ramp, transparent for its first quarter and opaque past two thirds, is laid over the box at 500 percent of its height, so only a sliver of the soft edge ever crosses it. Transitioning mask-position from one end to the other slides that edge across the image, and a gliding ease-out makes it arrive fast and settle slowly. The ramp is pushed around by fractal noise, so the front is cloudy rather than a clean gradient. It is drawn as an inline SVG, so there is nothing to load.

Left and right reveals use a horizontal copy of the ramp sized 500 percent wide, so the feather always runs along the wipe and no element is ever rotated. The image is swapped only after the out-transition has fully finished plus 220ms, so a new photograph never flashes in over the old one.

How it works

  • Wrap each image in a box whose mask-image is the feathered ramp, mask-size 100% by MASK_SCALE percent and mask-repeat none.
  • Hidden is mask-position 0% 0%, shown is 0% 100% for an upward reveal; transition mask-position over DURATION with EASING.
  • For left and right, use the horizontal ramp at MASK_SCALE percent by 100% and slide along x.
  • Loop each box: a 140ms beat, reveal, hold, hide, wait DURATION plus 220ms, swap the image, repeat; stagger the boxes.
  • Draw the ramp as an SVG linear gradient displaced by feTurbulence, so the edge is cloudy.
  • Under reduced motion, show every image and switch the transition to a short opacity fade.

What you can change

  • IMAGES (17 photographs): The image set, as bucket paths.
  • SLOTS (7 staggered spots): Where the images sit, in percent of the card.
  • MASK_SCALE (500): The mask's size as a percent of the box. Bigger is a softer, slower bleed.
  • DURATION (1500): One reveal in or out, in ms.
  • HOLD (1500): How long an image stays fully shown, in ms.
  • EASING (cubic-bezier(0.16, 1, 0.3, 1)): The reveal curve.
  • DIRECTION (up): Which way the soft edge travels: up, down, left or right.