gitwtfhub

wtf is cardia-survey?

carolinacherry/cardia-survey — explained in plain English

Analysis updated 2026-05-18

13HTMLAudience · vibe coderComplexity · 2/5LicenseSetup · easy

TL;DR

A single browser page with a beating, animated 3D human heart that gets scanned like a sci fi medical device, with sound and no install required.

Mindmap

mindmap
  root((cardia survey))
    What it does
      Beating 3D heart
      Live scan sweep
      ECG waveform
      Record and replay
    Tech stack
      HTML CSS JS
      Three.js
      Web Audio API
    Use cases
      Portfolio demo
      Creative coding study
      Video capture for social posts
    Audience
      Vibe coders
      Creative developers
      Web designers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Study the single HTML file to learn how to animate a 3D model with Three.js.

REASON 2

Fork it as a starting point for another sci fi style browser demo.

REASON 3

Record the built in demo as a short video clip to share on social media.

REASON 4

Use it as a portfolio piece showing browser based audio and graphics work.

What's in the stack?

HTMLCSSJavaScriptThree.jsWeb Audio API

How it stacks up

carolinacherry/cardia-surveychingjh/ghostirenerachel/a4cv
Stars131313
LanguageHTMLHTMLHTML
Setup difficultyeasyeasyeasy
Complexity2/51/51/5
Audiencevibe codergeneralgeneral

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

Must be served over HTTP with a simple local server, opening the file directly does not work.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice, the bundled heart model and font have their own separate terms.

Wtf does this do

This project is a small, self contained web page that shows a beating, photoreal human heart floating in a studio, being scanned region by region like a sci fi medical device. Everything happens in the browser: there is no game engine and no build step. It is one HTML file that pulls in the Three.js graphics library from a CDN and uses the browser's built in Web Audio API for sound. On screen you get a heart that pulses at roughly 68 beats per minute, complete with a subtle brightness flash and a small thump each beat. Next to it runs a live scrolling heartbeat line, the kind you would see on a hospital monitor, timed to match the same beat. A glowing scan line sweeps across the heart's surface and locks onto specific spots, each lock triggering an expanding ring effect. A second camera shows a zoomed in, magnified view of whatever area is currently being scanned. All the sound, including an ambient hum, scanning ticks, lock chimes, and a heartbeat thump, is generated live rather than played from recorded audio clips. There is also a record button that captures the whole scene plus its audio straight to a video file, along with a replay button to reset the scene for another take. Because it uses ES modules and loads a 3D model file, it will not work if you just double click the HTML file. Instead you need to serve it through a simple local web server, using a one line command with Python, Node, or PHP, then open it in your browser and click once to turn on the sound. The project is built with plain HTML, CSS, and JavaScript plus Three.js and the Web Audio API, all inside a single index.html file. It is inspired by an earlier viral "floating rock" demo and reinterprets that idea as a human heart. The code is released under the MIT license, though the bundled 3D heart model and font keep their own separate terms.

Yoink these prompts

Prompt 1
Explain how the beating heart animation is driven by the beat clock in this index.html file.
Prompt 2
Show me how to swap the heart.glb model in this project for a different 3D model.
Prompt 3
Help me add a new scan region with its own lock chime sound to this scanner demo.
Prompt 4
Walk me through how the record and replay feature captures video and audio here.

Frequently asked questions

wtf is cardia-survey?

A single browser page with a beating, animated 3D human heart that gets scanned like a sci fi medical device, with sound and no install required.

What language is cardia-survey written in?

Mainly HTML. The stack also includes HTML, CSS, JavaScript.

What license does cardia-survey use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice, the bundled heart model and font have their own separate terms.

How hard is cardia-survey to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is cardia-survey for?

Mainly vibe coder.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.