The template
What it includes
WebGL liquid cover
A floating cover with liquid distortion that smoothly follows the cursor across projects in the index.
- three.js
- Custom shader
- Mouse tracking
Code-generated covers
Six generative styles drawn in the browser from project data, easily replaced with your own images in one step.
- Grid
- Orb
- Stripes
- Type
- Arcs
- Waves
Discipline filters
Filter work by identity, web, 3D, motion, art direction or product with immediate transitions.
In-depth case study page
Dedicated page (project.html) reading content.js to assemble challenge, process steps, key metrics and client quotes.
Light and dark mode
Header switcher that stores visitor preference while respecting operating system settings.
Real-progress loader
Loading bar reflecting actual progress while covers generate, three.js initialises and shaders compile.
Integrated contact form
Client-side validation with project types and budget brackets, ready to hook up to Formspree, Basin or a custom endpoint.
Motion with GSAP
Locally hosted GSAP 3.12 and ScrollTrigger without external dependencies, for smooth and refined motion.
English, Spanish and accessible
Live bilingual switcher with no reload, accessible dialog mobile menu with focus trap, and touch-friendly inline covers.
Screenshots
The demo, screen by screen
Click an image to enlarge it. The arrow keys move between images and Esc closes the viewer.
Specifications
Under the hood
- Stack
- HTML, CSS and plain JavaScript
- 3D and motion
- three.js (MIT) and GSAP Standard No Charge, included in the zip
- Fonts
- Archivo and DM Mono (SIL OFL), served locally
- Build
- None. No framework, no bundler, no packages to install
- External requests
- None. Fonts and libraries are served from your own host
- Size
- A zip of about 1.3 MB
- Languages
- English and Spanish, with a live switch
- Browsers
- Current browsers with WebGL. Without WebGL, undistorted covers are shown
- Hosting
- Any static host: Netlify, Vercel, Cloudflare Pages, GitHub Pages
- Contact form
- Formspree, Web3Forms, Basin or any custom JSON endpoint
- Accessibility
- Keyboard navigation, dialog focus trap and support for reduced motion
FAQ
About NOA
How does the floating cover work on mobile or without WebGL?
The WebGL liquid effect is enabled for mouse navigation on desktop. On touch screens, each project displays its cover inline in the row, and without WebGL undistorted covers are shown.
Can I use my own photos instead of generated covers?
Yes. Projects can use any of the 6 generative styles in code or your own JPG, PNG or WebP images by setting the image and gallery fields in content.js.
How do I receive messages from the contact form?
In demo mode the form validates client-side and sends nothing. Set site.formEndpoint in content.js to your Formspree, Basin or custom API URL to receive submissions.
Licence, payment and download: general questions
Open the demo, then decide.
- The templateThe portfolio in HTML, CSS and JavaScript, case study page, with three.js, GSAP and fonts included.
- Bilingual documentationA docs/index.html page in English and Spanish, with a section on common problems.
- Licence and creditsThe licence in plain terms, and credits for three.js (MIT), GSAP and the fonts (SIL OFL).