shared · Page blocks

Stagger

components/site/Reveal.tsx

preview

Section 1

Section 2

Section 3

usage · in this app

components/landing/tools-section.tsx

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

<Stagger className="mt-12 grid gap-4 md:grid-cols-3">
  {EXTRAS.map((e) => (
    <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>
  ))}
</Stagger>

props

{ children: ReactNode delay?: number gap?: number 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