Section
@sushindustries/uiKicker, heading and body, revealing top-down with an 80ms offset.
Section is a page section: a kicker, a heading and a body, wrapped in a container and revealed top-down as the reader scrolls to it. Reach for it as one of a page's top-level blocks whenever content should resolve as a sequence instead of arriving as one block.
tanstacktanstack add https://adamjurek.com/r/tanstack/section.json
shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/section.jsonWhy it is built this way
The heading and the body reveal separately, offset by 80 milliseconds. That gap is the whole trick - short enough that it does not read as a deliberate sequence, long enough that the two halves do not land on the same frame and arrive as one flat block instead.
Install
tanstack add https://adamjurek.com/r/tanstack/section.jsonshell
pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/section.jsonshell
pnpm add @sushindustries/ui @sushindustries/atomsshell
What you get
| Version | 0.1.0 |
| Category | layout · Page structure |
| Files | section.tsx |
| Dependencies | None |
| Also installs | revealRevealFades and rises its children the first time they reach the viewport. Never un-reveals.@sushindustries/ui · motion |
| Tags | heading, scroll, no-deps |
No runtime dependencies
It brings nothing with it beyond the stylesheet.