WebberUI

Magnetic Nav Home

Nav and CTA magnetise to the cursor, hero type floats up character by character, and sections enter with a sense of direction.

ProInteractive homeinteractive-home8 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/magnetic-nav-home.json?t=<install token>"

The whole page lands in app/templates/magnetic-nav-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. 1

    Magnetic Nav and Hero

    Opening block with a cursor-magnetised nav bar, a headline that floats up character by character, parallax light orbs, and a client logo marquee along the bottom.

    hero
  2. 2

    Services

    Four icon cards entering with a sense of direction, covering brand sites, interactive experiences, design systems, and motion design.

    features
  3. 3

    Selected Work

    Three flagship projects framed in mock browser windows, each tagged with its category, result figure, and year.

    gallery
  4. 4

    Track Record

    Four headline numbers counting up, among them projects delivered, design awards, and client return rate.

    stats
  5. 5

    How We Work

    A four-stage process from research and strategy through to launch and iteration, with the items alternating in from left and right.

    timeline
  6. 6

    Client Quote

    One centred oversized quote with a circular avatar and the client's name and title.

    testimonial
  7. 7

    Call to Action

    An oversized magnetic circular button on a glowing backdrop, inviting visitors to email about project availability.

    cta
  8. 8

    Footer

    Three-column footer with the brand mark, social links, sitemap, and contact details, above a copyright row.

    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 →