AtAGlance02

File: src/blocks/at-a-glance/AtAGlance02.astro

Scroll-synced list with a sticky media panel. As you scroll, the nearest item becomes active and the media updates.

Desktop: uses activeTrigger (viewport % where item centers activate).
Mobile: shared media is hidden; each item’s image reveals under its text when the section hits ~20% from the top of the viewport, then stays open once revealed (avoids layout jump).

Config (blocks.ts → atAGlanceScroller)

atAGlanceScroller: {
  define: "alphabetical",
  width: "wide",
  imageBleed: false,
  imagePosition: "left",
  heading: "How it works",
  subheading: "Scroll through each capability…",
  stickyTop: 150,
  activeTrigger: 60, // desktop only
  items: [
    {
      image: "/images/hero.svg",
      imageAlt: "Workspace",
      meta: "Core skill",
      title: "Frontend Development",
      description: "Astro, React, and Tailwind…",
    },
  ],
},

Add to a page

---
import AtAGlance02 from "@/blocks/at-a-glance/AtAGlance02.astro";
---

<AtAGlance02 />

Inline:

<AtAGlance02 activeTrigger={40} imagePosition="right" />

Props

Also include: AtAGlanceLayout.astro. Returns null if items is empty.

← At a glance versions · Blocks overview