Command Palette

Search for a command to run...

Hectal
Shots in this scene
SCENE 00Start Here: Motion, Your Tools and the Plan
  1. 0.1What Web Animation Is
  2. 0.2What You Will Learn and What You Get
  3. 0.3The Editor and the Motion Timeline
  4. 0.4Animating on Your Own Computer
  5. 0.5The lumen-motion Project
  6. 0.6Build: The Still Launch Page
→ scene 01 · How Motion Works▦ the storyboard
SHOT 0.4Beginner ~20 min · shot 4 of 6

Animating on Your Own Computer

In one line

To build the launch page you need Node.js 24 LTS, a terminal and a code editor. One command creates a Vite project, another starts it, and Chrome's DevTools give you an Animations panel and a Rendering tab to inspect motion on any page.

0/6 · 0%

Think of it like this

A cooking class lends you a ready kitchen for the first lessons. To cook at home you need your own stove, pans and knives, set up once. The editor on this page is the class kitchen; Node.js, a terminal and a code editor are your home kitchen.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Node.js
A program that runs JavaScript outside the browser. Tools like Vite are written in JavaScript and run on Node.
npm
Node's package manager: it downloads libraries (packages) such as Vite or GSAP into your project's node_modules folder.
terminal
A window where you type commands to the computer, such as PowerShell on Windows or Terminal on macOS.
Vite
A development tool that serves your project locally, reloads the page when you save, and builds an optimised version to publish.
dev server
A small web server on your own computer (at localhost) that shows your project while you work on it.
DevTools
The browser's built-in tools for inspecting a page. Open them with F12. They include panels for animations, performance and rendering.

Step by step

01Check that Node is installed

Open a new terminal and ask Node and npm for their versions. Any v24 is right; the npm number can differ.

terminal
$ node -v
── expected output ──
v24.14.1

02Create the project

Go to the folder where you keep your projects (for example cd Documents) and run the command below. It downloads the create-vite tool and copies a starter project into a new folder.

If it asks "Install with npm and start now?", answer No: you will run the steps yourself so you see each one.

terminal
$ npm create vite@latest lumen-motion -- --template vanilla
── expected output ──
create-vite v9.3.0
 
│
◇ Scaffolding project in C:\Users\you\Documents\lumen-motion...
│
└ Done. Now run:
 
cd lumen-motion
npm install
npm run dev
Output captured from a real run on 2026-10-19 (the folder path is shortened). A newer create-vite may word it slightly differently.

03Install and start

npm install downloads Vite and the few packages it needs. npm run dev starts the dev server.

terminal
$ cd lumen-motion
npm install
npm run dev
── expected output ──
added 15 packages, and audited 16 packages in 7s
 
8 packages are looking for funding
run `npm fund` for details
 
found 0 vulnerabilities
 
> lumen-motion@0.0.0 dev
> vite
 
VITE v8.3.4 ready in 313 ms
 
➜ Local: http://localhost:5173/
➜ Network: use --host to expose

04Open it, then open DevTools

Open http://localhost:5173/ in Chrome. You see Vite's starter page. Press F12, open ⋮ → More tools → Animations, and keep it open while you work: when the page animates, the panel records it.

Press Ctrl+C in the terminal when you want to stop the dev server.

05If a command fails

On Windows PowerShell, a missing Node looks like the first message below; in Command Prompt it says 'node' is not recognized as an internal or external command; on Linux and macOS the shell says command not found: node (bash writes node: command not found). Install Node, then open a new terminal.

A busy port is not an error: Vite picks the next free one.

terminal
$ node -v
── expected output ──
node : The term 'node' is not recognized as the name of a cmdlet, function, script file, or operable program. Check
the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ node -v
+ ~~~~
+ CategoryInfo : ObjectNotFound: (node:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Captured from a real Windows PowerShell run with Node removed from the path (the line breaks depend on your window width). And when port 5173 is already in use, npm run dev prints: Port 5173 is in use, trying another one... then ➜ Local: http://localhost:5174/

06If Node is too old

Vite 8 and its project creator need Node 20.19 or newer (or 22.12 or newer). On an older Node, npm create vite@latest stops with a SyntaxError as soon as it starts. The npm that came with that Node is old too, so the fix is the same for both: install Node 24 LTS from nodejs.org, open a new terminal, and check node -v and npm -v again.

terminal
$ npm create vite@latest lumen-motion -- --template vanilla
── expected output ──
SyntaxError: The requested module 'node:util' does not provide an export named 'styleText'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
at async ModuleLoader.import (node:internal/modules/esm/loader:337:24)
at async loadESM (node:internal/process/esm_loader:34:7)
at async handleMainPromise (node:internal/modules/run_main:106:12)
 
Node.js v18.20.8
npm error code 1
npm error command failed
Captured on 2026-10-24 by running create-vite 9.3.1 on Node 18.20.8. A long line of the tool's own code is printed above the error and is left out here. The versions in your message will differ.

Try it yourself

  1. 1

    Check your own browser's support

    Press Run on "What does this browser support?". On a current Chrome or Edge every line says yes, except possibly the last (it reports your reduced-motion setting). On older Safari or Firefox versions, scroll-driven animations may say no: Phase 12 shows what those browsers see instead.

  2. 2

    Emulate reduced motion in DevTools

    Open the example in a new tab, open DevTools → More tools → Rendering, and set *Emulate CSS media feature prefers-reduced-motion* to reduce. Run the support example again: the last line now says yes. This is how you test reduced motion on your own projects without changing your system settings; on this page, the timeline's Reduced motion switch does the same for one example.

Code & diagrams

What does this browser support?

Run it in each browser you test with. The answers depend on the browser, so there is no fixed output. Every "no" is something the course shows a fallback for.

Press Run to see the page.
00:00.000
animations
0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.
Something to inspect in DevTools

Open DevTools → Animations and press the panel's Replay. You see five animations, each 90 ms later than the one before: the panel shows the same delays this course's timeline shows. This example runs inside a sandboxed frame on this page. If the panel stays empty here (not checked in every browser), paste the HTML and CSS into your own lumen-motion page from Topic 0.6: the panel records animations on the page you inspect.

Press Run to see the page.
00:00.000
animations
0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Start a second dev server

With npm run dev already running, open a second terminal in the same folder and run npm run dev again.

terminal
$ npm run dev (a second time)
── what you'll see ──
Port 5173 is in use, trying another one...
 
VITE v8.3.4 ready in 273 ms
 
➜ Local: http://localhost:5174/
➜ Network: use --host to expose

Myth vs fact

Myth

You need a framework like React to animate a website.

Fact

Plain HTML, CSS and JavaScript do everything up to Phase 14. The vanilla Vite template is all the project needs; React arrives only in Phase 15, for the configurator.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

  • ▸

    npm create vite@latest always fetches the newest create-vite. For a team project, pin versions in package.json (remove the ^) so everyone gets the same Vite; the course's final build does this.

  • ▸

    DevTools' Animations panel groups animations that start together and can scrub them; it records CSS animations, CSS transitions and Web Animations API animations, but not JavaScript loops or GSAP tweens, which do not use the browser's animation engine. The Performance panel (Phase 6) sees everything.

Remember this

  1. 1

    The problem this solves: the examples on this page are small and run in a sandbox. A real site has several files, imports libraries from npm, reloads when you save and builds an optimised version to publish. For that you need a project on your own computer, and the standard tool for small projects is Vite (French for "fast", said "veet").

  2. 2

    What to install. Node.js 24 LTS from nodejs.org (LTS means long-term support: the version that gets fixes for years). It includes npm, the tool that downloads packages. Vite 8 needs Node 20.19 or newer, or 22.12 or newer; 24 is comfortably above both. A code editor: Visual Studio Code is free and common, but any editor works. And Chrome or Edge for their DevTools (Firefox and Safari have similar tools with other names).

  3. 3

    Opening a terminal. A terminal is a window where you type commands. On Windows 11 press the Windows key, type Terminal and press Enter (it opens PowerShell). On macOS press Cmd+Space, type Terminal and press Enter. On Linux (Ubuntu and most desktops) press Ctrl+Alt+T. Type node -v and press Enter: you should see a version starting v24.

  4. 4

    Creating and starting the project. npm create vite@latest lumen-motion -- --template vanilla creates a folder lumen-motion with a plain HTML, CSS and JavaScript project ("vanilla" means no framework). If it asks "Install with npm and start now?", answer No for now. Then cd lumen-motion, npm install (downloads Vite into node_modules) and npm run dev (starts a local web server that reloads the page when you save a file). Open the address it prints, usually http://localhost:5173/.

  5. 5

    DevTools for motion. In Chrome, press F12 (or Ctrl+Shift+I, or Cmd+Option+I on a Mac) to open DevTools. Open the menu (⋮) → More tools → Animations: it records every CSS and Web Animations API animation on the page, lets you replay them at 25% or 10% speed and drag their timing. More tools → Rendering has *Paint flashing* (green boxes where the browser repaints), *Layer borders*, a frame-rate meter, and *Emulate CSS media feature prefers-reduced-motion*, which lets you test reduced motion without changing your system settings.

  6. 6

    When it fails. If the terminal says node is not recognized or command not found, Node is not installed or the terminal was opened before installing: close it, open a new one, and try again. If port 5173 is busy (another dev server is running), Vite says so and uses the next port, such as 5174: use the address it prints. If npm install fails behind a company network, the network is blocking the npm registry: ask for its proxy settings, or work on this page until you are on another network.

Explain it without notes

01

What does each of the three commands npm create vite@latest …, npm install and npm run dev do?

02

How can you test a page's reduced-motion version without changing your system settings?

Practice

01

Create the lumen-motion project on your computer, start it, and change the text of the <h1> in index.html. What happens in the browser when you save?

02

In your project's src/style.css, add a transition to the starter page's button, then find it in DevTools' Animations panel.

Done when you can

  • You have Node.js 24 LTS and can open a terminal

  • You can create, install and start a Vite project

  • You can open DevTools' Animations panel and Rendering tab

  • You can fix "node not found", a busy port and a Node that is too old