Welcome, read this first

You're holding the course I wish I had when I started. It's not a pile of tutorials. It's a video-game-shaped path with 9 levels, 60+ quests, and one boss battle at the end.

Who this is for

• Complete beginners who have never built a website and feel intimidated by the AI explosion.

• Freelancers who can already build but want the signature style that separates pro from intern.

• People who want to use AI to make real income, not theory, not hype.

How the levels work

Each level has 5 parts:

The colour key

• 🟦 Blue = beginner / foundations

• 🟩 Green = build tools (make the site)

• 🟨 Yellow = motion + animation

• 🟧 Orange = integration (chaining tools)

• 🟥 Red = the build project

• 🟪 Purple = AI brain tools + signature style

• 🟦 Cyan = performance + publishing

• 🟡 Gold = boss battle / capstone

• 🏅 Onyx = community + monetization

The three promises we expect from you

1. Ship before you polish. Post rough work in the community, it beats perfect work that never goes live.

1. Help one person a week. This is how the community stays warm, and how you stay sharp.

1. Reinvest 10% of any money this course helps you earn back into the tools that helped you earn it.

🟦 The rules of the arcade

Before you touch a keyboard, you need three beliefs that separate people who build from people who watch.

• You will not memorise anything. You will look things up. Google and ChatGPT are your pair-programmers.

• You will copy first, understand second, invent third. Every pro started by copying.

• You will finish ugly before you make it pretty. A done ugly site beats a perfect idea every time.

Lesson 1 • What is a website, really?

A website is just a folder of files that a browser downloads and reads. There is no magic. There are exactly three types of files that matter for what we will build:

Good news: AI tools now write all three for you. You describe what you want in English; the tool writes the files. Your job becomes creative director, not typist.

Lesson 2 • What is AI doing for us?

There are four ways AI helps a modern web designer. You will touch all four in this course.

You are not competing with AI. You are learning to direct it. The person with the best taste and the clearest prompt wins.

Lesson 3 • What is animation, and why does it matter?

Animation is any visual change over time. A button that grows when you hover over it. A logo that floats. Text that appears letter by letter. A 3D object that rotates as you scroll.

Animation matters because it tells the visitor: this site is alive, modern, and cared for. In 2026, a static website feels like a black-and-white TV. People still notice, but not in a good way.

Lesson 4 • Your beginner toolkit, create these 10 free accounts

Before Level 1, you need accounts. Take 20 minutes. Use the same email everywhere. Save passwords to a password manager (Bitwarden is free).

Don't pay for anything yet. The free tiers are enough to finish this course.

Lesson 5 • Your beginner vocabulary (bookmark this)

You will hear these words constantly. Learn them once and the rest of the course gets easy.

Lesson 6 • Write your first prompt, the 5-line formula

A weak prompt gives you a weak website. A strong prompt gets you 80% there. Use this template every single time you talk to an AI tool.

That's it. Role, Goal, Style, Sections, Constraints. Remember those five words.

🎯 Level 0 Quest Pack

Finish these three quests in order before moving to Level 1. They are small on purpose, the point is to push the start button on your career.

What it's best for

Designing the site before you build it. Wireframing, moodboarding, and handing off clean specs to Framer, Webflow, or devs.

Pricing (as of 2026)

Quick-start walkthrough

1. Go to figma.com and sign in with Google.

1. Click the purple '+' → New design file.

1. Press F (frame), pick 'Desktop 1440' on the right, then draw your canvas.

1. Press R (rectangle) and T (text) to start blocking out a hero. Use Auto-Layout (Shift + A) to make elements behave responsively.

1. Turn on 'Dev Mode' (top-right toggle) when finished, it exposes CSS + spacing for handoff.

Act as a senior product designer.

Write a Figma brief for a landing page that sells an online course
on 'Animated AI Websites' to aspiring designers.

Return:
1) Site map (sections in order)
2) For each section: goal, headline, sub-headline, CTA copy
3) Colour palette in hex (4 colours max)
4) Typography pairing (Google Fonts)
5) Reference sites I should mood-board

Tone: cinematic, confident, modern.

🎯 Quest pack

What it's best for

Launching an animated, pro-looking site in a weekend without writing code. Drag, drop, animate, publish.

Pricing (as of 2026)

Quick-start walkthrough

1. Open framer.com and start a new project.

1. Pick a template you like, the 'Linear' style dark templates are gold for learning.

1. Click any element → right panel 'Effects' tab → add Fade / Scale / Scroll.

1. Hit the phone icon top-right to check mobile responsiveness.

1. Click 'Publish' → connect a domain or use the free .framer.website address.

Open Framer → type 'AI' in the command bar →

Paste:
Design a dark-mode landing page for 'Halo Coffee', a premium
subscription for espresso beans. Hero has a floating 3D coffee bag,
scroll reveals for 3 tasting notes, testimonial quotes, subscribe CTA.
Fonts: Inter + Playfair Display. Accent colour: #F2B544.

🎯 Quest pack

What it's best for

Big, content-heavy sites with blogs, case studies, and multiple page templates. More power than Framer, steeper learning curve.

Pricing (as of 2026)

Quick-start walkthrough

1. Sign in at webflow.com → 'New site' → pick blank or template.

1. Learn the three tabs: Navigator (layers), Style Manager (CSS classes), Interactions (animations).

1. Drag a Section → Container → Div → H1. That's your hero.

1. Open Interactions panel → 'Element trigger' → 'Scroll into view' → choose 'Fade up'.

1. Publish to webflow.io free subdomain; upgrade when ready for a real domain.

I'm building a Webflow site for a photography portfolio.
Write me:
1) A complete class-naming system (BEM or utility-first, pick one, justify it)
2) A list of reusable components I should build (nav, hero, grid, lightbox…)
3) For each component, the exact Webflow structure (Section > Container > Div > …)
4) Three interactions I should add on scroll, with timing and easing suggestions

🎯 Quest pack

What it's best for

When you already code (or use Cursor / Lovable) and need a beautiful specific component, a navbar, pricing grid, hero, in 30 seconds.

Pricing (as of 2026)

Quick-start walkthrough

1. Go to v0.dev (or inside Vercel dashboard).

1. Type your prompt, be specific: component type, look, content.

1. Preview updates live. Click 'Refine' and iterate in chat.

1. Click 'Copy code', you get ready-to-paste React + Tailwind JSX.

1. Or click 'Open in Cursor' to send it straight to your editor.

A pricing section for a SaaS called 'Modvia Pro'.

- Three tiers: Hobby (free), Creator ($19), Studio ($59).
- Use shadcn/ui card components, subtle border, glass effect on the middle 'Creator' card.
- Toggle switch for monthly/yearly at the top; yearly shows 20% off badge.
- Each card has a checkmark list of 5 features.
- Hover: card lifts 4px with soft shadow.
- Dark mode with neon-green accent (#00FFB2) on primary CTAs.

🎯 Quest pack

What it's best for

Anyone who wants a real web app (not just a marketing page) without touching a terminal. Great with Spline imports.

Pricing (as of 2026)

Quick-start walkthrough

1. Sign in at lovable.dev.

1. Describe your app in a long, detailed prompt (use the 5-line formula from Level 0).

1. Watch it generate in real-time, frontend, Supabase DB, auth.

1. Click any element and say 'change this' in chat to edit surgically.

1. Click 'Publish' for a lovable.app URL; connect a domain later.

Build a personal finance tracker called 'Moneta'.

Pages:
1) Auth (email + Google login, Supabase)
2) Dashboard, summary cards (balance, month income, month expenses),
   animated bar chart of last 6 months, recent 10 transactions
3) Transactions, list with filters, add/edit/delete modal
4) Settings, currency, dark mode toggle

Design:
- Dark theme, purple accent #8B5CF6, glass cards, subtle grid background
- Fonts: Geist Sans + Geist Mono
- Motion: stagger-fade cards in on load, numbers count up on first view

Mobile-first. Store everything in Supabase.

🎯 Quest pack

What it's best for

When you want more control than Lovable, see the code, fork it, debug it, push to GitHub.

Pricing (as of 2026)

Quick-start walkthrough

1. Open bolt.new, describe your project in plain English.

1. Wait for scaffold, you see file tree + live preview.

1. Chat on the left to keep editing; right pane runs.

1. Click 'Connect to GitHub' to push the repo.

1. Click 'Deploy' → Netlify / Vercel deploy in one step.

Build me a Next.js 14 (App Router) + Tailwind + shadcn/ui project.
Feature: a 'focus timer' with 25/5 Pomodoro, ambient sound toggle,
         daily streak tracker persisted in localStorage,
         animated circular progress ring.
File structure: app/, components/, lib/, with clear separation.
Add a README with setup instructions.

🎯 Quest pack

What it's best for

Client work where the client wants to edit later without breaking things. Solid e-commerce and booking.

Pricing (as of 2026)

Quick-start walkthrough

1. Sign up at wixstudio.com (different from classic wix.com).

1. Pick a template or blank canvas, learn the responsive grid (CSS Grid like system).

1. Drag elements, set breakpoints at top bar (Desktop / Tablet / Mobile).

1. Animations panel → pick preset or build custom timeline.

1. Publish; upgrade for your own domain when ready.

I'm building a Wix Studio site for a yoga studio.
Deliver a full page-by-page blueprint:
- 5 pages with section order
- Breakpoint-specific content rules (what's hidden on mobile)
- Animation recipe per section (entrance + scroll)
- CMS collection proposal for 'Classes' + 'Teachers'

🎯 Quest pack

What it's best for

Offering $200 website packages to local businesses (plumbers, cafés, gyms). Turn-key, ugly-proof.

Pricing (as of 2026)

Quick-start walkthrough

1. durable.co → 'Start' → answer 2 questions (industry, location).

1. Durable generates a full site in ~30 seconds.

1. Edit text inline. Change images with its image library.

1. Add pages from the left menu.

1. Publish; Durable handles domain + email in the dashboard.

Rewrite this generic homepage copy for a local business in a warm,
confident, specific voice. Keep it short. Remove buzzwords.
Inject 3 concrete proof points (years, clients, credentials).

---
[PASTE DURABLE'S OUTPUT HERE]
---

🎯 Quest pack

What it's best for

A jaw-dropping 3D hero that loads fast and responds to scroll or mouse.

Pricing (as of 2026)

Quick-start walkthrough

1. spline.design → New file.

1. Drag a shape from the left panel (cube, sphere, plane).

1. Use the right panel to set materials (matte, glass, chrome).

1. Add a 'Mouse' or 'Scroll' event from the Events tab, tie it to rotation or position.

1. Export → 'Public URL' for iframe, or 'React' for a copy-paste component.

I'm designing a 3D hero for a premium coffee brand 'Halo Coffee'.

Give me:
1) Camera composition (angle, focal length feel)
2) Lighting setup (hex colours, positions)
3) 3 object ideas (not literal beans, think metaphor)
4) Mouse-controlled interaction that feels premium
5) A scroll-linked animation idea
Keep it minimalist and high-end, not cartoonish.

🎯 Quest pack

What it's best for

Animated characters, buttons, onboarding scenes, animations that change based on user actions.

Pricing (as of 2026)

Quick-start walkthrough

1. rive.app → New file → Artboard size (mobile by default).

1. Draw with vector tools (similar to Figma).

1. Create a Timeline animation (keyframe positions, rotation, scale).

1. Add a State Machine, link states with triggers (hover, click).

1. Export .riv → load with rive-react in your site.

Design the state machine for an animated Rive button with 4 states:
idle, hover, loading, success.

Deliver:
- State names + trigger names (boolean/number)
- Transition rules (which state leads to which, on what condition)
- Timeline for each state (what animates, duration, easing)
- Example runtime code (React) that drives the states from a form submit

🎯 Quest pack

What it's best for

Need a quick animated icon, loader, or illustration without designing it yourself.

Pricing (as of 2026)

Quick-start walkthrough

1. lottiefiles.com → search (e.g. 'confetti', 'rocket', 'success tick').

1. Preview, pick one, click 'Edit colours' to match your brand.

1. Export → Lottie JSON or dotLottie (smaller).

1. Embed via <lottie-player> web component or lottie-react npm package.

1. Control play/pause with standard JS.

Rather than a prompt, here's a search-phrase cheat sheet:
- 'subtle hover icon', for nav items
- 'page loader minimal', for loading states
- 'success tick morph', for form submit success
- 'particles ambient loop', for hero background
- 'scroll-down chevron', for hero bottom cue

🎯 Quest pack

What it's best for

Daily thinking: writing copy, outlining, spitballing designs, quick HTML/CSS/JS, image prompts.

Pricing (as of 2026)

Quick-start walkthrough

1. chatgpt.com, sign in.

1. Start with the 5-line prompt formula from Level 0.

1. Use 'Canvas' for long documents, 'Voice' for brainstorms on walks.

1. Create custom GPTs for repeated jobs ('Modvia Copy GPT').

1. Use 'image' tool for quick mood boards and OG images.

You are my senior creative director at a boutique web studio.

Today's job: come up with 10 radically different landing-page hero concepts
for a new AI writing tool called 'Quill'. I want one-line headline, one-line
sub, and the core visual gimmick for each concept.

Constraints:
- No more than 9 words in the headline.
- Each concept feels distinct (don't just swap adjectives).
- Include at least one concept with 3D, one with typography as hero,
  and one with a no-image all-gradient hero.

🎯 Quest pack

What it's best for

Coding hard problems, architecting sites, long documents, anything where taste + depth matter more than speed.

Pricing (as of 2026)

Quick-start walkthrough

1. claude.ai, Google sign-in.

1. Use 'Projects' to scope conversations (one Project per website).

1. Drag files into chat, PDFs, Figma exports, CSVs.

1. 'Artifacts' appear on the right for code/HTML, edit live.

1. Enable MCP connectors (Linear, Notion, GitHub) for real tool calls.

I'm designing an animated site for an AI education brand called 'Modvia'.

Think through:
1) The 3 design directions that could work for this audience (aspiring
   designers wanting to learn AI). Rank them and defend the winner.
2) The 5 most convincing proof-of-skill moments to put on the homepage,
   and what each one should visually look like.
3) The single strongest CTA copy for 'join the community'.
4) Finally, write the production HTML+CSS for the hero, using only
   Tailwind + GSAP. No external dependencies.

🎯 Quest pack

What it's best for

Free access to one of the best models + the best image/video understanding on the market.

Pricing (as of 2026)

Quick-start walkthrough

1. aistudio.google.com → Google sign-in.

1. Pick Gemini 2.5 Pro from the model dropdown.

1. Drop a reference image, PDF, or even a 10-minute video into the prompt.

1. Use 'Get code' button to instantly have the API snippet if you want to build on it.

1. Save chats in 'Prompt Gallery'.

I'm attaching 3 screenshots of websites I love.

Extract for me:
1) Shared design patterns (colour, type, grid, motion feel)
2) Specific CSS techniques visible (glassmorphism, gradients, etc.)
3) How I could combine these patterns into a unique hero section
4) Tailwind classes that approximate the look

Bonus: suggest 2 ways to make it MORE distinctive, not less.

🎯 Quest pack

What it's best for

Real development work where you want the AI to plan, edit multiple files, and run things itself.

Pricing (as of 2026)

Quick-start walkthrough

1. antigravity.google, install the desktop app (macOS / Windows / Linux).

1. Open any folder on your machine as a workspace.

1. Invoke the agent with ⌘K, give it a task, watch it plan and execute.

1. Approve / reject file changes per hunk.

1. Use it alongside git, commit after each accepted change.

In this Next.js project, build a dark-mode toggle that:
- Uses next-themes library (install if missing)
- Adds a sun/moon icon button to the navbar
- Persists choice in localStorage and respects system preference
- Works without flashing on page load

When done, run the dev server and confirm it compiles.

🎯 Quest pack

What it's best for

Any real-world project. Pair-programming with Claude Opus or GPT-5 right in your editor.

Pricing (as of 2026)

Quick-start walkthrough

1. cursor.com → download for your OS.

1. Open a project folder.

1. ⌘K = inline edit, ⌘L = chat panel, ⌘I = Composer mode (multi-file agent).

1. Switch models (Claude Opus, GPT-5, Gemini) in the bottom-right.

1. Use /rules in chat to see your project rules file (.cursor/rules/).

(Inside Cursor's Composer), In this Next.js 14 project, add a newsletter signup flow:
- Create components/NewsletterForm.tsx (email input, subscribe button)
- POST /api/subscribe route that writes to Supabase 'subscribers' table
- Client-side toast on success/error (sonner)
- Add the form to the footer of app/layout.tsx
- Write a test with vitest that mocks Supabase

Don't install anything that isn't already in package.json unless necessary.

🎯 Quest pack

What it's best for

When you want full control, every extension under the sun, and zero lock-in.

Pricing (as of 2026)

Quick-start walkthrough

1. code.visualstudio.com → download + install.

1. Install must-have extensions: Prettier, ESLint, Tailwind CSS IntelliSense, GitLens, Error Lens.

1. For AI: install GitHub Copilot OR the Continue extension (open source, any model).

1. ⌘⇧P opens the command palette, learn to live there.

1. ⌃` opens the integrated terminal.

(In Copilot Chat or Continue), /explain
(select a function in your file, then press enter)

/doc
(same, generates JSDoc)

/test
(generates a test file for the selected function)

🎯 Quest pack

What it's best for

Skipping the 'what sections should this site have' question. Relume answers it in 10 seconds.

Pricing (as of 2026)

Quick-start walkthrough

1. relume.io → New sitemap → describe the company in 2 sentences.

1. Relume outputs a visual sitemap with every page + section.

1. Click 'Generate wireframes', picks block layouts from its library.

1. Export to Figma (as editable file) or Webflow (as live site).

1. Customise from there.

Write a Relume sitemap brief for: a mid-range Italian restaurant
with delivery, catering, and a 40-seat dining room in Porto.

Deliver:
- 2-sentence company description (to paste into Relume)
- The 6 pages they actually need (no fluff)
- For each page, 5 sections in recommended order
- Tone of voice: warm, classic, unpretentious

🎯 Quest pack

What it's best for

Unique moving backgrounds, product videos, hero loops, social cuts, all generated with prompts.

Pricing (as of 2026)

Quick-start walkthrough

1. runwayml.com → sign up → open Gen-4.

1. Text-to-video, image-to-video, or drag a start frame.

1. Prompt with camera moves ('slow dolly in, cinematic lighting').

1. Generate, select best take, download MP4 (or export 4K on Pro).

1. Compress with HandBrake before using on web (keep under 2MB).

Write a Runway Gen-4 video prompt for a hero loop on a coffee brand site.

Requirements:
- 4 seconds, seamless loop
- Describe camera move (dolly / orbit / crane)
- Describe lighting (moody key light, low fill, golden spills)
- Describe subject motion and timing
- Describe grain, depth-of-field, colour grade
- End with 'cinematic, 35mm, filmic'

🎯 Quest pack

What it's best for

Adding narration to explainer videos, hero clips, podcast intros, or cloning your own voice.

Pricing (as of 2026)

Quick-start walkthrough

1. elevenlabs.io → sign up.

1. Pick a voice from the library (or clone your own on Creator).

1. Paste your script, adjust stability/style sliders.

1. Generate → download MP3.

1. Compress for web (M4A is smaller than MP3 usually).

Write a 45-second voiceover script for a hero explainer video
about Modvia, a community teaching aspiring designers to build
animated AI websites.

Tone: confident, intimate, a friend on a walk.
Pace: ~140 words.
Structure: hook → problem → shift → promise → CTA.
Include one pause beat (–) and one emphasis word (in ALL CAPS).

🎯 Quest pack

💰 Pricing cheat sheet (when to pay)

Almost everything here has a free tier. Here's the shortlist of paid subscriptions that earn their money back fast.

Lesson 1 • The taste rules, when to animate

Most beginner sites look cheap because every element is animated. Pros do the opposite: 80% stillness, 20% motion in the right places. Memorise these rules.

Lesson 2 • The 10 motion words every pro uses

Lesson 3 • The four languages of web motion

When you animate on the web, you are choosing one of four tools. They each have a sweet spot.

Lesson 4 • CSS, the 1+1 of motion

Start here. Every animation learner should be fluent in basic CSS transitions before touching a library.

Give me 5 CSS class snippets using transition-only (no JS):

1) A button that lifts 2px and shadows on hover
2) A card that scales 1.02 and reveals a border-glow on hover
3) A nav link with an underline that slides in from the left
4) An image that zooms 1.05 inside a fixed-size frame on hover
5) A theme-toggle icon that rotates 180° on click (with .is-dark class)

Use cubic-bezier(0.22, 1, 0.36, 1) and 300ms for all of them.
Tailwind-compatible: give me both raw CSS AND Tailwind classes where possible.

Lesson 5 • Framer Motion, animations for React

If you're using Lovable, v0, Bolt, or Cursor, you're probably in React. Framer Motion is THE library for animating React components.

I'm using Next.js 14 + Tailwind + Framer Motion.

Generate these 5 components as .tsx files, each under 40 lines:

1) <FadeUp>, wraps children, fades + slides up on viewport enter, stagger by index via parent
2) <NumberCounter value={1234} />, counts up when in view, 1.5s, ease-out
3) <MagneticButton>, button that pulls slightly toward the cursor on hover
4) <PageTransition>, layout.tsx wrapper that fades between routes
5) <TextReveal>, splits string into words, fades each word up with 50ms stagger

Respect prefers-reduced-motion in all of them.

Lesson 6 • GSAP + ScrollTrigger, the scroll cinema toolkit

GSAP is how you make sites like Apple's product pages. It became fully free in 2024. There's no reason not to learn it.

The key concept is the TIMELINE. You chain animations one after another (or with relative offsets). ScrollTrigger then maps that timeline to the scroll position.

Next.js 14 project, I want a 'scroll cinema' landing page hero.
Build me:

1) Section 1, pinned hero. As the user scrolls, a headline splits apart,
   a background gradient shifts hue, and a 3D-ish text depth grows.

2) Section 2, horizontal scroll. Three panels move right-to-left as the
   user scrolls down. Each panel has a headline + image.

3) Section 3, stacked pins. Three text blocks pin one after the other,
   each fading the previous out.

Use GSAP + ScrollTrigger. Clean up on unmount. Respect reduced motion.
Keep all three as separate components I can drop into a page.

Lesson 7 • Lottie & Rive, drop-in animation files

🎯 Level 2 Quest Pack

Each quest is one specific motion pattern. Do them in order. Each one feels like 1+1, until you realise you now know the whole language.

Lesson 1 • The mental model, export → bridge → consume

Every integration has three moves. Memorise them:

When an integration feels impossible, ask: what's the export format? Every pro tool exports something universal.

Lesson 2 • Export cheat sheet (bookmark this)

Lesson 3 • Integration walkthrough: Spline → Lovable

Let's do the most-requested chain in painful step-by-step detail. A 3D hero made in Spline, rendered inside an app built by Lovable.

Add a Spline 3D scene as the hero background.

- Install @splinetool/react-spline and @splinetool/runtime
- Public Spline URL: [PASTE YOUR SPLINE URL HERE]
- Wrap it in a div that is 100vh tall
- Overlay on top: a headline, a sub, and a CTA (text content stays crisp)
- Add a subtle dark gradient overlay between the 3D and the text
- On mobile (<768px), replace the 3D with a static poster image for perf
- Lazy-load the Spline component (dynamic import, ssr: false)
- Show a minimal loader while the scene is initialising

Lesson 4 • Integration walkthrough: Figma → Framer

This one is borderline magic, Framer lets you paste Figma frames and get an editable site.

Lesson 5 • Integration walkthrough: Lottie & Rive → Webflow

I uploaded my Rive file to my own CDN at: [URL].

Give me the exact Webflow custom embed code:
- A <canvas> with id='rive-hero', width/height set
- Inline <script type='module'> that imports rive from jsDelivr
- Creates a new Rive({ src, canvas, stateMachines: ['main'], autoplay: true })
- Adds a click listener on the canvas that fires a boolean state input 'clicked'
- Respects window.matchMedia('(prefers-reduced-motion: reduce)')

Keep total code under 25 lines.

Lesson 6 • Integration walkthrough: v0/Lovable → Cursor for power edits

AI builders are great for drafts. The moment you need a pixel-perfect tweak, move the code into Cursor.

🎯 Level 3 Quest Pack

Pick at least three. Gold quests here are the most portfolio-worthy pieces in the course.

Step 0 • Plan before you prompt

15 minutes of planning saves 3 hours of redoing. Write these four paragraphs before touching a tool.

Step 1 • Sitemap & sections

One page, 7 sections, in this order:

Step 2 • Build the 3D hero asset in Spline

Design a 3D hero scene for Halo Coffee in Spline.
Deliver:
1) Camera: angle, focal length feel, position coordinates if possible
2) One hero object (not a photo-real coffee bag, a symbolic 3D form)
3) Lighting: key + fill + rim, with hex colour suggestions (warm creams and deep navy)
4) A mouse-parallax interaction that doesn't nauseate
5) A scroll-linked movement (object rotates 30° as user scrolls first 100vh)
6) Material hints: matte ceramic, subtle grain, not glossy
Bias: minimalist, premium, not cartoonish.

Step 3 • Build the site in Lovable

One mega-prompt first, then refine in chat. Copy this whole block into Lovable:

Build a 1-page marketing site for 'Halo Coffee', a premium single-origin espresso subscription.

Stack: Next.js 14 (App Router), TypeScript, Tailwind, shadcn/ui, Framer Motion.

Design system:
- Dark theme: #0A0908 background, #F2E3C2 cream text accents
- Type: 'Fraunces' for display, 'Inter' for body
- Cinematic, generous whitespace, subtle grain overlay on hero
- All motion uses cubic-bezier(0.22, 1, 0.36, 1), 600ms default

Install and use @splinetool/react-spline.
Hero uses Spline URL: [PASTE YOUR SPLINE URL HERE]
Overlay a dark gradient on hero so text stays readable.

Sections in order:
1) Hero, full viewport. Spline on the right half (desktop), behind text (mobile). Headline 'Espresso worth waking up for.' Sub 'Single-origin beans from small roasters, delivered monthly.' CTA 'Start tasting, €22/mo'
2) Problem, centered heading 'Supermarket espresso is a compromise.' One paragraph. Fades in on scroll.
3) How it works, 3 cards stagger in on scroll. (1) Taste profile quiz, (2) We ship fresh-roasted, (3) Pause anytime.
4) This month, card with roaster name, country (show on a subtle map/dot), tasting notes list.
5) Social proof, 3 testimonial cards, then a press logo row.
6) Pricing, one card, €22/mo, includes list, big CTA.
7) FAQ (4 questions, accordion) + final CTA block.

Responsive. Mobile: hide the 3D scene, show a poster image instead.
Accessibility: respect prefers-reduced-motion. Alt text everywhere.
Don't use stock photos, use CSS gradients and SVG shapes if needed.

When done, add a /confirmation page and a Supabase table 'subscribers' (email, plan, created_at).
The CTA posts to /api/subscribe and writes to Supabase.

Step 4 • Polish pass, the 10% that separates pro from intern

Polish pass for Halo Coffee homepage.

Do these in order:
1) Rewrite every CTA (button, hero, pricing, final) with a verb + specificity. No 'Learn more' or 'Get started'.
2) Rewrite FAQ questions from a customer's voice, not ours. Short and real.
3) Write a 404 page line, witty, on-brand, not cringe.
4) Write the OG image card copy (≤10 words) that would make someone click.
Return as a single markdown table.

Step 5 • Ship it, free URL today, custom domain tomorrow

From Lovable, click 'Publish' → you get a halo-coffee-xxx.lovable.app URL.

For a real domain (e.g. halocoffee.co), we move to Vercel in Level 6. For now, share the lovable.app URL everywhere, this is enough to add to your portfolio.

🎯 Level 4 Quest Pack, The Halo Build

This level is one continuous quest in three tiers. Finish all three and you have a portfolio piece.

Technique 1 • Custom cursor

A dot or ring that follows the mouse, grows on links, shrinks on text. Small detail, huge brand feeling.

Build me a <SmoothCursor /> component for Next.js 14 + Tailwind.

Behaviour:
- Hide the native cursor only on desktop (keep native on touch devices)
- Render a 32px ring that lags the mouse with a spring (~200 stiffness)
- Render a 6px dot that follows instantly
- On hover over [data-cursor='grow'], ring scales to 72px and dims
- On hover over text inputs, cursor becomes a 2px vertical bar
- Respect prefers-reduced-motion (fallback to native cursor)
- All styles in Tailwind; use motion values (no layout thrash)

Technique 2 • Page transitions that feel native

A soft fade + slight slide between routes. Makes an SPA feel like a film cut instead of a whiplash.

Next.js 14 App Router + Framer Motion. Build a <PageTransition> that:

- Wraps children in AnimatePresence with mode='wait'
- Uses usePathname as key
- Fades + slides up 16px on enter, fades + slides down 16px on exit
- Duration 300ms with ease [0.22, 1, 0.36, 1]
- Lives in app/template.tsx so it runs on every route change
- Respects prefers-reduced-motion (fallback to instant)

Technique 3 • Magnetic & morph buttons

Buttons that slightly lean toward the cursor or morph shape on click. Signature Apple move.

Build a <MagneticButton> component:
- Child translates toward cursor with a damping factor of 0.3
- Resets on mouseleave with a spring
- Boundary: max 10px translation in any direction
- Respects prefers-reduced-motion
- Uses pointer events (works on stylus too, not just mouse)

Technique 4 • Split-text reveals

Headlines that split by word or letter and stagger into view. Your single most-reused hero move.

Build a <SplitReveal> Framer Motion component.

API: <SplitReveal text='Espresso worth waking up for.' stagger={50} by='word' />
- 'by' accepts 'word' | 'char' | 'line'
- Each piece fades + slides up 12px
- Triggers on viewport enter, once
- Respects prefers-reduced-motion
- Works with Fraunces and Inter without breaking kerning

Technique 5 • WebGL scroll hero (Three.js)

When Spline isn't enough, custom GLSL shaders and Three.js. This is the deep end. Do the Silver quest first.

Build a Next.js hero using @react-three/fiber + @react-three/drei.

Scene:
- Dark scene, single floating torus in warm gold material
- OrbitControls disabled, scene rotates 30° based on scroll progress
- Mouse parallax, camera offsets up to 20px
- Post-processing: subtle bloom + film grain
- Fallback: on low-end device (navigator.hardwareConcurrency < 4), render a static poster image

Make it a single Hero.tsx file, dynamic-imported with ssr:false.

Technique 6 • Scroll-linked image sequence (Apple-style)

A scroll drives frame-by-frame playback of 60 images. What Apple does for their iPhone reveals.

Technique 7 • Sound / rhythm reactive elements

Optional, very niche, very memorable. A hero ring or waveform that pulses to an audio track.

Build a React component <AudioRing audioSrc='/bg.mp3' />:
- SVG circle 200px radius
- Uses Web Audio API AnalyserNode (fftSize 256)
- Scale and hue shift the ring based on average frequency amplitude
- Play/pause button inside the ring
- Muted by default, gesture-gated autoplay policies respected
- Respects prefers-reduced-motion (still plays audio, no animation)

Lesson 1 • Core Web Vitals, Google's speed report card

Google ranks sites partly on three measurements. Know them, beat them.

Check yours for free at pagespeed.web.dev. Lighthouse (in Chrome DevTools) gives the same numbers locally.

Lesson 2 • The four weight villains

Here's my Lighthouse mobile report and my Network tab summary.
[PASTE LIGHTHOUSE OUTPUT]
[PASTE NETWORK WATERFALL SUMMARY]

Give me:
1) The single biggest LCP bottleneck and the 1-line fix
2) The 3 biggest JS bundles and whether each can be lazy-loaded
3) Any font-related issues with fix commands
4) Expected gain per fix, in milliseconds
Rank in priority order. Don't suggest anything that gains < 100ms.

Lesson 3 • Deploy to Vercel, the click-by-click walkthrough

Vercel is the easiest free host for Next.js / React / Framer-exported code. Here's the literal sequence:

Lesson 4 • Connect a custom domain (step-by-step)

Going from halo-coffee-xyz.vercel.app to halocoffee.co takes ~10 minutes + $12/year.

Lesson 5 • Basic SEO, be findable

Write SEO metadata for Halo Coffee's homepage.
Brand voice: cinematic, warm, specific.
Primary keyword: 'specialty coffee subscription'.
Secondary: 'single origin espresso delivery'.

Deliver:
- <title> (≤60 chars)
- meta description (≤155 chars)
- og:title + og:description + twitter:description variants
- Suggested og:image concept (what it should show, text on it)
- JSON-LD schema for 'Organization' type

Lesson 6 • Analytics, know what works

Start with one. Don't install four heatmaps. Observe for 2 weeks before changing anything.

🎯 Level 6 Quest Pack

Part 1 • Pick your target

Pick ONE of these three by end of today:

Part 2 • The discovery call (5 questions)

Don't build in the dark. Either (a) call or email the owner for 15 minutes, or (b) answer these yourself as 'the brief' for a concept piece.

1. What does a dream customer look like? Describe one in 2 sentences.

1. What does the customer need to see to become a regular? (Menu? Vibe? Team? Pricing?)

1. What do you want them to do on the site, call, book, order, visit?

1. What are 3 competitors' sites you like and 3 you hate? Why?

1. What are your 'must-have's on the site, and what's off-limits?

Part 3 • Build plan, 6 working sessions of ~2 hours

Part 4 • The pitch, email template you can send today

Write a 130-word cold email from me, a freelance animated-web designer,
to the owner of [BUSINESS NAME], a [BUSINESS TYPE] in [CITY].

Context:
- I built a concept redesign of their site as a showcase.
- Video Loom link: [LOOM URL]
- Portfolio: [PORTFOLIO URL]
- Offer: fixed-fee €690 launch package (or whatever you set).

Rules:
- Subject line under 45 chars, no clickbait.
- First sentence shows I actually visited their place or site.
- No 'I hope this email finds you well.'
- One clear CTA at the end, either reply or book a 15-min call.
- Sign-off warm, not corporate.

Part 5 • Follow-ups (the part most people skip)

A single email has a 5–10% reply rate. A sequence of 3 has 30%. Space them 4 days apart.

🏆 The Boss Battle, single quest, three tiers

Pricing, what to charge, without guessing

Four pricing models. Pick one per engagement. Most beginners should start with fixed-fee packages.

The 1-page proposal template

Write a 1-page fixed-fee proposal for [CLIENT NAME], a [BUSINESS TYPE].

Structure:
1) Summary (2 sentences)
2) What I'll build (bulleted, 5–8 lines)
3) Timeline (3 phases with dates)
4) What's included / what's not (two short lists)
5) Price + payment terms (50% upfront, 50% at launch)
6) Next step (1 sentence)

Tone: confident, clear, human. No agency fluff. Under 450 words.
Don't use: 'synergy', 'solutions', 'unleash', 'elevate'.

Contracts, the two paragraphs you must include

Don't use a 20-page legal template for a €500 job. Use a 1-page agreement with these two paragraphs:

Email it. Get 'I agree to these terms, please start' as a reply before you write one line of code.

The 8 Modvia Community Rules

The community is the reason the course works. These eight rules keep it that way.

🎯 Master Quests

Final words

If you've finished the Levels and all the Master Quests, you have: a vocabulary, a toolkit, three projects, a pricing sheet, a proposal template, a deployed portfolio, and, if you pushed through Level 7, a paying client.

That's not a certificate. That's a career.

Keep shipping. Keep helping one person a week. Keep reinvesting 10% of every cheque into the tools that made it possible.

, Modvia Academy