Rose Works — Sleek horizontal scroll

Showcase Your Ideas with Impactful Headlines

This template is designed to help you create visually stunning websites with a horizontal layout. It features a custom React component that enables smooth horizontal scrolling and an easy-to-use override for precise snap points. To set up snap points, simply apply the withScrollSnapElement code override to any block you want to snap to the viewport, and configured to a height of 100vh for optimal display.

For longer text sections, maintain a clean design by ensuring they remain scrollable within their containers using overflow: scroll.

The horizontal scroll consists of two components: one for the foreground and one for the background. This creates a parallax effect during scrolling. Be sure to include the same number of items in both the foreground and background. The frames automatically resize to fit the viewport.

When adding other sections to the site, remember to apply the withScrollSnapElement override to the relevant element to ensure the scroll snap connects properly. Any content exceeding 100vh needs to have overflow scroll enabled.

For mobile optimization, you can create a separate horizontal scroll that is hidden on desktop. This can include mobile-specific overrides, items, and variants.

To update the text in the components, see this short tutorial: https://youtu.be/tOZru1I-lrM