Aroy/Aroy-Art-Site
1
0
Fork 0
mirror of https://github.com/Aroy-Art/Aroy-Art-Site.git synced 2024-12-25 19:14:25 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fix: reorder post intro

Browse source
This commit is contained in:
Aroy-Art 2024-09-11 22:34:18 +02:00
parent c9aea406ff
commit fdc5aff9af
Signed by: Aroy
GPG key ID: 583642324A1D2070
1 changed files with 17 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,6 +12,23 @@ draft: false
slug: cyberpunk-style-glitch-text-walkthrough
---
This came out of a 24-hour work sprint to replicate some sophisticated video VFX and 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 :)
**Core principles:**
* Keep the text legible most of the time
* Don't throw too many glitches in per second. Give it space to breathe
* Whitespace never hurt anyone
* Blurs & glows lend a feeling of realism in dark environments (queue neon)
---
{{< toc >}}
---
<style>
.post-single-content .hero {
font-size: clamp(40px, 10vw, 100px);
@ -506,25 +523,6 @@ slug: cyberpunk-style-glitch-text-walkthrough
}
</style>
# Walkthrough
This came out of a 24-hour work sprint to replicate some sophisticated video VFX and 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 :)
**Core principles:**
* Keep the text legible most of the time
* Don't throw too many glitches in per second. Give it space to breathe
* Whitespace never hurt anyone
* Blurs & glows lend a feeling of realism in dark environments (queue neon)
---
{{< toc >}}
---
## The Effect
This is how the complete effect looks like