Effects You Can Build

This lesson is a catalogue. Every effect listed here is buildable in one Claude Code session. Pick one for your project.

Effect 1: Particle Background (most popular)

What it looks like: thousands of small dots fill the space behind your hero text. They drift slowly as if floating in zero gravity. When you move your mouse the particles nearby react by moving away from or toward the cursor.

The atmosphere it creates: space, technology, data, depth, and a premium feel.

Variations you can use: white particles on a dark background for a classic tech feel, gold particles on a dark charcoal background for a luxury feel, blue particles on a black background for a data or AI feel, and coloured particles that shift hue slowly over time.

When to use it: hero sections, portfolio backgrounds, tech brand pages, and any site that wants to feel high-end without being loud.

Effect 2: Rotating 3D Object

What it looks like: a three-dimensional geometric shape such as a sphere, torus, crystal, or abstract form floats beside or behind your main heading and rotates slowly and continuously. A subtle light source illuminates one side and casts a soft shadow on the other.

The atmosphere it creates: premium, modern, architectural, and considered.

Shape options: a wireframe sphere for a minimalist elegant feel, a solid torus for a modern dynamic feel, a low-poly crystal for an abstract creative feel, an icosahedron for a geometric mathematical feel, and floating rings for an editorial sophisticated feel.

When to use it: personal portfolios, design agencies, product launch pages, and creative brands.

Effect 3: Scroll-Driven 3D Animation

What it looks like: as the user scrolls, 3D elements animate in response. A shape rotates further as you scroll. Text elements slide in with a 3D tilt. Objects scale up as they enter the viewport.

The atmosphere it creates: controlled, premium, storytelling, and guided.

How it works: GSAP's ScrollTrigger library watches how far the user has scrolled and updates the 3D scene accordingly. Zero configuration from your side because it is all handled in the prompt.

When to use it: product showcases, agency sites, case studies, and any page that tells a sequential story.

Effect 4: Interactive Starfield

What it looks like: the entire background is a three-dimensional star field. Stars appear at varying depths creating a sense of infinite space. Moving the mouse subtly shifts the camera perspective as if looking around in space.

The atmosphere it creates: expansive, open, ambitious, and futuristic.

When to use it: SaaS products, AI companies, startup landing pages, and any brand that wants to feel limitless.

Effect 5: CSS 3D Parallax Sections

What it looks like: as the user scrolls, different page elements move at different speeds creating a sense of depth between layers. Closer elements move fast and background elements move slow. Subtle 3D perspective transforms make elements appear to tilt slightly as you scroll.

What makes it different: this effect uses pure CSS and lightweight JavaScript with no Three.js needed. It is the fastest-loading 3D effect available.

When to use it: any site where you want the 3D feel without the performance overhead. Works beautifully on mobile.

Effect 6: Floating 3D Cards

What it looks like: cards on your page appear to float at different heights with subtle shadows beneath them. Hovering over a card causes it to rise slightly in a 3D lift effect. Moving the cursor across a card tilts it gently in the direction of the cursor, which is commonly called a tilt effect.

The atmosphere it creates: layered, interactive, and premium product feel.

When to use it: pricing sections, team sections, service cards, testimonials, and anywhere you have a grid of cards.

Effect 7: Gradient Mesh Background

What it looks like: the background is an organic smoothly animated gradient that shifts slowly. Colours flow into each other with a sense of depth. Sometimes called an aurora effect. No objects, just light and colour in motion.

Implementation: achievable with CSS animations or a simple Three.js plane geometry with shader material.

When to use it: SaaS products, creative tools, and fintech brands. Especially popular for light or white-themed sites.

Which one to choose

For maximum visual impact with a dark background, choose the Particle Background or the Rotating 3D Object.

For a light-themed professional site, choose CSS 3D Parallax or Gradient Mesh.

For an interactive memorable experience, choose the Interactive Starfield or Floating 3D Cards.

For a storytelling page, choose Scroll-Driven 3D Animation.

If you are not sure, build the Particle Background. It is the most universally impressive effect, works on any type of site, and Claude builds it reliably from a clear prompt.

Your action right now

Pick one effect from this list and write it down. The next lessons give you the specific prompts for the most popular choices.