Home/Components/Split Cards

Split Cards

Scroll-triggered 3D card flip animation with gap and width transitions. Cards flip to reveal content on scroll.

Loading preview…

Props

5 total
PropTypeDefaultDescription
cardsArray<{ id: string; frontImage: string; backTitle: string; backDescription: string }>default cardsArray of exactly 3 card objects. Each card has: id (unique identifier), frontImage (URL for front side - recommended aspect ratio per image is 5/7, total 15/7 for all 3), backTitle (title shown on back flip), backDescription (description text on back flip)
introTitlestring"Building the Future..."Title text for the intro section
headerTitlestring"Three Forces..."Title text for the sticky header section
outroTitlestring"Start Connecting..."Title text for the outro section
containerClassNamestring""Additional CSS classes for the outer container
← PreviousPixel Image