Skip to main content
← All notes
Building

Every section on the page reveals itself in order

software

The service pages do not load all at once. Each section fades in with a staggered delay — hero first, then content blocks, then the sidebar panels, then the photo gallery. The entire effect is a single component called BlurReveal. It takes a delay prop in milliseconds and wraps its children in a div that starts blurred and translucent. After the delay, a state flip triggers a CSS transition that removes the blur and brings opacity to full. The transition takes 500 milliseconds. The component is eleven lines of code. No intersection observer, no scroll tracking, no animation library. Just a setTimeout that flips a boolean. The FormAccordion uses it with delays of 0, 100, and 200 milliseconds so the three sidebar panels cascade downward. The PhotoGallery uses it with an incrementing delay per image — baseDelay plus index times 100 — so photos reveal left to right, top to bottom. The hero image on each service page gets a delay of 0 so it appears instantly. The testimonials section gets a longer delay so it arrives last. The whole reveal sequence is controlled by passing different delay numbers to the same component. No choreography config, no timeline object. Just a number on each section.

Comments coming soon

Sign in with TikTok to leave a comment. Coming soon.