我重建 julianneagu.com，讓訪客走進網站而非滑過

TL;DR: An immersive website uses layered images, motion, and interactive elements to turn passive scrolling into active exploration. I rebuilt julianneagu.com this way, and it loads in 750 KB on phones while staying fully SEO-friendly. This guide walks through what immersive means, how it differs from classic and 3D sites, and when it makes sense for your business.

Most websites get scrolled past in three seconds. I rebuilt my own site so people step into it instead. The immersive version of julianneagu.com uses layered depth, moving water, lights you can switch on, and product scenes you tap through. It feels 3D, but it is not. It is built like a normal web page, so it loads fast and search engines can read every word.

This is what an immersive website is, how it works under the hood, and who it is for. I built the site, so this is written by the person who made it. That is also why it says plainly what it cannot do.

What an immersive website actually is

An immersive website is a site you step into instead of scrolling past. Instead of one long page of blocks, it moves you through a story scene by scene, with depth, motion, and things to tap. Visitors explore rather than skim.

The immersive version of julianneagu.com sits next to a classic version and a full 3D version. You can switch between them with a button at the top. They are three different levels, not three names for the same thing.

What makes it immersive, not just animated:

• Layered depth. The room, the window, the lake, and the sky are separate layers that move at different speeds as you scroll. That movement creates the feeling of depth without a 3D engine.
• Living details. Only the water moves, with ripples, mist, the odd shooting star, and a signature that writes itself. The trees, railings, and dock stay still.
• Things to do. Tap a light to open a product. Open the monolith to see everything at once. Flip a switch to light the room.
• A story, not a list. The page walks from the window, down the stairs, along the dock, to the products, the way of working, and the contact details.

An immersive website uses layered images that move at different speeds, real animated water, lights you switch on, and product scenes you tap through. It feels 3D, but it is not 3D: it is built like a normal web page.

The honest way to describe the immersive style is that it feels 3D but loads like a normal site. If a page needs a camera that flies through a true 3D space, that is the 3D version, which is heavier and needs more from the phone.

Classic vs immersive vs 3D websites

I now run three versions of the same site. They are not interchangeable. Each one is built for a different goal and comes with different trade-offs.

The immersive version loads in approximately 750 KB on phones. That is fast enough for Google's Core Web Vitals, which I covered in detail in my website guide best practices. The classic version is lighter. The 3D version is heavier and needs a stronger device.

A walk through the immersive site, scene by scene

The window and the numbers

A point of light opens into a room with a glass window over a lake. My signature writes itself on the glass. Scroll, and you pass through the window onto the balcony, where the headline appears. Then you move down the stairs as the numbers count up: 1000+ domains, 500+ AI tools, and 300+ apps.

Each number is a line of real HTML text. Search engines can read it. Screen readers can speak it. That is the difference between an immersive site and a video.

The monolith: every light opens a product

Lights float around a tall monolith by the water. Tap one and a card opens for that product. Tap the monolith and it opens up into five product screens at once, so a visitor sees everything I offer in one move, then closes it again with one tap.

This is where the immersive approach does something a classic page cannot. Instead of listing five products in a row, the monolith turns the list into a moment. You tap it. It opens. You remember it.

The same monolith scene works on desktop. The lights are bigger. The tap becomes a click. The layout adjusts, but the experience stays the same.

Switch it on

A dark room with a light switch. Flip it and the room lights up. It is a small moment, but it turns a line of text, "every product starts as an idea in the dark", into something the visitor does with their own finger.

This is the kind of interaction that makes an immersive site worth the effort. A visitor who flips a switch remembers the brand behind it.

How I work, and the contact

Eight stages float over the lake, from finding the gap to launching the product. They slide past as you scroll. The walk ends at the contact section, so the last thing a visitor sees is how to start.

The structure is intentional. The page does not dump everything at once. It walks the visitor through the story, step by step, scene by scene. That is what "immersive" means in practice.

How I built it, in plain words

There is no 3D engine on the immersive page. It is a normal web page with a few tricks.

Custom scene images

Each scene is a set of pictures made for this site: the room, the balcony, the stairs, the dock, the monolith, and the stages over the lake. I drew them in Photoshop, exported them as layered images, and placed them in the page.

Sticky scenes

Each scene stays in place while you scroll. The scroll position moves the layers, the text, and the wipes between scenes. This is what creates the feeling of depth.

The technique is called parallax scrolling. Different layers move at different speeds. The sky moves slower than the lake. The lake moves slower than the dock. Your brain interprets that as depth.

Water that moves on its own

The water is drawn live on a canvas. A mask for each picture marks where the water is, so only the water ripples and everything in front of it stays still.

Here is how it works in code:

``javascript
const canvas = document.getElementById('water-canvas');
const ctx = canvas.getContext('2d');
let animationFrame;

function drawWater() {
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw ripple effect using sine wave
const time = Date.now() * 0.001;
for (let y = 0; y < canvas.height; y += 2) {
const offset = Math.sin(y * 0.05 + time) * 2;
ctx.fillStyle = 'rgba(100, 150, 200, 0.3)';
ctx.fillRect(offset, y, canvas.width, 2);
}

animationFrame = requestAnimationFrame(drawWater);
}

// Stop drawing when off screen
const observer = new IntersectionObserver((entries) => {
if (!entries[0].isIntersecting) {
cancelAnimationFrame(animationFrame);
} else {
drawWater();
}
});

observer.observe(canvas);
``

The water only draws when it is on screen. When you scroll past it, the animation stops. That saves battery and keeps the page fast.

Real text

Headlines and copy are normal HTML text, not words baked into pictures. That means search engines can read them. Google can index them. Screen readers can speak them.

This is the single most important SEO decision in an immersive site. If you bake the text into the images, you lose search traffic. Keep it as HTML, and you keep everything.

For more on how this fits into broader SEO strategy, see my step-by-step SEO best practices guide.

Speed was the rule from the start

Phones get smaller copies of every picture. Images below the screen load only when needed. The moving water stops drawing when it is off screen.

In my tests, the page needs about 750 KB to open on a phone. That is fast enough to pass Google's Core Web Vitals, which measure loading speed, visual stability, and responsiveness.

Here is what that looks like in practice:

• Images: Each scene has a desktop version (1920px wide) and a mobile version (750px wide). The page serves the right one based on screen size.
• Lazy loading: Images below the fold do not load until you scroll near them.
• Canvas optimization: The water animation uses requestAnimationFrame, which syncs with the browser's refresh rate and stops when the tab is not visible.

The immersive version of julianneagu.com requires approximately 750 KB to load on phones, fast enough to pass Google's Core Web Vitals.

Why a business would want an immersive website

People explore instead of skimming. Each scene gives a reason to keep scrolling, so more of the page actually gets seen. A classic page loses half its visitors before they reach the second screen. An immersive page keeps them moving.

It is remembered. A visitor who opens a monolith or switches on a light remembers the brand behind it. Memory is the start of trust, and trust is the start of a sale.

It explains, not just lists. The scene-by-scene format suits a story: who you are, what you make, how you work. A list of features does not stick. A walk through a world does.

It still converts. The basics of a good page still apply: a clear headline, one main action, and an easy way to get in touch. An immersive site keeps every one of them. I walk through the full conversion framework in my guide to landing page best practices.

When an immersive website makes sense

An immersive website is not for everyone. It makes sense for:

• Brands and founders who want to stand out. If your business depends on being remembered, immersive design is a tool that works.
• Products with a story to tell. If you need to explain how something works, why it exists, or what problem it solves, a scene-by-scene format does that better than a list.
• Portfolios and showpiece launches. If the site itself is part of the pitch, immersive design shows what you can do.

It does not make sense for:

• Large shops with hundreds of products. The format works for a few products, not a catalog.
• Blogs or news sites. Text-heavy sites need speed and simplicity, not animation.
• Daily-use utility sites. If people visit your site five times a day to check a number or fill a form, they do not want to walk through a story.

An immersive website makes people explore instead of skim, increasing engagement and memory retention.

I built the immersive version of my site because my business is building products and helping others build theirs. The site itself is proof of what I do. If your business does not need that proof, a classic site is faster to build and faster to load.

What it cannot do

An immersive site cannot replace a classic site for most businesses. It is slower to build, harder to update, and heavier on the browser than a normal page. It also does not work well for content that changes often. If you post new articles every week, you do not want to rebuild a scene every time.

It also does not work for complex user flows. If your site has a multi-step signup, a checkout process, or a dashboard, those pieces stay classic. Immersive design is for the front door, not the whole house.

What I learned building it

Building an immersive site taught me three things:

1. Motion is cheap. Custom scenes are expensive. The code for parallax scrolling is simple. The hard part is making the scenes worth scrolling through.
2. Real text beats everything. Baking text into images kills SEO, accessibility, and translation. Keep it as HTML, even if it takes more work to position.
3. Speed is a feature, not a constraint. Every optimization I made, from lazy loading to canvas pausing, made the site faster and better. Speed does not fight design. It sharpens it.

I documented the full build process on my YouTube channel, where I walk through the code, the design decisions, and the mistakes I made along the way.

Final thought

An immersive website is a middle ground between a classic page and a full 3D experience. It feels richer than a normal site, but it loads fast and works on phones. It is best suited for brands, founders, and businesses with stories to tell.

If your business depends on being remembered, an immersive site is worth the effort. If it does not, a classic site is faster to build and easier to maintain. Both are valid choices. The key is knowing which one serves your goal.