WebberUI

Code Morph Home

The hero code block morphs smoothly between languages and frameworks, with line numbers and highlighting transitioning in step.

ProInteractive homeinteractive-home8 sections
See it liveSee the plans

Install

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

The whole page lands in app/templates/code-morph-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

    Nav Bar and Code-Morph Hero

    A sticky nav bar, a cursor-spotlight headline area, a code window that auto-morphs between four languages, and a customer logo strip.

    hero
  2. 2

    Scroll-Driven Three-Step Workflow

    Scroll progress drives three stages — paste the source, build the semantic graph, emit idiomatic code — with the left progress rail and right panel morphing in step.

    timeline
  3. 3

    Core Feature Grid

    Six icon cards covering semantically equivalent translation, automatic equivalence tests, live preview, CI integration, type safety and multi-language support.

    features
  4. 4

    Key Metrics Band

    Four outcome figures that count up on entering the viewport: languages supported, test equivalence rate, monthly translations and first-line latency.

    stats
  5. 5

    Customer Testimonials

    Three quotes from migration teams, on cards with gradient letter avatars and job titles.

    testimonial
  6. 6

    Pricing Plans

    Three plan cards behind an annual/monthly toggle; prices flip over on switch and the most popular plan is flagged.

    pricing
  7. 7

    Closing Call to Action

    A centred glow backdrop with a large headline and two buttons, pointing to a free start or the workflow tour.

    cta
  8. 8

    Footer

    Brand blurb, round social buttons and product, resources and company link columns, over a copyright and terms 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 →