An award-style landing page for SquaredX, the retail Data & AI consultancy ("Unleash data. Unlock value."). A dark, editorial, motion-led single page built to feel like an Awwwards site of the day.
| Concern | Choice |
|---|---|
| Framework | React 19 + TypeScript + Vite |
| Typeface | VG5000 (Velvetyne, SIL OFL) — self-hosted, the single face site-wide |
| Styling | Tailwind CSS v3 + design tokens |
| UI library | shadcn/ui (Button + CSS-variable theming, Radix Slot, CVA) |
| 3D / WebGL | Three.js via @react-three/fiber (custom GLSL point-field) |
| Scroll data-viz | Canvas 2D square-particle morph system driven by ScrollTrigger |
| Motion | GSAP + ScrollTrigger, SplitType |
| Smooth scroll | Lenis (wired into the GSAP ticker) |
A single field of ~1,500 square particles (on brand for Squared-X) is pinned
full-screen and morphs through six data shapes as you scroll — raw scatter
cloud → bar chart → revenue wave → customer-segment clusters → allocation donut
→ the SquaredX "X". The same particles re-form into each diagram; one rAF render
loop reads a scroll progress value that GSAP/ScrollTrigger scrubs, with damped
trailing motion, idle float, scene copy that swaps, a live metric readout and a
progress bar. Degrades to a static composed state under prefers-reduced-motion.
- Preloader — animated
000 → 100counter with a clip-revealed SquaredX mark, then a wipe to the page. - WebGL data-terrain hero — ~22k GPU points rippling as a "data landscape", with a soft gaussian bump that follows the cursor. Additive-blended and tuned to glow rather than blow out. Lazy-loaded in its own chunk so it never blocks the hero text.
- Kinetic headline — line-masked GSAP reveal with a serif-italic accent.
- Scroll-highlight manifesto — copy brightens word-by-word as it scrubs past.
- Sticky stacking service cards — each card scales/dims as the next slides over.
- Interactive value-driver grid — hover-to-fill on desktop, always-readable on mobile/touch.
- Custom cursor + magnetic buttons, nav and logo (pointer-fine devices).
- Spinning circular CTA badge in the closing section.
Brand logo is the authentic SquaredX wordmark (sourced from squaredx.co.uk),
reproduced as inline SVG so it inherits colour — see src/components/Logo.tsx.
- Fully responsive from 390px up; mobile drops the custom cursor and heavy hover-only affordances.
- Honours
prefers-reduced-motion— smooth scroll, the intro timeline and the scroll reveals all degrade to static content.
npm install
npm run dev # http://localhost:5173
npm run build # type-check + production build
npm run preview # serve the production buildscripts/shoot.mjs drives headless Chromium (Playwright) to capture the hero and
every section at desktop (1440px) and mobile (390px), logging any console errors.
npm run preview -- --port 4173 &
node scripts/shoot.mjs # writes PNGs to /tmp/sx-shotssrc/
components/ Logo, Cursor, Preloader, Nav, Marquee, Magnetic,
SplitReveal, ScrollHighlight, ParticleField, ui/button
sections/ Hero, Manifesto, Services, WhyUs, ValueDrivers, CTA, Footer
hooks/ useSmoothScroll (Lenis↔GSAP), useReveal
lib/ utils (cn)
Content is adapted from SquaredX's own positioning; this is a concept/portfolio build, not the official site.