Hover & motion

<div class="sl-grid sl-md:cols-2 sl-gap-6">
  <article class="sl-card sl-stack demo-lift">
    <span class="sl-badge">Hover or focus</span>
    <h3 class="sl-text-xl">A subtle lift.</h3>
    <p class="sl-text-muted">
      A little feedback can make a surface feel more responsive.
    </p>
    <a href="/components/cards/">Explore cards ↗</a>
  </article>
  <article class="sl-card sl-stack demo-glow">
    <span class="sl-badge">Hover or focus</span>
    <h3 class="sl-text-xl">A quiet glow.</h3>
    <p class="sl-text-muted">A border and shadow shift, with no moving content.</p>
    <a href="/themes/">Explore the palette ↗</a>
  </article>
</div>

<div class="sl-stack demo-narrow">
  <h3 class="sl-text-xl">Follow your next idea.</h3>
  <a class="demo-animated-link" href="/getting-started/"
    >Make something thoughtful <span aria-hidden="true">→</span></a
  >
  <p class="sl-help">A keyboard focus ring remains visible throughout.</p>
</div>

<div class="sl-grid sl-md:cols-2 sl-gap-6">
  <article class="sl-card sl-stack demo-scroll-reveal">
    <span class="sl-badge">Scroll reveal</span>
    <h3 class="sl-text-xl">A gentle entrance.</h3>
    <p class="sl-text-muted">
      Opacity and vertical movement follow this card entering the viewport.
    </p>
  </article>
  <article class="sl-card sl-stack demo-scroll-reveal">
    <span class="sl-badge">CSS only</span>
    <h3 class="sl-text-xl">Nothing to initialize.</h3>
    <p class="sl-text-muted">
      Content stays visible if view timelines are unsupported or reduced motion is
      enabled.
    </p>
  </article>
</div>

<div class="sl-grid sl-md:cols-2 sl-gap-6">
  <article class="sl-card sl-stack sl-reveal-left">
    <h3 class="sl-text-xl">Slide in.</h3>
    <p class="sl-text-muted">Use sl-reveal-left for an entry from the inline edge.</p>
    <a href="/getting-started/">Explore the guide ↗</a>
  </article>
  <article class="sl-card sl-stack sl-reveal-scale">
    <h3 class="sl-text-xl">Scale into view.</h3>
    <p class="sl-text-muted">A small, bounded scale effect.</p>
    <a href="/getting-started/">Explore the guide ↗</a>
  </article>
</div>

<div class="sl-grid sl-md:cols-3 sl-gap-4 sl-stagger">
  <article class="sl-card sl-stack" style="--sl-i: 0">
    <h3 class="sl-text-lg">Structure</h3>
    <p class="sl-text-muted">An indexed CSS reveal.</p>
  </article>
  <article class="sl-card sl-stack" style="--sl-i: 1">
    <h3 class="sl-text-lg">Expression</h3>
    <p class="sl-text-muted">An indexed CSS reveal.</p>
  </article>
  <article class="sl-card sl-stack" style="--sl-i: 2">
    <h3 class="sl-text-lg">Possibility</h3>
    <p class="sl-text-muted">An indexed CSS reveal.</p>
  </article>
</div>

<div class="sl-stack">
  <h3 class="sl-text-xl sl-reveal-text">Let the next chapter unfold.</h3>
  <p>Native view timelines reveal the heading as it enters the viewport.</p>
</div>

<div class="sl-stack sl-gap-8">
  <h3 class="sl-text-xl sl-split" aria-label="Build something thoughtful">
    <span class="sl-word" aria-hidden="true" style="--sl-i: 0">Build</span>
    <span class="sl-word" aria-hidden="true" style="--sl-i: 1">something</span>
    <span class="sl-word" aria-hidden="true" style="--sl-i: 2">thoughtful</span>
  </h3>
  <h3 class="sl-text-xl sl-split" aria-label="Create freely">
    <span class="sl-word" aria-hidden="true" style="--sl-i: 0"
      ><span class="sl-char" style="--sl-i: 1">C</span
      ><span class="sl-char" style="--sl-i: 2">r</span
      ><span class="sl-char" style="--sl-i: 3">e</span
      ><span class="sl-char" style="--sl-i: 4">a</span
      ><span class="sl-char" style="--sl-i: 5">t</span
      ><span class="sl-char" style="--sl-i: 6">e</span></span
    >
    <span class="sl-word" aria-hidden="true" style="--sl-i: 7"
      ><span class="sl-char" style="--sl-i: 8">f</span
      ><span class="sl-char" style="--sl-i: 9">r</span
      ><span class="sl-char" style="--sl-i: 10">e</span
      ><span class="sl-char" style="--sl-i: 11">e</span
      ><span class="sl-char" style="--sl-i: 12">l</span
      ><span class="sl-char" style="--sl-i: 13">y</span></span
    >
  </h3>
</div>

<section class="sl-scene">
  <div class="sl-scene__visual sl-stack">
    <span class="sl-badge">CSS scene</span>
    <h3 class="sl-text-xl sl-parallax">A new perspective.</h3>
    <div class="sl-scroll-progress" aria-hidden="true"></div>
    <p>Sticky positioning and native timelines; no GSAP or runtime JavaScript.</p>
  </div>
  <div>
    <article class="sl-scene__step sl-reveal">
      <span class="sl-badge">01</span>
      <h3 class="sl-text-xl sl-my-4">Start with structure</h3>
      <p class="sl-text-muted">
        Scroll to move through this scene. Content stays readable without animation
        support.
      </p>
    </article>
    <article class="sl-scene__step sl-reveal">
      <span class="sl-badge">02</span>
      <h3 class="sl-text-xl sl-my-4">Add your expression</h3>
      <p class="sl-text-muted">
        Scroll to move through this scene. Content stays readable without animation
        support.
      </p>
    </article>
    <article class="sl-scene__step sl-reveal">
      <span class="sl-badge">03</span>
      <h3 class="sl-text-xl sl-my-4">Make it yours</h3>
      <p class="sl-text-muted">
        Scroll to move through this scene. Content stays readable without animation
        support.
      </p>
    </article>
  </div>
</section>

<div class="sl-grid sl-md:cols-2 sl-gap-6">
  <article class="sl-card sl-stack sl-hover-tilt">
    <h3 class="sl-text-xl">A touch of tilt.</h3>
    <p class="sl-text-muted">
      Focus the link to try the same effect without a pointer.
    </p>
    <a href="/getting-started/">Explore the guide ↗</a>
  </article>
  <article class="sl-card sl-stack sl-hover-glow">
    <h3 class="sl-text-xl">A gentle glow.</h3>
    <p class="sl-text-muted">A shared motion token, without a runtime library.</p>
    <a href="/getting-started/">Explore the guide ↗</a>
  </article>
</div>