Process 3 block design & features
Process3 is a five-step process section with a header row and a vertical stack of color-banded rows that animate into view on scroll. The header shows the section title and subtext flanked by monospace step-range indicators. Each step row is a full-width band with a progressively darker sky-blue background, an ArrowDown icon, a large title, and an oversized white step number positioned at a unique horizontal offset that shifts further right with each step.
The background bands progress from sky-200 through sky-600, creating a gradient-like cascade down the page. Step numbers use a custom monospace Google font rendered at very large sizes, bleeding below the band baseline for a layered typographic effect. Titles are bold and tracked tight. The entrance animation uses framer-motion spring physics with staggered delays per step.
The feel is bold and graphic, leaning on color progression and oversized typography for impact rather than imagery or icons. Complexity is moderate because each step animates independently and the offset positioning varies per item. The block uses no shadcn/ui primitives beyond utility classes and the font hook, relying on custom layout for its visual identity.
On smaller screens the band heights reduce and the step numbers scale down proportionally, but the horizontal color-band structure remains intact.