Add reveal animations

Import Reveal or Cascade in the component script (frontmatter). Cascade reveals the children of an element in sequence. The component loads its custom element and its CSS, and it needs no hydration directive.

Reveal a whole table with as="table", or reveal content inside a table cell. The RevealTag type excludes document tags, table parts and SVG-only tags. Do not place Reveal or Cascade directly in a <table>, a table section, a row or a <select>: the HTML parser moves the host out of it. In a <p>, also inline in MDX text, use an inline tag such as as="span". The parser moves a block tag, such as the default div, out of the host, and the host reports an error in the browser console.

Do not import a stylesheet. The package loads its stylesheet, which hides server-rendered content until it reveals. The stylesheet replaces a CSS animation of the hidden element or of a cascade child until the reveal, so put your own animation on an inner element.

---
import { Cascade, Reveal } from "@awesome-reveal/astro";
---

<Reveal from="left">Hello</Reveal>
<Reveal as="section" from={{ opacity: 0 }} delay={100}>Fade only</Reveal>
<Cascade as="ul" interval={120}>
  <li>Fast</li>
  <li>Small</li>
</Cascade>

The props types:

import type { CascadeProps, RevealProps } from "@awesome-reveal/astro";
const options: RevealProps = { from: "left", duration: 500 };
const list: CascadeProps<"ul"> = { as: "ul", interval: 120 };
export { list, options };

Set from to "top", "right", "bottom" or "left" for an entrance that starts transparent and 24px away on that side. The defaults are from: "bottom", duration: 600 (milliseconds), delay: 0 (milliseconds) and threshold: 0. Without when, the entrance plays one time.