Make it look better
Straight answers to the questions that come up every time you make a site: which tool, which file, how smooth, which cursor, and how to make people smile.
Do I need After Effects?
Short answer: usually no. Most website motion (things sliding in, buttons, hovers, scroll effects, cursors) is written in code and runs live in the browser, so it stays sharp and light. Use After Effects or Blender when you need something code can't draw: a character moving, a cinematic loop, a real 3D object.
| You want | Make it in | Export as | AE needed? |
|---|---|---|---|
| Fade, slide, hover, button, scroll effects | Code (ask Claude; see the UI/UX lab) | Nothing to export | No |
| Logo animation, icon animation, small character loop | After Effects + the free LottieFiles / Bodymovin plugin | Lottie (.json or .lottie). Tiny, sharp at any size, can be controlled by scroll | Yes |
| Cinematic background loop (like the 10 free ones) | After Effects, Blender, or AI video | MP4 (H.264), 1280–1920 wide, 6–12 s, no sound, under 3 MB, plus a poster JPG | Yes, or Blender |
| 3D object people can spin | Blender | GLB (with Draco compression), under 5 MB | No, Blender |
| Object turns as you scroll | Blender (render 60–120 frames) | Picture sequence (WEBP), or GLB + three.js | No, Blender |
| Animated thing with see-through background over the page | After Effects | Lottie, or WebM with alpha + HEVC .mov with alpha (for Safari) | Yes |
| Retouched photos | Photoshop / Lightroom | WEBP or AVIF, about 2000 px wide, under 400 KB | No |
Made something? Drop it in the Asset dock and it tells you if it's ready for the web.
Which format is best?
| Thing | Best | Size to aim for | Tip |
|---|---|---|---|
| Photo | WEBP (AVIF even smaller) | 100–400 KB | 2× the size it shows on screen, never bigger. |
| Logo, icon | SVG | under 20 KB | Stays razor sharp. PNG only if it's a painted image. |
| Picture with see-through background | WEBP or PNG | under 500 KB | Crop tight to the object first. |
| Background video | MP4 (H.264) + poster JPG | 1–3 MB | Muted, looping, plays inline. Always add the poster so something shows instantly. |
| Video with alpha | WebM VP9 + HEVC .mov | under 4 MB | Two files because Safari and Chrome disagree. |
| Motion graphics from AE | Lottie (.json / .lottie) | under 300 KB | Avoid AE effects Lottie can't read (blurs, particles). Shapes and text work best. |
| 3D model | GLB (Draco) | 1–5 MB | Bake textures, keep under ~100k triangles for phones. |
| Font | WOFF2 or Google Fonts | under 100 KB a weight | Two families, three weights max. |
| Instagram post | JPG/PNG 1080×1350, MP4 1080×1920 | under 30 MB video | Use the IG mockup to check crops before posting. |
What kind of smooth scrolling?
“Smooth scroll” means the page glides after your wheel instead of jumping. It's done with a small free library called Lenis. The one number that matters is lerp: how fast the page catches up. Try them in the UI/UX lab.
| Site | Feel | Setting | Used in |
|---|---|---|---|
| Film, art, dreamy character | Slow and floaty | lerp 0.06 – 0.085 | The Quiet Orbit, Kumo |
| Portfolio, brand | Smooth | lerp 0.075 – 0.1 | Rin Aoki, Field Office |
| Club night, sport, energetic | Snappy | lerp 0.14 – 0.16 | Submerge |
| Shop, form, long article | Normal browser scroll | no library | (faster and nobody gets annoyed) |
Always switch smooth scroll off when the visitor's device asks for “reduce motion”. All the templates here already do.
What colour should the cursor be?
Rule 1: it must be easy to see on every part of the page. Dark page = light or bright cursor. Light page = near-black or your one accent colour.
Rule 2: use your brand's accent, the same colour as your main button. The cursor then quietly points at “click here”.
Rule 3: if the site is full of photos and video, use a white cursor with mix-blend-mode: difference. It inverts whatever is under it, so it never disappears.
Rule 4: size 8–16 px for a dot, 36–48 px for a ring. Turn it into a word (VIEW, PLAY, DRAG) over things you can click. Hide it on phones.
Ten ways to look expensive
One with character for headlines, one calm one for reading. Big jumps in size between them.
Cheap sites are crowded. Double the space around headlines.
Everything else is neutral. The accent only marks the thing you want clicked.
One great full-width picture beats nine small ones.
Fast start, long landing (expo-out). Nothing bounces unless the brand is playful.
A single wow (hero video, 3D object, giant type) and calm everywhere else.
Timecode on a film site, set times on a club site, coordinates on a portfolio.
Pick one radius (or none) and use it on every card, button and picture.
Film grain, paper, noise at 5–10% opacity takes the plastic look off.
Poster image under the hero video, fonts that load quickly, nothing jumping around while it loads.
Funny stuff to hide in a site
Easter eggs make people screenshot your site. The ones marked LIVE work on this page right now.
Type ↑ ↑ ↓ ↓ ← → ← → B A on your keyboard.
Leave this tab and look at its title.
Type kumo anywhere on this page.
It gets more upset each time.
After 30 seconds without moving, the character closes its eyes. Moving the mouse wakes it with a jump.
The page flips upside down, or the logo starts spinning like a record.
Leave a few stickers on the page people can drag around.
The “page not found” is a tiny game: catch the lost character.
Hold Shift to show handwritten notes over the design.
A light switch “click” when the theme changes (only after a click, never on load).
Free tutorials
Linked, not copied. Green = free, amber = paid but worth knowing. The motionsites video lessons are in the Public library.
Copy a request for Claude
Fill in the blanks and paste. These save a lot of back-and-forth.