Build a Live Shader Landing Page

Layer WebGPU shader effects into a React landing page and deploy it.

Introduction

30 Second Summary

A plain background can make a strong headline feel unfinished. A demanding visual effect can leave some visitors staring at an unreadable page.

In this project, you will build a React landing page with a layered GPU shader behind its hero headline. The deployed page keeps its headline readable whenever WebGPU cannot run.

What You'll Build

You will open a public URL to see a moving shader background flow behind your headline while the page stays clear enough to read.

By the end of this project, you'll have:

A layered shader hero with two or three effects moving behind your headline.
The ability to tune colour, speed, and blend settings. You'll see the background respond each time you save.
A public landing page you can open from a shareable URL. Its headline stays readable when WebGPU is unavailable.
Secret Mission: An optional challenge to push your skills further.

Are there any prerequisites?

You need Node with npm plus a code editor.

You also need a browser with WebGPU support plus a free static hosting account.

Before We Start

A live shader hero depends on a development environment that can build the page locally. It also needs a browser that can run the effect through WebGPU.

This step prepares the tools you need for the whole project. You will finish with local development tools plus separate environments for shader testing and fallback testing.

In this step, get ready to:

Prepare Node.js with the npm package manager for local development.
Confirm a code editor plus two browser test environments are ready.
Create a free hosting account for deployment.

Install Node.js with npm

Node.js runs the tools that create and serve your React project. Its standard installer includes the npm command that you will use to install the shaders library.

Use your operating system's search to open a terminal window.
Check whether Node.js plus npm are installed by running these commands:

node --version
npm --version

What does this check do?

The first command asks Node.js to print its installed version.
The second command asks npm to print its installed version.

✔️ I see two version numbers

Your local JavaScript tools are ready. Node.js can run the project tooling while npm can install its packages.

ⓧ Command not found

The missing command means Node.js is unavailable in this terminal. Installing the official LTS release also installs npm.

Open the official Node.js download page.
Download the LTS installer for your operating system.

The installer file should appear in your Downloads folder.

Run the installer from your Downloads folder.
Keep the installer's default options.

The installer confirms when the installation is complete.

Close the existing terminal window.
Use your operating system's search to open a fresh terminal window.
Confirm the installation by running these commands:

node --version
npm --version

What should I see?

Each command prints a version number on its own line. Those two results confirm that the installer made both tools available to your terminal.

The fresh terminal should now show one Node.js version plus one npm version.

Commands still unavailable?

Restart your computer if a fresh terminal still cannot find the commands. This reloads the system path updated by the installer.

If the problem continues, reinstall the LTS release from the official Node.js download page.

Tell me what your terminal shows after installing Node.js.

Prepare your editing and browser tools

Your code editor is where you will build the landing page. Your primary browser provides the WebGPU environment that renders the shader.

Install a code editor from its official website if your machine does not already have one.
Use your operating system's search to open your code editor.

You should see an empty workspace or the editor's welcome screen. That confirms the editor is available for the project.

Use your operating system's search to open Google Chrome.
Select the browser's address bar.
Enter chrome://gpu.
Find WebGPU: Hardware accelerated on the graphics status page.

You should see WebGPU listed as hardware accelerated. This confirms that Chrome can use your machine's graphics hardware for the shader effect.

WebGPU not hardware accelerated?

Confirm that Chrome is up to date. Outdated browser builds can lack the WebGPU support required by the project.

Visit chrome://settings/system to confirm that Use graphics acceleration when available is enabled.

Use Chrome's official WebGPU troubleshooting guide if the status still shows that hardware acceleration is unavailable.

Help me diagnose my WebGPU status.

Open Chrome's profile menu from the top-right toolbar.
Create a separate browser profile named Shader Fallback Test.
Skip account sign-in if the browser offers it.
Open a new tab in the separate profile.

You now have one browser environment for the live shader plus another environment for fallback testing.

Create your hosting account and verify the setup

A hosting account gives the finished landing page a public URL. The project only needs a provider that offers free static hosting.

You will use your own password or a trusted sign-in provider. Keep those credentials private because NextWork never needs them.

Choose a provider that offers free static hosting.
Create a free account through the provider's sign-up page.
Complete email verification if the provider requests it.
Return to the provider's dashboard after verification.

You should see your hosting dashboard while signed in. That confirms the account is ready for the deployment step.

Return to the code editor from earlier to confirm it opens.
Return to Chrome's graphics status page to confirm WebGPU remains hardware accelerated.
Switch to the Shader Fallback Test profile to confirm its tab opens.
Return to your hosting dashboard to confirm the account is accessible.

Before you run the final check, do you expect both development commands to return version numbers?

Return to your terminal to verify Node.js plus npm by running these commands:

node --version
npm --version

What does the final check prove?

Two version numbers confirm that Node.js plus npm remain available in a fresh terminal session. Your next project commands can now use both tools.

You should see two version numbers with no missing-command message. That result completes the local development check.

Final version check failing?

Open a new terminal window before trying again. An older terminal can keep the system path from before Node.js was installed.

Restart your computer if a fresh terminal still cannot find either command.

Help me fix my final environment check.

That is the preparation complete. Your development tools can build the page while your browser environments can test both display paths.

Your development environment is ready. Next, you will browse the shader gallery and choose the effects for your hero.

Choose Your Shader Effects

A layered hero needs each visual effect to have a clear job. Choosing those jobs now keeps your headline readable when the layers come together.

The open-source shaders library provides live WebGPU previews before you write any code. In this step, you'll choose Gradient, Noise, and Glass distortion for your hero background.

In this step, get ready to:

Explore the live shaders gallery for hero background effects.
Select Gradient and Noise as the base visual layers.
Select Glass distortion as the depth layer.

Browse the live gallery

A live preview shows how an effect moves over time. It also confirms that your primary browser can render the gallery before you build the landing page.

Switch back to your WebGPU-capable browser from setup.
Visit the official shaders gallery.
Scroll through the gallery until you see several animated component previews.
Confirm that at least one preview changes over time.

You're in. The moving preview confirms that the gallery is rendering live effects in your browser.

Previews staying still?

Reload the gallery in the WebGPU-capable browser from setup.
Close other graphics-heavy browser tabs if the animation remains choppy.
Return to the gallery after your browser finishes reloading the page.

Still seeing static previews? Help me troubleshoot the shaders gallery in my WebGPU-capable browser.

Preview Gradient and Noise

Gradient provides the broad color movement behind your headline. Noise adds fine texture that keeps large areas from feeling flat.

Use the gallery's browsing controls to find a Gradient effect.
Choose a Gradient preview with broad color movement.
Open your chosen Gradient preview in a new browser tab.
Watch the Gradient preview until you see its colors move.
Return to the original gallery tab.
Use the gallery's browsing controls to find a Noise effect.
Choose a Noise preview with visible surface texture.
Open your chosen Noise preview in a new browser tab.

You should now have separate live previews for Gradient and Noise. Both previews should remain animated in their browser tabs.

Why these two layers work

Gradient establishes the hero's color palette.
Noise adds texture without replacing the underlying color movement.
Keeping these roles separate makes later prop changes easier to judge.

Preview Glass distortion and confirm your stack

Glass distortion bends the visual layers beneath it. This gives the final stack a sense of depth without adding another competing color source.

Return to the original gallery tab.
Use the gallery's browsing controls to find a Glass distortion effect.
Choose a Glass distortion preview that visibly bends the image beneath it.
Open your chosen Glass distortion preview in a new browser tab.
Watch the preview until you see the distorted shapes change.

Before the final check, your prediction is simple: which preview produces the strongest visible transformation.

Switch to the Gradient preview tab.
Confirm that broad areas of color move across the preview.
Switch to the Noise preview tab.
Confirm that animated texture remains visible across the preview.
Switch to the Glass distortion preview tab.
Confirm that the effect bends or warps the image beneath it.

You should see three distinct visual roles across the live previews. Gradient supplies color movement. Noise supplies texture. Glass distortion supplies depth.

That completes your effect selection. Gradient, Noise, and Glass distortion are ready to become a layered hero background.

Your three selected effects now give the hero a clear visual plan. Next up, you'll prepare the app that brings them together.

Scaffold the React App

You have picked Gradient, Noise, and Glass distortion for the hero. Those effects now need a local page where you can combine them.

React gives the hero a component structure. Vite creates a runnable starting point that you can test in the browser.

The project also needs the shaders library. You will install it before proving that the starter page runs on localhost.

In this step, get ready to:

Scaffold a Vite React application on your Desktop.
Install shaders with the app dependencies.
Run the starter page on localhost.

Scaffold the React project

A scaffold creates the starter files needed for a working app. Vite guides you through the project name and React template choices.

Press Cmd+Space on macOS or the Windows key on Windows to open system search.
Type the name of your code editor into system search.
Press Enter to open your code editor.
Open the integrated terminal panel from your editor's top menu.
Start the Vite setup on your Desktop by running these commands:

cd ~/Desktop
npm create vite@latest

What Do These Commands Do?

The first command places the terminal on your Desktop so the project is easy to find.
The second command launches Vite's guided project scaffolder.

Approve the download if npm asks for permission to fetch the scaffolding tool.
Enter shader-landing-page when the setup asks for a project name.
Select React when the setup asks for a framework.
Select JavaScript when the setup asks for a variant.
Confirm that the new project folder exists by running this command:

ls

What Does This Check Prove?

The ls command lists the folders on your Desktop. Seeing the project folder confirms that Vite completed the scaffold.

You should see shader-landing-page in the output. That gives you the local shell for the landing page.

Project Folder Missing?

Check that the setup reached its completion message before you ran the folder check.
Rerun the setup if you cancelled the guided prompts before they finished.
Help me troubleshoot why Vite did not create my React project folder.

Install the project dependencies

The scaffold includes a dependency list for the React starter. Installing the shaders package adds the effects library that the next steps use.

Install the starter dependencies plus shaders inside shader-landing-page by running these commands:

cd shader-landing-page
npm install
npm install shaders

What Do These Commands Install?

The cd command moves the terminal into your new project folder.
The first install command downloads the dependencies defined by the React starter.
The second install command adds the shaders package to the project.

Each installation prints a completion summary. The terminal then returns to the prompt without a dependency error.

Dependency Installation Failing?

Check your internet connection before retrying the installation.
Confirm that the terminal path ends with shader-landing-page before retrying.

Help me diagnose my npm installation problem. Search the shaders issue tracker.

Run the starter page

A development server serves your project to the browser while you work. It stays active in this terminal until you stop it with Ctrl+C.

Before you start the server, predict whether the browser can load the starter page from your local project.

Start the development server from shader-landing-page by running this command:

npm run dev

What Does This Command Start?

The dev script starts Vite's local server. It also prints a localhost link that points to your running React app.

Open the localhost link shown in the terminal with your modern browser.

You should see the Vite React starter page. This proves that the scaffolded app can run with the shaders package installed.

Starter Page Not Loading?

Confirm that the terminal is still running the development server.
Use the exact localhost link printed by Vite because the available port can vary.
Help me troubleshoot why my Vite React starter page is not loading.

You now have the full local build loop working. Next, you will replace the starter screen with a hero that renders your first shader effect.

Add Your First Hero Shader

The Gradient you selected is still only a gallery preview. Your local React app still shows the Vite starter page.

Now you will give the landing page its hero structure. The Shaders library provides the canvas for the WebGPU effect. The first gradient layer sits behind a readable headline.

In this step, get ready to:

Replace the starter styling with a full-screen hero layout.
Build a readable headline for the landing page.
Render the Gradient effect inside the Shader wrapper.

Prepare the hero canvas

The shader needs a full-size surface behind the hero copy. The stacking styles keep that surface behind the headline.

Select src/App.css in your code editor.
Replace its contents by copying the code below:

* { box-sizing: border-box; }
/* Remove browser spacing so the hero reaches every edge. */
body { margin: 0; min-width: 320px; min-height: 100vh; }
#root { min-height: 100vh; }
/* Give the hero a full viewport canvas. */
.hero { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: #0f172a; }
/* Position the GPU canvas behind the copy. */
.hero-shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Keep the message readable above the effect. */
.hero-content { position: relative; z-index: 1; max-width: 72rem; padding: 2rem; text-align: center; color: #ffffff; }
.hero-content p { margin: 0 0 1rem; font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-content h1 { max-width: 12ch; margin: 0; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.95; text-wrap: balance; }

What do these styles do?

The page reset removes the spacing that would leave a border around the hero.
The hero fills the browser viewport to give the shader a large canvas.
The shader layer covers the hero while staying below the page copy.
The content layer keeps the headline centered and readable.

Save src/App.css.
Switch back to the localhost page from earlier.

You should see the starter page use the full browser height with the default outer spacing removed.

Layout still looks unchanged?

Confirm that you saved src/App.css inside the src folder.
Check the terminal from earlier for a stylesheet syntax problem.

If the layout still does not update, help me check why my Vite app is not applying App.css.

✔️ Awesome, I've got everything!

Your hero layout styles are saved in the correct file.

ⓧ I'd like to double check the full code

* { box-sizing: border-box; }
/* Remove browser spacing so the hero reaches every edge. */
body { margin: 0; min-width: 320px; min-height: 100vh; }
#root { min-height: 100vh; }
/* Give the hero a full viewport canvas. */
.hero { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: #0f172a; }
/* Position the GPU canvas behind the copy. */
.hero-shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Keep the message readable above the effect. */
.hero-content { position: relative; z-index: 1; max-width: 72rem; padding: 2rem; text-align: center; color: #ffffff; }
.hero-content p { margin: 0 0 1rem; font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-content h1 { max-width: 12ch; margin: 0; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.95; text-wrap: balance; }

Build the shader hero

The Shader component creates the rendering surface. The LinearGradient component becomes its first visual layer.

Select src/App.jsx in your code editor.
Replace its contents by copying the code below:

import { Shader, LinearGradient } from 'shaders/react'
import './App.css'

function App() {
  return (
    <main>
      <section className="hero">
        {/* Place the GPU gradient behind the hero copy. */}
        <Shader className="hero-shader">
          <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
        </Shader>

        {/* Keep the page message above the animated canvas. */}
        <div className="hero-content">
          <p>Creative systems for ambitious teams.</p>
          <h1>Make your next idea impossible to ignore.</h1>
        </div>
      </section>
    </main>
  )
}

export default App

What does this code do?

The Shader wrapper gives its visual children one shared GPU canvas.
The LinearGradient child paints the first background layer.
The colorA and colorB props set the dark blue and violet endpoints.
The hero copy stays outside the shader canvas so the browser can render it as readable page content.

Save src/App.jsx.
Switch back to the localhost page from earlier.

You should see a full-screen blue and violet shader behind the headline. The text should remain centered above the effect.

That first visual layer is working. Your landing page now has a GPU-rendered hero instead of the starter screen.

Shader not rendering?

Confirm that the import path remains exactly shaders/react.
Check that Shader and LinearGradient use the same capitalization as the code block.
Return to the WebGPU-capable browser from earlier if the canvas stays blank.

If the shader still does not appear, help me debug my Shader and LinearGradient components.

✔️ Awesome, I've got everything!

Your hero component now contains the headline and its first shader layer.

ⓧ I'd like to double check the full code

import { Shader, LinearGradient } from 'shaders/react'
import './App.css'

function App() {
  return (
    <main>
      <section className="hero">
        {/* Place the GPU gradient behind the hero copy. */}
        <Shader className="hero-shader">
          <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
        </Shader>

        {/* Keep the page message above the animated canvas. */}
        <div className="hero-content">
          <p>Creative systems for ambitious teams.</p>
          <h1>Make your next idea impossible to ignore.</h1>
        </div>
      </section>
    </main>
  )
}

export default App

Verify the live hero

A successful first layer fills the hero without covering its message. This check confirms that the shader and the page content share the same section correctly.

Return to the localhost page from earlier.

Before you refresh, do you expect the headline to remain visible above the Gradient effect?

Refresh the browser tab.

You should see the dark blue and violet Gradient fill the entire hero. The headline should stay sharp and readable in the center.

Your hero now has its first shader layer. Next, you will stack the Noise and Glass distortion effects to build the layered background.

Layer and Tune the Effects

Your first Gradient already gives the React hero a visual foundation. The headline stays readable above it.

Texture creates depth in the background. This step combines Noise with Glass distortion inside the same WebGPU Shader.

In this step, get ready to:

Stack the selected Noise effect over the Gradient.
Apply the selected Glass distortion effect to the existing layers.
Tune colour, speed, opacity, and blend settings through Vite live reload.

Add the Noise layer

A Shader draws its child layers in order. Each later layer combines with the pixels produced by the layers before it.

Placing Noise after Gradient turns the noise pattern into an overlay. This gives the background texture without replacing its colour foundation.

Return to the browser tab for the Noise effect you selected earlier to confirm its exact React component name.
Copy the React import from the effect's usage example.
In your code editor, locate the React file that already contains your hero.
Add the copied component name to the existing import from shaders/react.
Place the Noise component inside the existing Shader wrapper immediately after the Gradient component.
Save the React file to trigger Vite's live reload.

You should see the noise pattern layered over the existing gradient. The headline should remain visible.

Good progress. Your hero now has moving texture instead of a single smooth colour layer.

How Does the Layer Order Work?

Gradient paints the base first. Noise contributes pixels above that base.

The order gives each effect a clear role. Your later blend settings decide how strongly those roles mix.

Noise Layer Not Appearing?

Confirm that the imported component name matches the gallery example exactly. Component names are case-sensitive.

Check that Noise sits inside the existing Shader wrapper. Place it after Gradient so both layers contribute to the canvas.

Help me diagnose why my Noise shader component is not appearing over my Gradient.

Apply the Glass distortion effect

Glass distortion changes pixels produced by other layers. Its gallery example shows whether the effect follows those layers or wraps them.

Preserving that composition pattern makes the distortion affect both Gradient and Noise. The resulting movement feels like one visual surface.

Return to the selected Glass distortion effect in the gallery to confirm its exact React component name.
Check the React usage example to confirm its composition pattern.
Copy the React import for the Glass distortion component.
Switch back to the React file containing your hero.
Add the copied component name to the existing import from shaders/react.
Apply the Glass distortion component to the Gradient and Noise layers using the exact composition pattern shown in its React example.
Save the React file to trigger another live reload.

You should see the gradient and noise bend through the Glass distortion effect. The headline should remain above the animated background.

The full stack is working. Glass distortion now gives the two earlier layers a shared sense of depth.

Distortion Covering the Other Layers?

Compare your component order with the selected effect's React example. Distortion components depend on the documented composition pattern.

Confirm that Gradient and Noise remain inside the same Shader. Moving either layer outside that wrapper removes it from the shared effect.

Help me correct the composition of my Gradient, Noise, and Glass distortion layers.

Tune the layered effect

The effect stack is structurally complete. Small prop changes now determine whether the animation supports your headline or competes with it.

What Do the Tuning Controls Change?

The colorA and colorB props establish the hero palette.
The speed prop controls how quickly an animated pattern evolves.
The opacity prop controls layer strength from 0 to 1.
A blend mode determines how one layer's colours combine with the pixels beneath it.

Set the Gradient's colorA prop to #0f172a.
Set the Gradient's colorB prop to #7c3aed.
Save the React file to preview the palette through live reload.

You should see a dark navy base flowing into purple. The light headline should have clear contrast against both colours.

Set the Noise component's speed prop to 0.15.
Set the Noise component's opacity prop to 0.5.
Save the React file to preview the slower texture.

You should see the Noise move at a restrained pace. Its reduced strength should let the Gradient remain visible.

Set the Noise component's blendMode prop to softLight.
Save the React file to preview the blended texture.

You should see the Noise borrow colour from the Gradient instead of looking like a separate sheet. The texture should feel integrated with the palette.

Set the Glass distortion component's opacity prop to 0.5.
Set the Glass distortion component's blendMode prop to normal.
Save the React file to preview the completed composition.

You should see distortion across the Gradient and Noise without losing the headline. Each layer should contribute a visible part of the final background.

Before the final check, do you expect the headline or the animation to catch your eye first?

Return to the localhost page in your WebGPU-capable browser.
Reload the page to test the complete hero from a fresh render.
Watch the hero animation for several seconds to judge its visual balance.

You should see a readable headline over layered Gradient, Noise, and Glass distortion effects. The navy and purple palette should remain visible.

Noise should move slowly through the composition. The opacity and blend settings should keep every effect from overwhelming the text.

That tuning paid off. Your hero now has a layered GPU effect that changes immediately whenever you save the React file.

Headline Hard to Read?

Lower the Noise opacity if the texture crosses the letterforms too strongly. Lower the Glass distortion opacity if the background feels warped around the text.

Confirm that the headline remains outside the Shader canvas in the hero's foreground layer. Its placement keeps the text sharp while the background moves.

Help me rebalance my layered shader hero so the headline remains readable.

Your three-layer hero is tuned. Next, you'll add a static background for browsers that cannot run WebGPU.

Add and Test a Static Fallback

Your layered hero now combines three tuned effects behind a readable headline. The next goal is to preserve that first impression when the GPU effect cannot run.

Browsers without WebGPU can lose the animated surface that gives the hero its depth. A static CSS background gives the section a dependable visual base.

Your existing foreground styling also needs enough contrast over that fallback. This keeps the message readable in both rendering paths.

In this step, get ready to:

Add a static CSS background beneath the existing shader layers.
Protect the headline with readable foreground styling.
Verify the fallback in a second browser or browser profile.

Add the static hero background

The hero container can paint its own background before the shader layers render. A fallback browser keeps that base visible when the effect is unavailable.

Switch back to the code editor from earlier.
Find the stylesheet rule that controls the outer hero container.
Add a static background declaration to that container using the same colours as your tuned Gradient effect.
Save the stylesheet.
Return to the second browser or browser profile from earlier where WebGPU is unavailable or disabled.
Load the landing page using the same local address from earlier.

You should see a static colour or gradient filling the hero behind your headline. The shader animation should be absent in this test state.

That is an important checkpoint. Your hero now has a visible base when the GPU path is unavailable.

How Does the Fallback Work?

The static background belongs to the hero container. It can render without GPU support.

Supported browsers place the shader layers over that base. The fallback remains visible when those layers cannot render.

Seeing an Empty Hero?

Confirm that the static background is attached to the outer hero container.
Check that the outer hero container keeps its visible height when the shader is unavailable.
Confirm that the shader layer is not the only element supplying the hero background.

Help me diagnose why my hero is blank when WebGPU is unavailable.

Protect the headline contrast

Animated colour shifts can mask weak text contrast. The static state gives you a stable surface for judging readability.

Return to the code editor from earlier.
Locate the existing style rule that controls the hero headline colour.
Apply a foreground colour from your existing hero palette that contrasts clearly with the static background.
Save the stylesheet.
Return to the fallback browser or browser profile.
Refresh the local landing page.

You should be able to read every word of the headline across the entire static background. The text should remain clear without relying on movement or brighter shader areas.

You have now protected the page's message when the visual effect drops away.

Is the Headline Hard to Read?

Use the lightest existing text colour when your fallback background is dark.
Use the darkest existing text colour when your fallback background is light.
Check that the text layer remains above the fallback background.
Confirm that the text layer also remains above the shader layers.

Help me improve the headline contrast over my static fallback.

Compare the shader and fallback

The final check compares the supported path with the fallback path without changing your project code. Both paths should preserve the same hero composition.

Before you compare the two states, predict whether the headline or only the background should change.

Return to the WebGPU-capable browser from earlier.
Refresh the local landing page.

You should see the tuned Gradient layer moving behind the headline. The Noise layer should remain blended into the effect.

The Glass distortion should remain visible over the other shader layers.

Return to the fallback browser or browser profile.
Refresh the same local landing page.

You should see the static CSS background instead of the animation. The same headline should remain readable in the foreground.

You now have a deliberate shader path for supported browsers. You also have a readable fallback path for everyone else.

Your hero is resilient across both browser states. Next, you will deploy the same experience to a public URL.

Deploy the Landing Page

Your layered shader hero now works locally with a readable fallback. Its address still points to localhost, so other people cannot open it.

A production build packages your Vite app into files a static host can serve. In this step, you will publish those files with Netlify Drop.

In this step, get ready to:

Create a production build of the landing page.
Publish the production files to Netlify.
Verify the public shader hero in a WebGPU-capable browser.

Build the production version

The development server optimizes your page for fast editing. A production build creates the smaller deployable files that visitors receive.

Switch back to the terminal panel from earlier.
Stop the running development server by pressing Ctrl+C.
Create the production build by running:

npm run build

What does this command do?

The npm run build command runs the production build script provided by Vite.
Vite bundles the page into deployable files inside the dist folder.

Confirm the command finishes without a build error.
Confirm a new dist folder appears in your Vite app folder.

Good work. The dist folder now contains the production version of your landing page.

Build not completing?

Run the command from the same terminal location that served the app earlier. A different location may not contain the Vite project.

If the terminal reports a build problem, fix the first listed issue before running the command again.

Help me diagnose my Vite production build.

Before you preview the build, what do you expect the production page to look like? Hold that prediction in mind.

Serve the production build locally by running:

npm run preview

What does this command do?

The npm run preview command serves the built files from dist.
This preview checks the production bundle before you upload it to the host.

Return to the modern browser from earlier.
Enter http://localhost:4173 in the browser address bar.
Confirm the headline remains readable over the animated shader layers.

You should see the same Gradient, Noise, and Glass distortion effect that appeared during development. Your tuned colour, speed, opacity, and blend settings should remain visible.

Production preview looks different?

Confirm the build command finished after your latest saved changes. An older dist folder can show an earlier version of the hero.

If the page is blank, return to the terminal to check whether the preview server is still running.

Help me compare my Vite preview with my development page.

Publish with Netlify Drop

The dist folder is a self-contained copy of the production page. Netlify Drop publishes that folder as a hosting project without changing your source files.

The upload normally finishes within a few seconds. A short publishing wait means Netlify is making the files available at a public address.

Visit Netlify Drop in your browser.
Complete the sign-in form with the free hosting account from the project setup.
Find the dist folder inside your Vite app folder using Finder on macOS or File Explorer on Windows.
Drag the dist folder into the Drop zone.
Copy the Preview URL into this project field: https://your-project.netlify.app.

That is the deployment complete. Your free hosting account now contains a production copy of the landing page at a public URL.

No public URL after uploading?

Confirm you dragged the built dist folder into the Drop zone. Uploading an empty folder cannot produce the landing page.

If Netlify reports a failed deploy, rebuild the page locally before uploading the new dist folder.

Help me fix my Netlify Drop deployment.

Verify the public deployment

Before you load the public address, do you expect the shader layers to match your local production preview? Keep your prediction in mind.

Return to the WebGPU-capable browser from earlier.
Paste https://your-project.netlify.app into the browser address bar.
Press Enter to load the public deployment.

You should see the readable headline over the layered Gradient, Noise, and Glass distortion effect. The colours, animation speed, opacity, and blend should match your local production preview.

You made it. Your layered shader hero now has a public home that you can open and share from any supported browser.

Secret mission

Run a Shader Release Audit

Put your deployed hero through a browser-to-browser release audit. Compare the animated and fallback states at wide and narrow widths. Capture evidence for a clear release verdict.

Clean Up Your Resources

A local Vite React application and a free-hosting project hold your finished shader landing page. This build uses no paid Pro presets, so there are no ongoing costs to manage.

Resources you used:

Your local Vite React application, including its installed dependencies and production build.
Your deployed landing-page project in the free hosting account.

Keep everything running

No action needed. Choose this if you want your public landing page to remain available while you continue tuning the hero.

Keep the local Vite React application so you can change the Gradient, Noise, or Glass distortion layers later.
Leave the deployed landing-page project in your free hosting account.
Use the verified public deployment URL whenever you want to share the finished page.

Pause - I'll come back to this later

Close your local tools while leaving the application files and public deployment in place. Your hosted page stays available while you take a break.

Save any open landing-page changes in your code editor.
Stop the local development server if it is still running by pressing Ctrl+C in its terminal.
Close the browser tabs showing the local page and shader gallery.
Leave the deployed landing-page project in the free hosting account.

Delete - I don't want to use this again

Deleting these resources is permanent. Your local source files and public landing page both disappear.

Return to the free hosting account from earlier.
Select the project that serves your verified public deployment URL.
Follow the host's documented project-deletion flow to delete that landing-page project.
Open the public deployment URL after the deletion finishes.

You should see that the landing page is no longer available. This confirms the public deployment has been removed.

macOS

Use the macOS file browser to locate the folder containing the Vite React application from earlier.
Confirm that you selected the folder containing your landing-page project.
Move the entire application folder to the system bin.
Empty the system bin to remove the local application permanently.

Windows

Use the Windows file browser to locate the folder containing the Vite React application from earlier.
Confirm that you selected the folder containing your landing-page project.
Move the entire application folder to the system bin.
Empty the system bin to remove the local application permanently.

Nice Work!

Your landing page is live with a layered shader hero moving behind a readable headline. The page also stays clear when WebGPU is unavailable.

What you learned:

Evaluated the live gallery to choose Gradient, Noise, and Glass distortion effects for one layered hero.
Built a Vite React hero that stacks all three effects behind readable foreground text. Tuned colour, animation speed, opacity, and blend settings to shape the final motion.
Added a static CSS fallback for browsers without WebGPU. Published the production build as a public deployment with a verified URL.
Secret Mission: Extended the shader landing page through an optional challenge that pushes the design beyond the core build.

Ready to quiz yourself?