Experiment #1: Word Coalesce

Click on any of the following words to see adjacent matching letters merge into it.

As the Knight sang the last words of the ballad, he gathered up the reins, and turned his horse's head along the road by which they had come. "You've only a few yards to go," he said, "down the hill and over that little brook, and then you'll be a Queen – -But you'll stay and see me off first?" he added as Alice turned with an eager look in the direction to which he pointed. "I shan't be long. You'll wait and wave your handkerchief when I get to that turn in the road? I think it'll encourage me, you see."

Source

$quote = '...';
$words = explode(' ', $quote);
<div id="word-coalesce">
	<?php foreach ($words as $word): ?>
		<a href="#" data-word="<?= $word ?>"><?= $word ?></a>
	<?php endforeach; ?>
</div>

/**
 * An experiment that produces the following effect:
 * User clicks on a link and the letters in all sibling links
 * float and merge into the clicked link
 */
var wordCoalesce = {
    initialState: null,

    init: function () {
        // Remember initial state for reset button
        this.initialState = $('#word-coalesce').html();
        $('#reset').click(function (event) {
            event.preventDefault();
            wordCoalesce.reset();
        });

        // Break up all words into individual letters
        var words = $('#word-coalesce a');
        words.each(function () {
            var link = $(this);
            var word = link.html();
            var letters = word.split('');
            link.html('');
            for (var i = 0; i < letters.length; i++) {
                link.append('<span>' + letters[i] + '</span>');
            }
        });

        words.click(function (event) {
            event.preventDefault();
            var clickedWord = $(this);

            // Break up all receiver letters
            var receiverLetters = clickedWord.find('span');

            // Transform all other words into individual letters
            clickedWord.siblings().each(function () {
                var senderWord = $(this);
                var senderLetters = senderWord.find('span');

                // Copy letters to outside of link
                senderLetters.each(function () {
                    var originalLetter = $(this);
                    var letterClone = $(this).clone();
                    letterClone.css({
                        zIndex: 2,
                        position: 'absolute'
                    });
                    letterClone.addClass('clone');
                    originalLetter.before(letterClone);
                    originalLetter.css({opacity: 0});
                });

                senderLetters = senderWord.find('span.clone');
                senderLetters.each(function () {
                    var senderLetter = $(this);

                    // Fade out letters that will not be moved
                    if (clickedWord.data('word').indexOf(senderLetter.html()) == -1) {
                        senderLetter.animate({
                            opacity: 0
                        }, 2000);
                        return;
                    }

                    // Find a receiver letter to move this sender letter to
                    receiverLetters.each(function () {
                        receiverLetter = $(this);
                        if (receiverLetter.html() != senderLetter.html()) {
                            return;
                        }

                        senderLetter.animate({
                            left: receiverLetter.position().left,
                            top: receiverLetter.position().top
                        }, 3000, 'swing', function () {
                            $(this).fadeOut(200, function () {
                                $(this).remove();
                            });
                        });

                        // Break out of loop early to prevent moving a
                        // sender letter to multiple receiver letters
                        return false;
                    });
                });
            });
        });
    },

    reset: function () {
        $('#word-coalesce').html(this.initialState);
        this.init();
    }
};

#word-coalesce {
  font-size: 150%;
  position: relative;
}
#word-coalesce a {
  display: inline-block;
  z-index: 1;
}
#word-coalesce > span {
  display: inline-block;
  position: absolute;
  z-index: 2;
}