content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md

@@ -1,7 +1,7 @@
 ---
 title: Cyberpunk-Style Glitch Text Walkthrough
 date: 2024-07-23T18:35:26.560Z
-lastmod: 2024-07-26T17:49:19.234Z
+lastmod: 2024-07-24T20:43:47.560Z
 image: /images/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough/Peek 2024-07-24 22-34.gif
 description: Discover how to create a cyberpunk-style glitch text effect using pure CSS. This guide covers text layering, clip-paths, and animations for a dynamic, futuristic look. Dive in and start glitching!
 tags:
@@ -27,7 +27,6 @@ slug: cyberpunk-style-glitch-text-walkthrough
 
 .post-single-content .demo {
     height: 100px;
-    margin: 0 20px 0 20px;
     background: #fff;
 }
 
@@ -506,9 +505,18 @@ slug: cyberpunk-style-glitch-text-walkthrough
 }
 </style>
 
-# Walkthrough
+# The Effect
 
-This came out of a 24-hour work sprint to replicate some sophisticated video VFX and to make it more flexible.
+{{< details "The Effect (What we are going to make)">}}
+<div class="hero-container">
+    <div class="environment"></div>
+    <h2 class="hero glitch layers" data-text="近設計"><span>近設計</span></h2>
+</div>
+{{< /details >}}
+
+## Walkthrough
+
+This came out of a 24-hour work sprint to replicate some sophisticated video VFX in to make it more flexible.
 
 There's a lot of pieces that go into an effect like this. What follows is an outline of the animations and VFX concepts, all in pure css :)
 
@@ -525,17 +533,6 @@ There's a lot of pieces that go into an effect like this. What follows is an out
 
 ---
 
-## The Effect
-
-This is how the complete effect looks like
-
-{{< details "The Effect (What we are going to make)">}}
-<div class="hero-container">
-    <div class="environment"></div>
-    <h2 class="hero glitch layers" data-text="近設計"><span>近設計</span></h2>
-</div>
-{{< /details >}}
-
 ## Layers
 
 Create multiple layers to play with. For this example I'll use `::before` & `::after` elements, but this could just as easily be multiple div's overlapped, or whatever.
@@ -574,7 +571,7 @@ Create multiple layers to play with. For this example I'll use `::before` & `::a
 
 ## Paths
 
-Build out a set of clip-paths (I wrote up a [generator util](/tools/randomly-generated-clip-path/) for this project)
+Build out a set of clip-paths (I wrote up a <a href="/tools/randomly-generated-clip-path/">generator util</a> for this project)
 
 **Example Path:**