This should work with recent desktop versions of Chrome or Firefox. It was coded using Vanilla JS and MathJax.

Click or right-click into the upper graph or press the left/right arrows to change the input function $f$. Press 1, 2, 3, or 4 to select an integer frequency $\xi$ or click anywhere into the lower right graph to select any frequency.

Press r to display the real part of the transform, i for the imaginary part, or a for the absolute value. Press n for no display (which is the default). (Or click on the left of the vertical axis to switch between these four views.) Use the up/down arrows to change the factor $L$ and use 0 to reset this factor to one. Use q to restart the animated dots at $t=0$.

Note that the black dot isn't really showing the integral but a scaled version of it (so that it fits) - it's rather like the "centroid" of the orange curve.

Copyright (c) 2018, Prof. Dr. Edmund Weitz. Impressum, Datenschutzerklärung.