By With MindWare’s prologue section mostly finished, I needed to create a good-looking chapter header. Given the game’s cyberpunk theme, a neon flickering text effect seemed like a good fit. Here’s what I came up with:
If you like the effect and would like to implement something similar in your own Twine project, then you need to add the following CSS styles to your story stylesheet:
.chapter-transition-container {
max-width: 100%;
padding: 40px;
margin-top: 50px;
text-align: center;
background-color: #000; /* Sets a dark background */
color: #55BBBC; /* A cyberpunk-esque light blue */
overflow: hidden; /* Keeps the flicker effect contained */
}
.chapter-transition-container h2 {
font-size: 72px; /* Makes the title stand out */
font-family: 'Orbitron', sans-serif; /* A futuristic font choice */
text-shadow: 0 0 20px #55BBBC; /* Enhances the glow */
}
.neon-flicker {
color: #FFFFFF; /* Bright white for the text itself */
text-shadow: 0 0 10px #55BBBC, 0 0 20px #55BBBC; /* Layers of glow */
animation: neonFlicker 1.5s infinite alternate; /* The flickering animation */
}
@keyframes neonFlicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow: 0 0 10px #55BBBC, 0 0 20px #55BBBC, 0 0 30px #55BBBC, 0 0 40px #55BBBC, 0 0 70px #55BBBC;
color: #FFFFFF;
}
20%, 24%, 55% {
text-shadow: 0 0 5px #55BBBC, 0 0 10px #55BBBC, 0 0 15px #55BBBC, 0 0 20px #55BBBC, 0 0 35px #55BBBC;
color: #669999;
}
}The flicker is achieved through the use of keyframe animations in CSS. This animation alters the intensity of the text shadow, simulating the characteristic flicker of neon lighting.
You can then do something like this:
<div class="chapter-transition-container">
<h2 id="chapterTitle" class="neon-flicker">Chapter 1</h2>
</div>That’s all from me for now. There’s a lot of work to be done to bring chapter 1 to life!