shared · Page blocks

StaggerItem

components/site/Reveal.tsx

preview

Section 1

usage · in this app

components/landing/tools-section.tsx

import { StaggerItem } from '@/components/site/Reveal'

<StaggerItem key={e.title}>
  <Link
    href={e.href}
    className="card-lift group flex h-full flex-col gap-3 rounded-lg border border-[var(--border-strong)] bg-[var(--surface)] p-5"
  >
    <div className="mono text-base font-medium text-[var(--foreground)]">{e.title}</div>
    <p className="text-ui leading-compact text-[var(--fg-muted)]">{e.body}</p>
    <div className="mono mt-auto text-xs text-[var(--fg-dim)]">{e.cmd}</div>
    <span className="mono inline-flex items-center gap-1 text-xs text-[var(--accent)]">
      {e.cta}
      <ArrowRight size={12} strokeWidth={2} className="transition-transform group-hover:translate-x-0.5" />
    </span>
  </Link>
</StaggerItem>

props

{ children: ReactNode className?: string }

used on · 1

tokens · 0

referenced in its file

No token referenced directly; it may style itself through the components it renders.

history · 2

verified

Previews for the multi-component files (Orbit, Logo, Reveal) as named <Name>Preview exports, and PageIntro

2026-10-22

verified

CID-025: under reduced motion revealed sections show at once (they stayed blank after hydration)

2026-10-22

Coherent Design MethodGitHubDesign system read from this app's code