Hero Split Slider | Redesignee

Project description

A dynamic, full-screen hero slider designed for digital agencies, premium portfolios, and e-commerce lookbooks. It reimagines traditional slide transitions by splitting the screen down the center and sliding the left and right halves in opposite vertical directions. The Design Concept Standard hero sliders use a simple left-to-right swipe that can feel passive. We wanted to design an interface that makes switching slides feel like a highly synchronized, mechanical event. By splitting the layout evenly, the typography canvas and the project image container move asynchronously during transitions—one panel slides up while the other slides down. This counter-directional motion creates a deeply satisfying visual rhythm that keeps users engaged with the content as it locks perfectly into place. Key Design Features Counter-Directional Split Motion: Panels slide in opposite vertical directions simultaneously, turning a basic slide change into a captivating UI transition. Balanced Content Dualism: Separates bold marketing headlines on one side and vivid visual showcases on the other, ensuring both elements get equal focus. High-Performance Transition Engine: Engineered entirely as a lightweight cloud component, allowing the synchronized multi-panel slide physics to animate at a perfect 60fps without browser lag. Tools & Tech Stack Design & Layout: Figma Front-End: HTML5 / CSS3 Layouts & Vanilla JavaScript Transition Mechanics Platform: Redesignee Cloud Components