Stacks4Stacks

Smashing Magazine did an article in 2019, discussing what creative text effects were trending in web design. Amongst the list, neon text was commended as an interesting effect to build into websites. Especially amongst websites dealing with entertainment and creative industries. As we move into another new decade, there's an opportunity to reminisce at art and design of a bygone era - focusing on something that's quintessentially 70s and 80s.

No neon text stack existed for RapidWeaver, so we took it upon ourselves to create a new one, to share. We made use of this same stack for some creative advertising on Stacks4Stacks and ThemeFlood. Needless to say, it worked great and gained plenty of attention! Within a couple of hours, people were emailing to ask how to accomplish the same effects.

Examples

Here are some examples of our NeonText stack in action. These are not GIFs or video - these are actual renderings of the NeonText stack:
 

 
This example was created with a Shady and BoxCanvas stacks. Then NeonText stacks were placed inside, a single stack for each block of text. Different colours font faces and animation effects have been applied, to demonstrate the various styles possible.

Font Awesome Icons are possible within your text, if your chosen theme supports them. In the examples above, we used Font Awesome HTML code, alongside the normal text. Regular styled icons (unfilled icons with an outline) instead of solid-filled icons look more authentic for neon signs. Icons like the heart work well:

<i class="far fa-heart"></I>

Setup

Once installed into Stacks and RapidWeaver, open your Stacks Library and add a NeonText stack to the page. All options for this stack are listed in the Stacks side panel. Enter your text here and customise the styling as required.

NeonText works best for short headlines. It is less suitable to use for larger blocks of text. Too much text gives a fatiguing feeling! Short, snappy headlines work better. Worth noting that the animation effect can be disabled altogether if it's not wanted.

To make particular letters in your text unlit (burnt out), add a span tag around them with a class attribute of failed applied like this:

S<span class="failed">uper</span>mar<span class="failed">ke</span>t

To make particular letters blink (to emulate imminent failure), add a span tag around them with a class attribute of failing-1 applied like this:

S<span class="failing-1">uper</span>mar<span class="failing-3">ke</span>t

Changing the number in the class name between 1 and 5 gives a different blinking sequence. This makes the failure look more randomised in nature across the neon sign.

If you need to make your NeonText stack a link, just nest it within one of our LinkBox stacks. Other stacks like Shady, TintStack and BoxCanvas could also prove useful too.