Vibrant Wellness

A single-screen health-testing experience. No page scroll at all: a translucent, iridescent human figure floats in a lavender sky of drifting bubbles, a glass pill switches the body between female and male, and "Start Experience" sends the camera into the figure to browse seven test categories (neurology, cardiovascular, toxins, gut, hormones, genetics, longevity). Everything else is frosted-glass chrome in one saturated blue.

Rebuild: design-inspiration-rebuilds/events/vibrant-wellness (fictional content, generated images, open-source fonts; installed with the optional design-inspiration-rebuilds skill). Run it with npm install && npm run dev.

Design Tokens

:root {
  --sky-1: #d6c8f5; --sky-2: #c4b0ee; --blue: #0774c4; --ink: #282f3c;
  --glass: rgba(255,255,255,.28); --glass-line: rgba(255,255,255,.55);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
body { background: radial-gradient(120% 90% at 50% 20%, var(--sky-1), var(--sky-2)); }

• Type: a geometric sans (original: Plus Jakarta Sans, free on Google Fonts) in weight 300 at ~88px for the hero title, 600 for category names (26px). Every label, button and tag is a bold monospace (original: Ubuntu Mono Bold) in uppercase with letter-spacing: .14em, 13px.
• Shape: everything is a pill (border-radius: 999px) or a 24px glass card. No hard shadows; depth comes from blur, translucency and the 3D figure.
• Canvas: a transparent WebGL canvas over the CSS gradient, so the UI colours never depend on the renderer.

Motion Spec

Key excerpts

Iridescent glass material: src/scene.js

const glass = new THREE.MeshPhysicalMaterial({
  color: 0xbfaaf0, roughness: 0.18, metalness: 0, clearcoat: 1, clearcoatRoughness: 0.08,
  iridescence: 1, iridescenceIOR: 2.0, iridescenceThicknessRange: [300, 900],
});
scene.environment = new THREE.PMREMGenerator(renderer).fromScene(new RoomEnvironment(), 0.04).texture;
scene.environmentIntensity = 0.8;   // iridescence needs an environment to reflect

Body morph by regenerating a lathe: src/scene.js

// radius profile per height: [y, female r, male r]
const PROFILE = [[0, .62, .58], [.5, .56, .52], [.9, .42, .5], /* ... */ [2.2, .7, .9], [2.38, .5, .62]];
function lathe(t) {
  const pts = PROFILE.map(([y, f, m]) => new THREE.Vector2(f + (m - f) * t, y));
  return new THREE.LatheGeometry(pts, 48);
}
// ...
torso.geometry.dispose(); torso.geometry = lathe(state.sex);   // called from the gsap onUpdate

Sex toggle drives geometry and thumb together: src/toggle.js

const set = { x: b.offsetLeft - 6, width: b.offsetWidth, duration: .5, ease: 'expo.out' };
gsap.to(thumb, set);
const to = b.dataset.sex === 'male' ? 1 : 0;
gsap.to(state, { sex: to, duration: 1, ease: 'power2.inOut', onUpdate: applySex });

Camera as a tweened proxy: src/explore.js

const pos = near ? new THREE.Vector3(w.x * 0.4, w.y + 0.2, c.zoom) : WIDE.pos.clone().setZ(c.zoom + 1.3);
const look = near ? new THREE.Vector3(w.x, w.y - 0.55, 0) : WIDE.look;   // look below the organ: it sits in the upper half
gsap.to(view.pos, { x: pos.x, y: pos.y, z: pos.z, duration: 1.4, ease: 'power3.inOut', overwrite: true });
gsap.to(view.look, { x: look.x, y: look.y, z: look.z, duration: 1.4, ease: 'power3.inOut', overwrite: true });

DOM hotspot pinned to a 3D point: src/scene.js

export function project(local) {
  const v = body.localToWorld(local.clone()).project(camera);
  return { x: (v.x * .5 + .5) * innerWidth, y: (-v.y * .5 + .5) * innerHeight, front: v.z < 1 };
}

prefers-reduced-motion: bubbles and cursor sway stop, tweens run with zero duration, the pulse and equaliser animations are disabled.

Why Award-Worthy

1. One object carries the whole site. The glass figure is hero, navigation and data map at once; categories are places on a body, not links in a menu.
2. No scroll, no clutter. The page is one viewport. All structure comes from camera moves, which keeps the experience feeling like a product demo rather than a page.
3. Restrained palette. Lavender sky, white type and exactly one blue. The iridescent material supplies all the extra colour.
4. Glass UI that matches the 3D. Pills with blur and a white hairline echo the translucent figure, so chrome and scene look like the same material.
5. Mono labels against a soft sans. The uppercase monospace tags add a clinical, data-driven tone to otherwise gentle type.

Anti-patterns it avoids: no scroll-jacking, no loading-bar wall before the first interaction, no hard drop shadows, no carousel of stock photos; the canvas never blocks the UI (DOM sits above it).

Credits

• Original: vibrant.noomoagency.com by Noomo Agency. Design and content are the intellectual property of their creators.
• Recognition: Awwwards Site of the Day, Developer Award.
• This study is an independent clean-room analysis. The rebuild uses a fictional health brand, AI-generated images and open-source fonts; it contains no original code, assets or copy.