Flow Field Home
Canvas particles drift along a Perlin-style vector field; the cursor stirs the flow.
Install
npx shadcn@latest add "https://webberui.com/r/canvas-flowfield-home.json?t=<install token>"The whole page lands in app/templates/canvas-flowfield-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
Flow Field Hero and Navigation
A nav bar above a particle flow field you can stir with the cursor and swirl with a click, plus a customer logo trust bar.
hero - 2
Features
Six bento cells listing the core capabilities: the streaming engine, vector field routing, millisecond latency and more.
features - 3
Three-Step Data Pipeline
Ingest, compute and distribute as three numbered steps, with a mock terminal showing how the data moves.
timeline - 4
Key Numbers
Four headline figures counting up on scroll for uptime, latency and adoption.
stats - 5
Customer Testimonials
Three quotes on real deployment results from securities, gaming and manufacturing customers.
testimonial - 6
Pricing
Starter, Growth and Enterprise plans, with the recommended one marked most popular.
pricing - 7
Closing Call to Action
A brand gradient glow and two buttons inviting visitors to build their first stream for free.
cta - 8
Footer
A brand blurb, social links and three nav columns for product, developers 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 →