Nonstop Energy
A five-page site with a procedural 3D hero for a California biomass exporter.
nonstopenergy.us
Role
Design & build
Timeline
2026
Type
Company website
Overview
Nonstop Energy is a California renewable-energy company: biomass sourcing, international trade and supply-chain logistics — almond wood chips, shells, sawdust and wood pellets shipped overseas.
The brief was a site that reads like a serious exporter rather than a local supplier, without losing the buyer who just wants a price. Five pages — home, about, products, quality, contact — with the quote request threaded through all of them.
The hero is a procedural three.js scene: low-poly terrain, drifting particles and leaf shards reacting to scroll and cursor. It ships with a static SVG fallback for reduced-motion users and a lighter mode on mobile, because a 3D hero that eats a phone battery is worse than no 3D hero.
Built with
- Next.js 16
- React 19
- TypeScript
- Tailwind v4
- three.js / R3F
- Motion
- Zod
- Vercel
What mattered
A quote form people finish
Zod-validated, multi-select product picker, preselected straight from a product page link, honeypot on the back end. Fewer fields, fewer reasons to bounce.
Motion with an off switch
Scroll reveals, animated counters and a product marquee — all of it respects prefers-reduced-motion and drops to a static composition.
SEO wired in from day one
Per-page metadata, OG image, sitemap and robots shipped with the build instead of getting bolted on after launch.