<div class="page">
<p data-scroll="in">Random iteration count</p>
<p class="reveal--2 words chars splitting" aria-hidden="true" data-scroll="in" data-splitting="" style="--word-total:3; --char-total:20;"><span class="word" data-word="Random" style="--word-index:0;"><span class="char" data-char="R" style="--char-index:0; --count:1; --char-0:"≥"; --char-1:"¶"; --char-2:"/"; --char-3:"˚"; --char-4:"░"; --char-5:"≤"; --char-6:"¢"; --char-7:"•"; --char-8:"≥"; --char-9:"˚";">R</span><span class="char" data-char="a" style="--char-index:1; --count:3; --char-0:"<"; --char-1:"…"; --char-2:"–"; --char-3:"`"; --char-4:"¶"; --char-5:"ƒ"; --char-6:"•"; --char-7:"?"; --char-8:"˜"; --char-9:"˜";">a</span><span class="char" data-char="n" style="--char-index:2; --count:1; --char-0:"░"; --char-1:"æ"; --char-2:"≥"; --char-3:"å"; --char-4:"÷"; --char-5:"–"; --char-6:"∫"; --char-7:"µ"; --char-8:"å"; --char-9:"▒";">n</span><span class="char" data-char="d" style="--char-index:3; --count:4; --char-0:"≈"; --char-1:"¬"; --char-2:"<"; --char-3:"…"; --char-4:"∞"; --char-5:"/"; --char-6:"?"; --char-7:"˙"; --char-8:"ß"; --char-9:"≈";">d</span><span class="char" data-char="o" style="--char-index:4; --count:4; --char-0:"?"; --char-1:"™"; --char-2:"–"; --char-3:"/"; --char-4:"˚"; --char-5:"▒"; --char-6:"˜"; --char-7:"?"; --char-8:"░"; --char-9:"÷";">o</span><span class="char" data-char="m" style="--char-index:5; --count:4; --char-0:"∆"; --char-1:"§"; --char-2:"ç"; --char-3:"∫"; --char-4:"µ"; --char-5:"™"; --char-6:"`"; --char-7:"§"; --char-8:"˙"; --char-9:"▓";">m</span></span><span class="whitespace"> </span><span class="word" data-word="iteration" style="--word-index:1;"><span class="char" data-char="i" style="--char-index:6; --count:3; --char-0:"∆"; --char-1:"∂"; --char-2:"?"; --char-3:"¶"; --char-4:"░"; --char-5:"…"; --char-6:"`"; --char-7:"≤"; --char-8:"∆"; --char-9:"≠";">i</span><span class="char" data-char="t" style="--char-index:7; --count:5; --char-0:"˚"; --char-1:"∂"; --char-2:"¶"; --char-3:"˚"; --char-4:">"; --char-5:"•"; --char-6:"`"; --char-7:"`"; --char-8:">"; --char-9:"░";">t</span><span class="char" data-char="e" style="--char-index:8; --count:3; --char-0:"•"; --char-1:"≥"; --char-2:"•"; --char-3:"∫"; --char-4:"•"; --char-5:"/"; --char-6:"∆"; --char-7:"∆"; --char-8:"∞"; --char-9:"µ";">e</span><span class="char" data-char="r" style="--char-index:9; --count:3; --char-0:"¶"; --char-1:"ç"; --char-2:">"; --char-3:"å"; --char-4:"¬"; --char-5:"≤"; --char-6:"∞"; --char-7:"≥"; --char-8:"˚"; --char-9:">";">r</span><span class="char" data-char="a" style="--char-index:10; --count:4; --char-0:"ª"; --char-1:"™"; --char-2:"`"; --char-3:"…"; --char-4:"<"; --char-5:"√"; --char-6:"≥"; --char-7:"≠"; --char-8:"÷"; --char-9:"å";">a</span><span class="char" data-char="t" style="--char-index:11; --count:5; --char-0:"¡"; --char-1:"≠"; --char-2:"˜"; --char-3:"æ"; --char-4:"…"; --char-5:"ƒ"; --char-6:"░"; --char-7:"ƒ"; --char-8:"√"; --char-9:"≥";">t</span><span class="char" data-char="i" style="--char-index:12; --count:3; --char-0:"≈"; --char-1:"æ"; --char-2:"¬"; --char-3:"å"; --char-4:"¡"; --char-5:"▓"; --char-6:"÷"; --char-7:"≥"; --char-8:"░"; --char-9:"≈";">i</span><span class="char" data-char="o" style="--char-index:13; --count:3; --char-0:">"; --char-1:"™"; --char-2:"∂"; --char-3:"∫"; --char-4:"æ"; --char-5:"░"; --char-6:"§"; --char-7:"•"; --char-8:"©"; --char-9:"©";">o</span><span class="char" data-char="n" style="--char-index:14; --count:5; --char-0:"µ"; --char-1:"µ"; --char-2:"√"; --char-3:"º"; --char-4:"<"; --char-5:"ƒ"; --char-6:"∆"; --char-7:"™"; --char-8:"÷"; --char-9:"å";">n</span></span><span class="whitespace"> </span><span class="word" data-word="count" style="--word-index:2;"><span class="char" data-char="c" style="--char-index:15; --count:2; --char-0:"∞"; --char-1:"ç"; --char-2:"▓"; --char-3:"˚"; --char-4:"?"; --char-5:"∂"; --char-6:"/"; --char-7:"`"; --char-8:"£"; --char-9:"ß";">c</span><span class="char" data-char="o" style="--char-index:16; --count:3; --char-0:"?"; --char-1:">"; --char-2:"ç"; --char-3:"∞"; --char-4:"?"; --char-5:"…"; --char-6:"˙"; --char-7:"▒"; --char-8:"ç"; --char-9:"æ";">o</span><span class="char" data-char="u" style="--char-index:17; --count:5; --char-0:"≠"; --char-1:"▒"; --char-2:"∫"; --char-3:"§"; --char-4:"∂"; --char-5:"©"; --char-6:"˙"; --char-7:"░"; --char-8:"<"; --char-9:">";">u</span><span class="char" data-char="n" style="--char-index:18; --count:3; --char-0:"∆"; --char-1:"¡"; --char-2:"¢"; --char-3:"<"; --char-4:"¡"; --char-5:"ª"; --char-6:"µ"; --char-7:">"; --char-8:"¬"; --char-9:"˚";">n</span><span class="char" data-char="t" style="--char-index:19; --count:2; --char-0:"∫"; --char-1:"¡"; --char-2:"–"; --char-3:"÷"; --char-4:"ß"; --char-5:"<"; --char-6:"√"; --char-7:"∫"; --char-8:"ƒ"; --char-9:"ß";">t</span></span></p>
</div>
*
box-sizing border-box
transition color .25s ease
:root
--dark #111
--light #fefefe
--color var(--dark)
--bg var(--light)
@media (prefers-color-scheme: dark)
--color var(--light)
--bg var(--dark)
body
background-color var(--bg)
display flex
align-items center
justify-content center
min-height 100vh
font-size 3.5rem
font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
font-weight bold
p
max-width 300px
&[data-scroll='in']
[data-char]:after
animation-name glitch-switch
.reveal--2 [data-char]:after
animation-iteration-count var(--count)
p:nth-of-type(1)
position absolute
opacity 0
.word
position relative
display inline-block
[data-char]
color transparent
position relative
&:after
--txt attr(data-char)
animation-duration .2s
animation-delay .5s
animation-timing-function steps(1)
animation-fill-mode backwards
content var(--txt)
color var(--color)
position absolute
left 0
top 0
@keyframes glitch-switch
0%
content var(--char-0)
10%
content var(--char-1)
20%
content var(--char-2)
30%
content var(--char-3)
40%
content var(--char-4)
50%
content var(--char-5)
60%
content var(--char-6)
70%
content var(--char-7)
80%
content var(--char-8)
90%
content var(--char-9)
100%
content var(--txt)
/**
* Themeing
*/
.page
align-items center
display flex
height 100vh
justify-content center
position relative
scroll-snap-align center
width 100vw
.container
height 100vh
overflow auto
overflow-x hidden
scroll-snap-type y mandatory
View Compiled
// NOPE
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.