For AI agents: the complete documentation index is available at https://lazygophers.github.io/pamphlet/en/llms.txt, the full documentation bundle is available at https://lazygophers.github.io/pamphlet/en/llms-full.txt, and this page is available as Markdown at https://lazygophers.github.io/pamphlet/en/write/components/reveal.md.
Pamphlet
  • English

      • Reveal on scroll

      What it is

      A block that fades or slides in when you scroll to it. Pure visual rhythm; it carries no information.

      How to write it

      :::reveal{effect=slide-left}
Slides in when scrolled into view.
:::
      LabelAttributes
      —effect

      Four effects

      ValueEffect
      fade-updefault, fades in and rises 12px
      fade-infade only
      slide-leftslides in 16px from the left
      slide-rightslides in 16px from the right

      Any other value reports DIR-206 and lists the valid ones.

      What comes out

      With JavaScript off the content is simply visible, with no animation. The test is simple: the animation carries no information, so removing it loses nothing.

      Turning on "reduce motion" in the operating system also disables it — via the CSS prefers-reduced-motion query, with nothing for the reader to do.

      Traps

      Never hide anything in here

      The entire purpose is rhythm. Anything that would be lost without the animation does not belong in this directive.

      • Wrapping every block kills the rhythm it was meant to create. Two or three per document is plenty