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-containerh2{font-size:72px;/* Makes the title stand out */font-family:'Orbitron',sans-serif;/* A futuristic font choice */text-shadow:0020px#55BBBC;/* Enhances the glow */}.neon-flicker{color:#FFFFFF;/* Bright white for the text itself */text-shadow:0010px#55BBBC,0020px#55BBBC;/* Layers of glow */animation:neonFlicker 1.5sinfinitealternate;/* The flickering animation */}@keyframesneonFlicker{ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {text-shadow:0010px#55BBBC,0020px#55BBBC,0030px#55BBBC,0040px#55BBBC,0070px#55BBBC;color:#FFFFFF;} 20%, 24%, 55% {text-shadow:005px#55BBBC,0010px#55BBBC,0015px#55BBBC,0020px#55BBBC,0035px#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.