mirror of
https://github.com/Aroy-Art/Aroy-Art-Site.git
synced 2024-12-26 19:44:24 +01:00
Fix: reorder post intro
This commit is contained in:
parent
c9aea406ff
commit
fdc5aff9af
1 changed files with 17 additions and 19 deletions
|
@ -12,6 +12,23 @@ draft: false
|
||||||
slug: cyberpunk-style-glitch-text-walkthrough
|
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>
|
<style>
|
||||||
.post-single-content .hero {
|
.post-single-content .hero {
|
||||||
font-size: clamp(40px, 10vw, 100px);
|
font-size: clamp(40px, 10vw, 100px);
|
||||||
|
@ -506,25 +523,6 @@ slug: cyberpunk-style-glitch-text-walkthrough
|
||||||
}
|
}
|
||||||
</style>
|
</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
|
## The Effect
|
||||||
|
|
||||||
This is how the complete effect looks like
|
This is how the complete effect looks like
|
||||||
|
|
Loading…
Reference in a new issue