Matrix Text


Our Matrix Text plugin allow you to add a randomised, jumble effect to any section of body text on your Squarespace site. Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.

Step 1: Insert the JavaScript

Insert the following code into the site wide 'Header Code Injection' area or the 'Page Header Code Injection' area to implement this plugin on individual page(s) - more info below.

Copy & paste this code:

  1. Change #fafafa to match your site's content background colour and #fecb2f to your desired bar colour.

  2. To change the thickness (height) of your progress bar, replace 4px with the required amount. All 'height' and 'margin-top' values must be exactly the same.

<script src=""></script> <script>function randomChar(t){var e="";"lowerLetter"==t?e="abcdefghijklmnopqrstuvwxyz0123456789":"upperLetter"==t?e="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789":"symbol"==t&&(e=",.?/\\(^)![]{}*&^%$#'\"");var r=e.split("");return r[Math.floor(Math.random()*r.length)]}$.fn.shuffleLettersBody=function(t){var e=$.extend({step:7,fps:90,text:""},t);return this.each(function(){var t=$(this),r="";r=e.text?e.text.split(""):t.text().split("");for(var n=[],s=[],o=0;o<r.length;o++){var a=r[o];" "!=a?(/[a-z]/.test(a)?n[o]="lowerLetter":/[A-Z]/.test(a)?n[o]="upperLetter":n[o]="symbol",s.push(o)):n[o]="space"}t.html(""),function o(a){var f,i=s.length,h=r.slice(0);if(!(a>i)){for(f=Math.max(a,0);f<i;f++)f<a+e.step?h[s[f]]=randomChar(n[s[f]]):h[s[f]]="";t.text(h.join("")),setTimeout(function(){o(a+1)},1e3/e.fps)}}(-e.step)})},$(function(){$("matrixText p").shuffleLettersBody()});</script>

Site wide Code Injection:


Individual Page Header Code Injection:


Step 2: Insert text using Markdown Blocks

Insert your heading text in to a Markdown Block using the following format:

<matrixText><p>YOUR TEXT GOES HERE</p></matrixText>

Step 3: Set text alignment

If you're happy with left aligned text then go right ahead and click 'Apply'. However, if you want your Matrix Text to be centred or right-aligned, include the following style classes in your Markdown Text block. 

<matrixText style="text-align:center"><p>YOUR TEXT GOES HERE</p></matrixText>


<matrixText style="text-align:right"><p>YOUR TEXT GOES HERE</p></matrixText>


Step 4: Apply, Save & Refresh! ⚡️


Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.

Noughts & Ones