Foundation · 6 Varianten

Reveal

components/system/foundations/Reveal.astro

Scroll-Reveal: Fade-up 12 px in 300 ms ease-out, Stagger 120 ms, Linie wächst. Einmalig. Reduced Motion zeigt alles sofort.

Notizen

Bestand: Bewegung fast/base/slow, keine Reveal-Regel. Sticky-Scroll nutzt IntersectionObserver.
Vorschlag: Attribut data-reveal als Foundation, Klassen in global.css nach Approved.

Props

Name	Typ	Default	Notiz
variant	"fade-up" \| "fade" \| "stagger" \| "linie" \| "einmal" \| "ruhig"	"fade-up"	01–06.
surface	"nacht" \| "paper"	"nacht"	Pflicht-Paar.

<Reveal variant="fade-up" surface="nacht" />

01 · Fade-up

12 px, 300 ms

Liberate. slow.

Nacht

Block 1

Block 2

Block 3

Paper

Block 1

Block 2

Block 3

02 · Fade

Nur Deckung, wiederholt

Anfrage. Bei jedem Eintritt.

Nacht

Block 1

Block 2

Block 3

Paper

Block 1

Block 2

Block 3

03 · Stagger

120 ms Versatz

Anfrage. --nw-delay.

Nacht

Block 1

Block 2

Block 3

Paper

Block 1

Block 2

Block 3

04 · Linie

Oliv-Linie wächst

Section-Label. scaleX.

Nacht

Block 1

Block 2

Block 3

Paper

Block 1

Block 2

Block 3

05 · Einmal

Wie 01, unobserve

Sticky-Scroll. Standard.

Nacht

Block 1

Block 2

Block 3

Paper

Block 1

Block 2

Block 3

06 · Ruhig

reduced-motion

Bewegung. Kein data-reveal.

Nacht

reduced-motion: steht

Paper

reduced-motion: steht