CALMA
A 3D human figure drawn with thousands of light particles breathes on the home page. Scrolling guides the camera through body areas—neck, lower back, knee—lighting each in ember, and visitors can pick an area to see its treatments. Around it, a treatment catalogue with filters, individual treatment pages, team profiles with abstract particle portraits, five-step booking and pricing.
69 €VAT included · one-time payment
- Size
- ~2.4 MB
- Languages
- English and Spanish
- Build
- None
The template
What it includes
3D human figure made of light particles
Thousands of light particles trace an anatomical body against a dark background, with no skin and a neutral mannequin face. The figure breathes in a calm cycle and can be turned to see it from any side.
- three.js
- Light particles
- Still fallback
Scroll-driven body tour
As you scroll down the home page, the camera moves across the body, pausing at specific areas—neck, lower back, or knee. Each area lights up in ember with a steady pulse while the figure turns to reveal it.
Interactive exploration and body area filter
Visitors can click any of the eight body areas to focus the camera and see which treatments address it. The same interactive figure acts as a visual filter on the treatments page.
- 8 body areas
- Turn and focus
- Visual filter
Treatment catalogue and detail pages
Complete listing with filters by body area, discipline type, duration and price. Each treatment has a dedicated page detailing the session step by step, multi-session packs, FAQs and assigned practitioner.
Team with abstract light portraits
Practitioner profiles with specialty, registration number, languages, training and weekly hours. Without requiring real photos, each profile features a particle bust with a unique light accent; real photos can be used instead if preferred.
Five-step booking with availability
Guided five-step flow: treatment, practitioner, date and time, contact details and confirmation. Calculates available slots based on each specialist's schedule, holidays and session duration, with browser validation.
- 5 steps
- Practitioner schedules
- Browser validation
Flexible booking and calendar integration
Receive appointment requests by email or database using Formspree, Web3Forms, Basin or a custom endpoint. If you already use an external calendar like Doctoralia, Calendly, Cal.com or Acuity, you can link directly to it.
Pricing, packs and first visit guide
Price table per session and multi-session packs organised by discipline, cancellation policy, a four-step first visit guide and healthcare regulatory notice in the footer.
English, Spanish and accessible
Live language switch with no reload, full keyboard navigation and reduced-motion support. In browsers without WebGL an interactive still image replaces the 3D figure while preserving the body zones, and on mobile it optimizes density to stay smooth.
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
- three.js r160 (MIT) and MakeHuman base mesh (CC0), included in the zip
- Fonts
- Instrument Serif and Instrument Sans (SIL OFL 1.1), 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 2.4 MB
- Languages
- English and Spanish, with a live switch
- Browsers
- Current browsers with WebGL. Without WebGL, an interactive still image replaces the 3D figure
- Hosting
- Any static host: Netlify, Vercel, Cloudflare Pages, GitHub Pages
- Booking
- Five-step flow connected to Formspree, Web3Forms, Basin, a custom JSON endpoint or an external booking link
- Accessibility
- Keyboard navigation, screen reader support, accessible controls and reduced-motion support with still figure fallback
FAQ
About CALMA
How do I add or change treatments and body areas?
All treatments are defined in data.js with their duration, price, multi-session packs, associated body areas and specialist. You only need to duplicate an existing one and update the fields. The eight body areas come predefined, and the guide explains how to assign them and customize their descriptions.
How do I receive appointment bookings?
In demo mode the booking form validates in the browser without sending anything. Add your Formspree, Web3Forms, Basin or custom API URL to bookingEndpoint in data.js to receive each booking by email or in your database. If you already use Calendly, Doctoralia, Cal.com or Acuity, you can provide your link in bookingUrl instead.
What happens on devices without WebGL or slower phones?
Without WebGL or when reduced motion is enabled, the 3D figure is replaced by an interactive still image with the same glowing heat points, keeping full functionality. On phones, the figure cuts particle count by nearly half and scales down resolution automatically if the device struggles.
Can I use real photos of the team and clinic?
Yes. By default the template uses abstract particle portraits for the team and figure close-ups for treatments. Simply add your photographs to the img folder and set their path in the images field of each person or treatment in data.js to replace them.
Licence, payment and download: general questions
Open the demo, then decide.
- The templateThe clinic site in HTML, CSS and JavaScript, with treatments, team, booking, three.js, Lenis and the fonts included.
- Bilingual documentationA detailed user guide in English and Spanish with instructions for treatments, booking connections, schedule management and troubleshooting.
- Licence and creditsThe licence in plain terms, and credits for three.js (MIT), Lenis (MIT), MakeHuman (CC0) and the fonts (SIL OFL 1.1).