Skip to content
Music & Production Medium #tension#theory

Tension and Release

Dissonance pulling toward consonance - the engine of musical drama.

A free, animated tension and release you can read here or embed on any website, from Scrollchart.

Tension and Release

Tension and ReleaseDissonance climbs through a suspension, resolves on tonic: the engine of musical dramaDepartureSuspensionResolutionTonic rest0255075100Tension (0 = consonance, 100 = max dissonance)1591317212529BeatSuspension peak7-4 over V7V/V arrivessecondary dominantTonicI resolvesConsonanceunisons, 5ths, 8thsMild tensionmajor/minor 3rds, 6thsDissonancetritone, 7th, 2ndSuspensionheld tone, delayed res.interval types4-4 suspension: held 4th resolves down a half-step to the major 3rd on tonic

Tension curve over a phrase: dissonance climbs through suspensions and chromatic motion, releases on a tonic resolution.

Good for

  • Music theory articles explaining suspensions and cadential formulas
  • Songwriting guides on controlling phrase energy and listener anticipation
  • Ear-training posts demonstrating why V7 to I sounds satisfying

Source & accuracy

This tension and release is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

Dissonance as narrative tool

Dissonance is instability; consonance is rest. A minor second (C and B natural, only one semitone apart) is maximally dissonant and creates urgency. A major third is consonant and comfortable. In dramatic music, composers use dissonance to create conflict and consonance to resolve it. Without dissonance, there is no drama, only monotone comfort.

The power comes from contrast. A song built entirely on major triads grows boring. Introducing a diminished chord or a suspended note injects surprise. Resolving that surprise back to the major chord feels earned and satisfying. This push-pull is the engine of musical storytelling.

Harmonic and melodic tension

Harmonic tension comes from chord choice. A vi chord in a major key adds darkness without leaving the home center. A tritone (augmented fourth, the 'devil's interval') between two notes creates maximum tension. Melodic tension comes from note choice: a leading tone (the 7th scale degree) pulls toward the octave, creating expectancy.

Producers and composers exploit both. A vocal melody that reaches a high note over a diminished chord creates maximum impact precisely because both melody and harmony are tense. Timing the release of that tension (resolving the melody down, moving to a major chord) amplifies the emotional payoff. Every dramatic moment in music hinges on this interplay.

Embed this diagram

Add this animated tension and release to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated tension and release for any website.
Who uses it
Music & audio blogs.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="tension-release" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Tension and Release" for my website?
Scrollchart provides "Tension and Release" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a tension and release in WordPress or a static site?
Paste the HTML snippet from the Scrollchart diagram page into your WordPress post (in HTML/code view), your Webflow embed block, or directly into a static HTML file. No plugin is needed. The diagram loads from scrollchart.com and paints in as the reader scrolls.