Agentx

Hero
Services
Projects
Achivements
about-sec
footer

Inspiration Most agency websites look the same — flat, static, forgettable. We wanted to build something that actually shows what a modern digital agency is capable of, instead of just telling. Since this hackathon was themed around 3D websites, it felt like the perfect excuse to push our design and animation skills and build the kind of site we'd want to show off to real clients.

What it does AgentX is a fully interactive, animated agency website that showcases services like AI automation, custom chatbots, voice agents, web development, SEO, and graphic design. It includes:

A 3D Spline hero scene
An auto-rotating services carousel with animated gradient backgrounds
A stagger-style testimonials section with a custom Three.js shader background (GLSL hills)
Animated achievement counters
A cinematic, scroll-triggered curtain-reveal footer with magnetic buttons
Fully responsive design across desktop and mobile

How we built it Built with React 19 + TypeScript on Vite. We used Framer Motion for UI animations, GSAP + ScrollTrigger for the footer's scroll-based reveal and magnetic button interactions, Three.js for the custom GLSL shader background and the animated dotted surface, and Spline for the 3D hero scene. Styling is fully custom (no UI framework) to keep the design unique and lightweight. We also used Antigravity as our IDE throughout development.

Challenges we ran into Getting Three.js and GSAP's ScrollTrigger to play nicely with React's render lifecycle (especially cleanup on unmount) took some careful useEffect handling. Balancing heavy visual effects (3D hills, animated gradients, marquees) with performance and responsiveness across screen sizes was also a constant back-and-forth.

Accomplishments that we're proud of Getting a real, custom WebGL shader running smoothly inside a React component and pairing it with a scroll-triggered cinematic footer that most agencies would charge thousands of dollars to build. We're proud that the whole experience feels cohesive, not like a bunch of stitched-together templates.

What we learned How to combine multiple animation libraries (Framer Motion, GSAP, and raw Three.js) in a single React app without them fighting each other, and how much of a difference layered background effects (grid, aurora glow, floating paths) make to a site's perceived polish.

What's next for AgentX Wiring up the contact form to a real backend/email service, adding a CMS so services and projects can be updated without touching code, and expanding the 3D interactions further (e.g. cursor-reactive elements) across more sections.