All case studies

DEV3 Technologies · own product

DEV3 Vitalis: a clinic WordPress theme with a live 3D helix-to-heart story

Our own WordPress theme for clinics, hospitals and diagnostic labs: a scroll-driven three.js story from a DNA helix to a holographic heart, departments, doctors, a weekly timetable and an appointment slot picker, all editable in Elementor.

Industry
Healthcare (WordPress)

Live project preview

Client systems are private — screenshots shown where permitted.

DEV3 Technologies · own product — screenshots
Clinical 3D hero — a glassy DNA double helix turns beside the Care, down to the detail headline, booking buttons and service badges.

Clinical 3D hero — a glassy DNA double helix turns beside the Care, down to the detail headline, booking buttons and service badges.

The challenge

A clinic website is mostly practical: which departments there are, which doctor sees patients on which day, when the clinic is open and how to ask for an appointment. Most medical themes cover this with a stock photo of a smiling doctor and a booking plugin that the clinic then has to configure separately. We wanted a calm, modern clinic theme with a 3D story that feels clinical rather than flashy, where departments, doctors, timetables and appointment requests are ordinary WordPress content the front desk can edit, and where nothing in the demo could be mistaken for real medical advice.

Our solution

We built Vitalis as a classic PHP theme with theme.json, on a shared DEV3 theme core and the DEV3 Theme Toolkit plugin that powers all nine DEV3 themes.

Key design decisions

  • One morphing scene. The helix, cells, heart and body scan are stages of one procedural three.js scene, blended by a single phase value, so the story flows instead of cutting between models.
  • Clinic blocks from simple markers. The timetable, doctor cards, opening hours and slot picker are placed with one HTML marker each, such as data-vitalis-timetable="all", and the theme renders them on the server from the Doctors post type.
  • Booking through the form you already use. The slot picker fills the department, doctor, date and time fields of a Contact Form 7 form instead of running its own booking engine. Clinics confirm real bookings in their own practice system.
  • No faces, no claims. Doctors get generated monogram portraits, testimonials are badged as samples, and a medical notice in the Customizer says the demo content is fictional and not medical advice.
  • Quality tiers. The engine picks a tier per device and steps down if the frame rate drops; reduced-motion, Save-Data and no-WebGL visitors see a still poster while the text stays in the HTML.

Results

Vitalis ships as a complete theme with a one-click demo: 6 departments and 10 doctors with their own Elementor pages and timetables, 15 WooCommerce products with 3D views, 6 journal posts and 3 forms, plus 27 block patterns and a child theme.

It passes the suite's quality gates: php -l and phpcs (WordPress Coding Standards 3 and PHPCompatibilityWP 7.4+) with zero errors, the Theme Check plugin, the engine size budget (about 213 KB gzip), an automated WooCommerce run from add to cart to the order-received page, and an Elementor editor test where changing a control updates the live scene.

Vitalis is available on the DEV3 marketplace.

Setup guide

Requirements

  • WordPress 6.0 or newer and PHP 7.4 or newer
  • Elementor (free), WooCommerce and Contact Form 7 (WordPress offers to install them)
  • Elementor Pro is supported but not required

Install

  1. Download the ZIP from your DEV3 account and unzip it. Do not upload the download itself.
  2. In WordPress go to Appearance → Themes → Add New → Upload Theme, choose dev3-vitalis.zip and click Install Now, then Activate.
  3. When the notice appears, click Begin installing plugins and install and activate the DEV3 Theme Toolkit (required) and the recommended plugins: Elementor, WooCommerce and Contact Form 7. You can also upload dev3-theme-toolkit.zip under Plugins → Add New → Upload Plugin.
  4. Optional: upload and activate dev3-vitalis-child.zip if you plan to change the theme's code.

Import the demo

  1. Log in as an administrator (a super admin on multisite), so the HTML widgets that hold the timetable, hours and booking markers keep their markup.
  2. Go to Appearance → DEV3 Demo and click Import demo.
  3. Wait for the import to finish. It adds the pages (Home, Departments, Doctors, Timetable, Book an appointment, Health packages, About, Patient information, Journal, Contact and the shop pages), 6 departments, 10 doctors with timetables, 15 WooCommerce products, 6 journal posts, 4 sample testimonials, 3 Contact Form 7 forms (appointment, contact, newsletter), menus, footer widgets and theme settings.
  4. Visit the home page and scroll through the 3D story.

From WP-CLI you can run wp --user=admin dev3tk demo import, and wp dev3tk demo reset removes only the items the importer created.

After importing

  • Set your emergency line, opening hours, appointment slot length and medical notice in Appearance → Customize → DEV3 Vitalis Options → Clinic details.
  • The demo clinic, doctors, prices and articles are fictional and are not medical advice. Replace them with your own reviewed content before you go live.

Updates

Download the new version from Account → Downloads on dev3.tech and upload dev3-vitalis.zip again. Your changes in the child theme are kept.

How to use

Change the 3D story

Open the home page with Edit with Elementor. The first widget is a 3D Scene with the preset Vitalis: helix to heart in Fixed background (scroll story) mode. Each section below it has Advanced → DEV3 3D chapter switched on; the five default stops are helix, cells, heart, body scan and booking.

  • Reorder, duplicate or remove chapter sections to change the story.
  • Set Copy side to the side your text is on; the 3D subject moves to the other side. On phones the copy sits at the bottom.
  • Fine-tune a stop with Scene state JSON, for example {"phase":2,"spin":0.3,"yaw":0.2,"scan":0,"warm":0.35}. phase runs from 0 (helix) to 1 (cells), 2 (heart) and 3 (scan).
  • In the widget, change the hologram, halo and room colours, helix rotation speed, light intensity and the soft caustic light.

Add departments and doctors

  • Departments live under Departments in the dashboard. Each one can be edited with Elementor.
  • Doctors live under Doctors. Set the Speciality, list specialities in the excerpt, and enter the week in Timetable, one line per day, for example Mon: 09:00-13:00, 14:00-17:00. Put each doctor in a Doctor category named like the department; the slug links the two.

Place the timetable, hours and booking

Add an Elementor HTML widget or a Custom HTML block containing one marker:

  • <div data-vitalis-timetable="all"></div> – the weekly grid (or dept:cardiology, doctor:123)
  • <div data-vitalis-doctors="all"></div> – doctor cards with a Book button (or a department slug)
  • <div data-vitalis-hours></div> – opening hours with a live Open now / Closed now state
  • <div data-vitalis-booking></div> – the appointment slot picker

The slot picker fills the your-department, your-doctor, your-date and your-time fields of the Appointment request Contact Form 7 form. Links such as /book-an-appointment/?doctor=123 or ?department=cardiology preselect a choice. The picker shows availability from your timetables; confirm real bookings in your practice system.

Customizer settings

Go to Appearance → Customize → DEV3 Vitalis Options: Clinic details (emergency strip, opening hours, slot length, medical notice), Colours & Fonts, Header, 3D & Motion (quality auto, high, low or off, loader, cursor, smooth scroll, chapter rail), Footer, Shop and Blog.

Sell packages and lab tests

Health packages and lab tests are Virtual WooCommerce products, so checkout skips shipping; pharmacy items ship normally. Use a label attribute for package levels. In the product's 3D view tab choose the Vitalis: product studio preset with parameters such as {"object":"bottle","title":"Vitamin D3"}, or paste a GLB URL.

Related case studies

DEV3 Technologies · own product · Gyms, fitness and yoga studios (WordPress theme)

DEV3 Pulse: a gym, fitness and yoga WordPress theme with a self-building class timetable and a 3D kettlebell

Our own energetic WordPress theme for gyms, fitness and yoga studios: classes with intensity, a weekly timetable built from class schedules, trainers, memberships with a yearly toggle and comparison, calculators with a health note, workshops and free-trial booking.

DEV3 Technologies · own product · Creative agencies and portfolios (WordPress theme)

DEV3 Kinetic: a type-led creative agency WordPress theme with a work scroller, case studies and a 3D blob

Our own dark, type-led WordPress theme for creative agencies and portfolios: kinetic variable-font type, cursor labels, a pinned horizontal work scroller, self-building case studies, work filters with a list view, a showreel player and a project brief, with one small 3D accent.