$50K Website Builder

Build cinematic, scroll-animated marketing websites that look like they cost $50,000 or more. This plugin packages a proven methodology into a skill your assistant can run: a GSAP motion system, a library of signature scroll moments, a brand-to-build workflow, a working starter site, and an in-browser quality bar. You describe your brand; it builds a site people scrub back and forth just to watch it move.

Built for anyone. You do not need to write code. Beginners can install it and ship a live site; pros get a battle-tested system to build on.

Quick start

Install the plugin (see Install below).
Ask for a site: "Build me a premium, scroll-animated one-pager for my brand. Here is my logo and a few photos."
Review and deploy: the assistant builds it, QAs every animation in a browser, and helps you push it live for free.

That is the whole loop. No build tools, no framework, one folder of plain HTML, CSS, and JavaScript.

What it produces

A one-page (or multi-page) marketing site that:

opens with one signature scroll moment nobody expects, executed flawlessly;
moves in every section, with smooth heavy easing and staggered reveals;
uses a strong type pairing, a tight palette, and generous space, so it never looks like a template;
holds 60fps, respects reduced-motion, and still renders cleanly if a script fails to load;
is plain HTML, CSS, and JavaScript in one simple folder, so any free host can serve it.

Install

This installs as a Cowork/Claude plugin.

Fastest: open the 50k-website-builder.plugin file in Cowork and click install.
From this repo: see "Share it with others" below for the marketplace commands.
After installing, manage it in Settings under Capabilities, where you can turn the skill on or off.

Once installed, the skill activates automatically whenever you ask for the kind of site it builds. You do not have to invoke anything by hand.

How to use it

Just describe your brand and ask for a premium site. For example:

"Build me a premium, scroll-animated one-pager for my coffee roastery. It should feel warm and precise. Here are my logo and three product photos."

Or:

"My landing page looks generic and cheap. Make it look like it cost fifty grand."

The assistant will:

ask a few sharp questions about your brand and the one feeling the site must create;
lock a design system (type, palette, space);
pick exactly one signature opener that fits you;
build section by section on the motion system, starting from the included starter site;
QA every animation in a browser, do a mobile pass, and help you deploy.

Trigger phrases include: build or redesign a website, landing page, or one-pager; "animated site," "scroll animations," "parallax," "premium" or "expensive-looking," "$50k site," "cinematic," "scroll-stopping," or "my site looks generic."

A taste of the signature moves

Every site gets exactly one, in the opener, executed flawlessly, and never repeated. The library includes:

Mask zoom-through: the hero video plays inside the letters of your name, then the camera flies through a letter into fullscreen.
Logo assembly: the brand mark builds itself piece by piece, then locks with one heavy settle.
Scroll-scrubbed product video: the product transforms, unfolds, or assembles as the visitor scrolls, in their control.
Impact to calm: the hero starts jarred and distorted and heals to still and sharp as you scroll.
Name ignite: letters light up in sequence with cinematic video revealed through the letterforms.
Text-message opener: a short conversation plays out, then hands off into the hero.
Animated comparison table, rotating globe, big count-ups, clip-path world reveal, and more.

The full library with build notes and the trap that ruins each one is in skills/build-premium-site/references/signature-moves.md.

The project structure it creates

your-site/
  index.html         the page
  css/style.css      the styling
  js/main.js         the motion
  assets/            your images and videos

One folder, no build step. That is the whole thing.

Preview and deploy

Preview: ask the assistant to start a local preview, or run python3 -m http.server 8000 in the folder and open localhost:8000. Scroll it down and up, then check the phone view.
Deploy free: drag the folder onto app.netlify.com/drop for a live link in about twenty seconds, or use GitHub Pages. HTTPS is automatic. Point a custom domain at it whenever you like.

Full beginner steps are in skills/build-premium-site/references/setup-and-deploy.md.

Share it with others

Two ways:

Send the file. Share the 50k-website-builder.plugin file with anyone. They open it in Cowork and click install. Easiest for a few people.
Publish it as a public kit. Push this folder to a public GitHub repo. The included .claude-plugin/marketplace.json makes the repo one-click installable. Anyone can then add and install it with two commands:
```
/plugin marketplace add YOUR-USERNAME/YOUR-REPO
/plugin install 50k-website-builder@build-with-nav
```
Replace YOUR-USERNAME/YOUR-REPO with your actual GitHub repo (for example navram/50k-website-builder).

What is inside

50k-website-builder/
  .claude-plugin/
    plugin.json                         plugin manifest
    marketplace.json                    makes the repo one-click installable
  skills/build-premium-site/
    SKILL.md                            how the assistant builds a $50k-tier site
    references/
      motion-system.md                  copy-paste GSAP + ScrollTrigger + SplitText + Lenis code
      signature-moves.md                the library of opener moves; pick one
      workflow.md                       the repeatable end-to-end process
      setup-and-deploy.md               the beginner playbook
    assets/starter-template/            a working starter site you can re-brand
  CONNECTORS.md                         how the tool placeholders work
  LICENSE                               MIT
  CHANGELOG.md                          version history
  README.md                             this file

The starter template already carries the full motion system for an example brand, so every animation runs out of the box. The assistant re-brands it to you.

Philosophy: the $50k bar

Every section moves. Nothing sits static. A page that does not move is a brochure.
One signature opener. Exactly one move nobody expects, in the first five seconds, executed flawlessly, and never repeated across sites.
Craft over effects. When something feels average, the answer is a sharper single move plus ruthless cleanup, never more animations.
Always QA in the browser. A site is not done until it has been watched moving, at desktop and phone widths, up and down, with reduced-motion checked.
Make them say "how did they build this." That reaction is the whole target.

License

MIT. Free to use, modify, and share, including commercially. Keep the copyright notice. See LICENSE.

Credit

Made by Build With Nav. Learn more at buildwithnav.com.

50k Website Builder

README