🫀 your-heart

An open-source web application that generates a personalized, beating 3D heart model based on your height, weight, age, and health conditions. Depending on the data you enter, the heart's size, beat rate, rhythm, and vessel color change; a real-time ECG (pulse) graph runs in sync with the heartbeat.

Built with Vue 3 + TypeScript + Three.js and ready to deploy to Firebase Hosting. No heavy extra dependencies — only three is used for 3D rendering, and the heart model is generated procedurally (no external model file required).

Features

• Personalized 3D heart — procedural ventricles, atria and great vessels scaled by body surface area.
• Great vessels — aortic root with sinuses of Valsalva, arch with brachiocephalic, carotid and subclavian branches, pulmonary trunk bifurcating in front of the aorta, venae cavae and four pulmonary veins. Cut ends show wall thickness and a glossy lumen; the aorta and pulmonary arteries expand with every systole (arterial pulse in the vertex shader).
• Coronary tree — LAD, RCA and circumflex arteries with diagonal, marginal and posterior descending branches, plus the great, middle and small cardiac veins. Branches are laid out on the surface procedurally and grow thinner toward their tips; epicardial fat fills the atrioventricular and interventricular grooves.
• Physiological beat — systole is rendered in a vertex shader as a base-anchored contraction: the apex shortens toward the base, the ventricles squeeze radially and twist, then relax; the atria contract just before each beat (atrial kick). Systole duration scales with heart rate (Bazett-style).
• ECG monitor — scrolling lead II trace with PQRST morphology. The R wave is drawn ~200 ms before the mechanical contraction, as in a real heart.
• Health condition response — hypertension, hypotension, tachycardia, bradycardia, arrhythmia, anemia, atherosclerosis, and heart failure; each alters size, rhythm, contractile strength, vessel thickness and colors.
• Modern & soft UI — smooth gradients, light/dark theme support, mobile-friendly, Turkish / English.
• Accessibility — supports prefers-reduced-motion and prefers-color-scheme.

How it works

Profile data is converted into heart parameters via a pure function (src/composables/useHeartModel.ts):

• Heart size — derived from body surface area calculated with the Mosteller formula.
• Resting heart rate — estimated from age, sex, activity level, and BMI.
• Blood pressure, rhythm, color — adjusted by the effects of conditions (src/data/conditions.ts).

The coefficients are not guesses; age-based heart rate, obesity effects, heart mass scaling with BSA, and the impact of each condition are grounded in reliable literature (AHA, ACC/AHA, ASE, StatPearls, PubMed). For the detailed numerical table and references, see: docs/physiology-references.md.

⚠️ Disclaimer: This project is intended for educational and visualization purposes only. Values are rough realistic approximations and do not constitute medical diagnosis or advice.

Privacy & security

• Fully static, client-only: no backend, no accounts, no analytics, no third-party requests.
• The profile you enter never leaves the browser; only the UI language is stored in localStorage.
• firebase.json ships a strict Content-Security-Policy and hardening headers (nosniff, frame-ancestors 'none', Referrer-Policy, Permissions-Policy). If you want to embed the app in an iframe, relax frame-ancestors / X-Frame-Options there.
• See SECURITY.md for how to report a vulnerability.

Development

Requires Node.js 20.19+ (or 22.12+).

npm install
npm run dev        # local development server
npm run typecheck  # type-check only
npm run build      # type-check + production build (dist/)
npm run preview    # preview the production build locally

Deploy to Firebase Hosting

The build output goes to the dist/ folder and firebase.json serves that folder. .firebaserc (your Firebase project id) is intentionally git-ignored; create it locally with firebase use --add before deploying.

npm run deploy   # builds and deploys to hosting
# or
npm run build && firebase deploy --only hosting

Project structure

src/
  App.vue                     flow: form → 3D result (prefetches the 3D chunk while you fill the form)
  main.ts                     app bootstrap
  i18n.ts                     Turkish / English strings, language persistence
  types.ts                    type definitions
  data/conditions.ts          conditions and their numeric effects
  composables/useHeartModel   profile → heart parameters (pure logic)
  three/HeartScene.ts         Three.js scene: procedural heart, coronary tree, beat shader
  components/
    IntakeForm.vue            height/weight/age/sex/activity/condition input
    HeartViewer.vue           canvas hosting the 3D heart (lifecycle, resize, visibility)
    VitalsMonitor.vue         ECG trace, live heart rate and blood pressure readouts
    LangSwitch.vue            language toggle
docs/
  physiology-references.md    literature behind every coefficient

Contributing

Issues and pull requests are welcome. Please keep the model procedural (no binary model files), keep new physiological coefficients referenced in docs/physiology-references.md, and run npm run build before opening a PR.

License

MIT