WebAIAd Tech3D Web

AgenticXWebGL Home Page Build

An independent front-end build of the AgenticX website design: a hero made of thousands of particles, a story that scrolls sideways and a cloud of points that reshapes itself for each solution. Built with Astro, Three.js and GSAP; not affiliated with AgenticX.

Start a similar project
AgenticX - WebGL Home Page Build: device mockup
Category
Web
Year
2026
Built with
Astro, Three.js, GLSL shaders +2 more
Overview

The project

Planning something similar?Get a free discovery call

This is a front-end build of the AgenticX website design, a brand-led site for an advertising exchange. It opens on a hero made of thousands of particles pulled into a vortex, moves into a section that scrolls sideways through four advantages, then a live diagram of supply and demand, and a solutions section in which one cloud of points reshapes itself for each of four ideas.

It is built with Astro, Three.js and GSAP. Every scene runs on the graphics card with custom shaders and is tied to the scroll, so the visitor is always the one moving the page. There are four pages, Home, About, Demand and Supply, and each is laid out again for phones.

This is an independent build made to show what a brand-led WebGL site takes. The interface design belongs to its original designers, and the project is not affiliated with AgenticX.

Highlights

What makes it work

  1. A hero made of thousands of particles drawn into a vortex, in real time

  2. A story that scrolls sideways: four advantages pass as photographs while the page holds still

  3. A live network diagram that joins supply and demand

  4. One cloud of points that reshapes itself for each of the four solutions

  5. A call to action with a liquid surface driven by a shader

  6. Dark, purple and white sections that hand over to each other as you scroll

  7. Four pages: Home, About, Demand and Supply

  8. Each 3D scene is its own small module

  9. On phones the sideways story is restacked into one column

  10. Smooth scrolling, with every section revealed in time with the scroll

The challenge

The design asks for five real-time scenes on one page, each tied to the scroll, without the page ever feeling heavy.

4 problems we had to solve, from visual quality, interaction, performance and more.

  1. 01 / 04Visual quality

    Thousands of points, one idea

    The hero, the sphere and the solutions section are all made of particles, moved on the graphics card by custom shaders. In the solutions section the same cloud of points changes shape as each of the four tabs takes its turn, so the picture changes without anything being swapped out.

  2. 02 / 04Interaction

    A page that scrolls sideways

    In the middle of the page the vertical scroll becomes a horizontal one: the section holds in place and four photographs travel past, each with its headline. The scroll stays in the visitor's hands throughout, forwards and backwards.

  3. 03 / 04Performance

    Five scenes on one page

    Each scene is a separate small module and the content itself is plain HTML from Astro, so the text is there at once and the graphics join it as they are ready.

  4. 04 / 04Design

    Three moods, one site

    The page moves from near-black to purple to white and back. Type, spacing and the purple accent are held constant across all three, so the changes of mood read as chapters of one story.

  5. 4 of 4 solved

    A brand-led page where the 3D carries the message and the scroll stays in the visitor's hands.

    Tell us your challenge
Screens

Inside AgenticX

1 / 9

Built with

  • Astro
  • Three.js
  • GLSL shaders
  • GSAP ScrollTrigger
  • Lenis

Have a project like AgenticX?

Tell us what you want to build. You’ll get a free discovery call and a clear, written proposal.

Start a similar project

More work like this

All projects
Next projectScannerVR LiDAR Training Simulator