Turn any word or phrase into custom marquee letters, complete with twinkling lights. Change the wording, colors, size, spacing, and alignment to create a marquee that fits right into your design.
Say WHAT You Want to Say the WAY You Want to Say it
MARQUEE LETTERS
Turn any word or phrase into custom marquee letters with animated twinkling lights.
Type your wording once, then customize the size, colors, spacing and alignment for your design.
WHAT YOU'LL NEED
A Showit canvas
One Embed Code box
No Class Selectors are needed.
HOW TO INSTALL
01 — ADD THE CODE
Add an Embed Code box to your Showit canvas.
Open the box and paste in the entire Marquee Letters code.
Position and size the Embed Code box where you want your marquee to appear.
02 — ADD YOUR WORDS
At the top of the code, find:
MARQUEE_TEXT
Replace the text between the backticks with your own wording.
Example:
var MARQUEE_TEXT = `MAKE IT YOURS`;
You only need to enter your wording once. It will be used on both desktop and mobile.
You can use:
A–Z
0–9
. , : ! ? ' " & - +
Because your wording is entered between backticks, you can use apostrophes and quotation marks normally.
Example:
var MARQUEE_TEXT = `IT'S "SHOWTIME"!`;
03 — SIZE YOUR MARQUEE
At the top of the code, find:
DESKTOP_FONT_SIZE = 80;
MOBILE_FONT_SIZE = 60;
Change these numbers to make your marquee letters larger or smaller.
DESKTOP_FONT_SIZE controls the letter size on desktop.
MOBILE_FONT_SIZE controls the letter size on mobile.
The width of the Embed Code box controls how much space your wording has and when it wraps. Resizing the box does not change the font size.
TIP: Open Preview to check your sizing and wrapping after making changes.
04 — FORCE A LINE BREAK
Your words will wrap automatically when needed.
If you want to choose exactly where a new line begins, add \n between the words.
Example:
var MARQUEE_TEXT = `MAKE\nIT YOURS`;
Otherwise, you don't need to add line breaks yourself.
05 — CHOOSE YOUR ALIGNMENT
Find:
DESKTOP_ALIGNMENT = "center";
MOBILE_ALIGNMENT = "center";
Choose:
"left"
"center"
"right"
Desktop and mobile alignment can be different.
06 — MAKE IT YOURS
The customization section also lets you change:
LETTER_COLOR — Letter color
OUTLINE_COLOR — Letter outline
OUTLINE_WIDTH — Outline thickness
BULB_COLOR — Bulb color
SOCKET_COLOR — Bulb rim color
DESKTOP_LETTER_SPACING — Space between letters on desktop
MOBILE_LETTER_SPACING — Space between letters on mobile
DESKTOP_LINE_HEIGHT — Space between lines on desktop
MOBILE_LINE_HEIGHT — Space between lines on mobile
WORD_SPACING — Space between words
LIGHTS_ANIMATE — Turns the twinkle on or off
TWINKLE_SPEED — Twinkle speed
TWINKLE_AMOUNT — Amount of brightness change
Everything below:
NO EDITING NEEDED BELOW THIS LINE
can be left alone.
07 — PREVIEW + TEST
Open Preview and check your desktop and mobile layouts.
Adjust the font size, spacing, alignment or width of the Embed Code box as needed for your design.
DESIGN TIP
Use DESKTOP_FONT_SIZE and MOBILE_FONT_SIZE to control the size of your letters.
Use the width of the Embed Code box to control the available space and wrapping.
Use \n only when you want a specific line break.
QUICK INFO
DIFFICULTY — Easy
REQUIRES — Embed Code
CLASS SELECTORS — No
AUTO-WRAPPING — Yes
DESKTOP + MOBILE CONTROLS — Yes
ANIMATED — Yes
MOBILE FRIENDLY — Yes
CODING KNOWLEDGE — Not required