Scroll animations

Bold lead clause stays fully opaque, the rest of the sentence dims until the block is half in view. Good for a single mission-style statement between feature sections, not for body copy.

Roadmap/gantt visual for a planning-tool features page. Bar widths are illustrative, wire to real milestone data if this ever leaves marketing and becomes a real product view.

Pins the section and fades in words one by one as the user scrolls past it, a common long-scroll storytelling pattern. Needs enough vertical scroll room to breathe, do not use inside a short section.

Each item slides and fades in on a staggered delay, then the list scrolls to make room for the next, loops on a timer. Built for a 'live activity feed' demo panel next to a product screenshot. Cap it at 4-6 unique items before they repeat.

Dark gradient hero with three drifting blurred blobs and a small live-updating ticker chip above the headline, the texture Stripe uses to avoid a flat gradient. Swap the ticker for a real metric or delete it, it is decorative only.

Four-stat row that counts up from zero when it scrolls into view, using IntersectionObserver plus requestAnimationFrame, no animation library needed. Swap the data-target/prefix/suffix attributes per stat, keep to four items or the row gets cramped on mobile.

Mini analytics card, bars grow from zero via a CSS custom property once the card scrolls into view, no chart library needed for a simple monthly comparison. Only use this shape when the numbers are real and pulled from the client's own dashboard data.

Nav starts transparent over the hero and gains a white background plus a hairline shadow past a scroll threshold. Swap the spacer block for real page content; keep the threshold under 60px so the transition reads instantly.