The image starts at centered max-w-3xl width when it enters view and expands to full viewport width as you keep scrolling. Continue downward to reveal the full image after expansion.
Scroll setup
Added pre-content so the media block arrives naturally from below the fold. Continue scrolling to trigger the full container-to-viewport expansion.
This section intentionally adds vertical rhythm before the animated media, closer to a real product page where copy leads into a visual moment.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra, nibh at volutpat faucibus, arcu ipsum ultrices justo, nec interdum lacus nisi vel lectus. Praesent non nunc vitae urna egestas bibendum.
Curabitur ac mi at neque iaculis finibus. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla facilisi. Vivamus vel mauris vitae mauris pretium varius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra, nibh at volutpat faucibus, arcu ipsum ultrices justo, nec interdum lacus nisi vel lectus. Praesent non nunc vitae urna egestas bibendum.
Curabitur ac mi at neque iaculis finibus. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla facilisi. Vivamus vel mauris vitae mauris pretium varius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra, nibh at volutpat faucibus, arcu ipsum ultrices justo, nec interdum lacus nisi vel lectus. Praesent non nunc vitae urna egestas bibendum.
Curabitur ac mi at neque iaculis finibus. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla facilisi. Vivamus vel mauris vitae mauris pretium varius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra, nibh at volutpat faucibus, arcu ipsum ultrices justo, nec interdum lacus nisi vel lectus. Praesent non nunc vitae urna egestas bibendum.
Curabitur ac mi at neque iaculis finibus. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla facilisi. Vivamus vel mauris vitae mauris pretium varius.
Transition timing is scroll-linked: at first entry the width is constrained, then it eases out to full viewport width before continuing in normal document flow.
Keep scrolling
The image remains in normal flow after it reaches full width, so scrolling continues to reveal the full height.
Notes
This demo uses a reusable Motion + Tailwind component and companion hook.
Post-scroll content
Extra content after the media keeps the page long enough to verify that once the image reaches full width, normal scrolling continues and reveals the full visual.
Aliquam erat volutpat. Integer cursus nisi vel turpis consectetur, vitae feugiat sapien tristique. Quisque sed nisl eu ipsum tempus viverra non non mi. Sed id erat vel neque mattis posuere.