Mammoth Templates logomammoth templates

Home / Three.js / Agency Sites

Video preview

Agency Website is a complete five-page site for a small creative studio: home, work, case study, about and contact. Behind every page floats a field of translucent bubbles rendered in raw WebGL, with a fresnel rim, thin-film iridescence and soft highlights. The bubbles drift on their own, move away from the pointer, and glide with scroll, and their motion carries over between pages so the site feels like one continuous space.

The content is real and ready to replace. The work page has a category filter and a project grid with tilt and zoom hover effects. A single case-study template renders any project from a data file (challenge, approach, gallery, results, next project).

Project artwork is generated as SVG from each project palette, so there are no images to license or ship. The contact form has inline validation, accessible errors, a success state and a one-file mock API ready to connect.

The 3D is a small hand-written WebGL renderer (about 10 KB). No Three.js or any other library is included. Light and dark themes, CSS page transitions, a CSS bubble fallback when WebGL is missing, pause when hidden, a pixel-ratio cap and prefers-reduced-motion support are all built in.

Highlights

  • Raw-WebGL translucent bubbles with fresnel rim, iridescence and highlights; pointer repulsion and scroll parallax
  • Five real pages: home, work, case study, about, contact, sharing one stylesheet and script set
  • Smooth CSS page transitions with continuous bubble motion across pages
  • Filterable project grid with tilt, zoom and reveal hover effects
  • Data-driven case-study template (?p=slug) and generated SVG project artwork, no image files
  • Contact form with inline validation, aria-live status and success state; mock API isolated in js/api.js
  • Light and dark themes (system preference + toggle, remembered); CSS bubble fallback without WebGL
  • Responsive 360px to 1920px, keyboard accessible, reduced-motion aware, zero dependencies, CC0