Cursor Gravity Home
A full-bleed particle field disturbed by cursor attraction and repulsion; headline characters drift towards it too.
Install
npx shadcn@latest add "https://webberui.com/r/cursor-gravity-home.json?t=<install token>"The whole page lands in app/templates/cursor-gravity-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
A complete first screen: sticky nav bar, a cursor-gravity particle field, a magnetic headline and a trusted-brand marquee.
hero - 2
Core Capabilities
Six feature cards on what it takes to move from click analytics to attention analytics.
features - 3
Product Dashboard Showcase
A browser-window dashboard faked entirely in CSS, tilting in 3D with its bars growing as you scroll.
product - 4
Key Figures
Four scale-of-service metrics, counting up when the section enters the viewport.
stats - 5
Customer Testimonials
Three review cards with star ratings, quotes and gradient avatars.
testimonial - 6
Pricing Plans
Comparison cards for the Starter, Growth and Enterprise plans, with the middle tier flagged as most popular.
pricing - 7
Final Call to Action
A gradient glow card built around a 15-minute setup and a 14-day free trial, with two conversion buttons.
cta - 8
Footer
Brand blurb, social links, four columns of site navigation and the copyright and compliance details.
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 →