Split Sync Home
Left and right panes scroll in opposite directions in sync; the centre handle drags to change the ratio.
Install
npx shadcn@latest add "https://webberui.com/r/split-sync-home.json?t=<install token>"The whole page lands in app/templates/split-sync-home/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.
Sections it ships with
Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.
- 1
Nav Bar and Hero
Brand nav bar over a hero whose design-to-code comparison slider reveals itself as the cursor sweeps across.
hero - 2
Counter-Scrolling Split Story
A four-chapter story told across a split screen whose panes scroll in opposite directions in sync; drag the centre divider to change the ratio.
content - 3
Stats Band
Four key metrics count up on entry to show sync latency and adoption results.
stats - 4
Core Features
Six cards covering the selling points: a single source of truth, millisecond sync and a Git-native workflow.
features - 5
Customer Voices
Three five-star quotes from people who work across both design and engineering, with avatars and job titles.
testimonial - 6
Call to Action
Closing conversion block on a gradient glow, with two buttons and three trust markers.
cta - 7
Footer
Full footer with a brand blurb, social links and three navigation columns: Product, Resources and Company.
footer
What you get is source code
Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.
Browse the other 103 templates →