The template
What it includes
Real-time 3D latency wave
Lines undulating in real time with three.js, reacting to mouse movement and raising incident peaks that resolve on their own.
- three.js
- WebGL
- SVG fallback
Interactive product demo
A full dashboard with tabs to inspect monitors, percentile charts, response times and regional breakdown.
- Monitors
- Incidents
- Status page
Six features, each with its own animation
Regions, alerts, percentiles, status page, scheduled jobs and certificates, each drawn in SVG and animated as it scrolls into view. Swap the texts for your product's.
Monthly and annual pricing
Billing toggle with automatic 20% annual discount calculation and badge for the featured plan.
Sign in and checkout pages
A sign-in page with password reset and a checkout page with the chosen plan's summary and billing details, with validation, loading and success states.
Gateway and auth ready
The guide explains step by step how to connect Stripe Checkout or Polar for payments, and Supabase or Clerk for authentication.
English, Spanish and accessible
Live language switch without reload, verified AA contrast, full keyboard navigation and reduced-motion support.
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), included in the zip
- Fonts
- Schibsted Grotesk and IBM Plex 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.1 MB
- Languages
- English and Spanish, with a live switch
- Browsers
- Current browsers with WebGL. Without WebGL, an SVG fallback is shown
- Hosting
- Any static host: Netlify, Vercel, Cloudflare Pages, GitHub Pages
- Payments
- Stripe, Polar or any gateway via checkoutUrl or custom endpoint
- Accessibility
- Keyboard navigation, visible focus and support for reduced motion
FAQ
About PULSO
How do I take real payments and log users in?
The checkout and sign in pages are front-end mock-ups without a backend. Set checkoutUrl to a Stripe Payment Link, or follow the guide to connect Stripe Checkout, Polar, Supabase Auth or Clerk.
What happens in a browser without WebGL?
The 3D latency wave is replaced by a static SVG fallback with the same pattern, and the landing keeps working smoothly without errors.
Can I edit the plans, features and demo data?
Yes. Prices, annual discount, plans, features and interactive demo data are in data.js, and interface texts in i18n.js. The guide explains how to customise every block.
Licence, payment and download: general questions
Open the demo, then decide.
- The templateThe SaaS landing in HTML, CSS and JavaScript, with login and checkout pages, three.js 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) and the fonts (SIL OFL).