- let text = 'They were careless people, Tom and Daisy -- they smashed up things and creatures and then retreated back into their money or their vast carelessness or whatever it was that kept them together, and let other people clean up the mess they had made.';
- let n = text.length;
- let demo = [
- 	'fade in', 
- 	'unblur', 
- 	'unblur & fade in', 
- 	'unblur & grow', 
- 	'unblur & unshear', 
- 	'undissolve', 
- 	'wave fade in'
- ];
- let m = 10;
- let a = new Array(m + 1).fill(0);

mixin base(f = 0)
	feColorMatrix(values=`0 0 0 0 1 
												0 0 0 0 1 
												0 0 0 0 1 
												0 0 1 0 0` result='basetext')
	if f
		feColorMatrix(in='SourceGraphic' 
									values=`0 0 0 0 0 
													0 0 0 0 .5 
													0 0 0 0 0 
													0 1 0 0 0` result='vertdmap')
		feComponentTransfer(result='vertrect')
				feFuncA(type='discrete' tableValues='0 1 0')
		if f > 1
			feTurbulence(type='fractalNoise' baseFrequency='1.73'
			             result='noisemap')
	feColorMatrix(in='SourceGraphic' 
								values=`0 0 0 0 0 
												0 0 0 0 0 
												0 0 0 0 0 
												1 0 0 0 0` result='basegrad')
	

body(style=`--n: ${n}; --m: ${m}`)
	svg(width='0' height='0')
		filter#grainy(color-interpolation-filters='sRGB')
			feTurbulence(type='fractalNoise' baseFrequency='1.73')
			feColorMatrix(type='saturate' values='0')
			feBlend(in='SourceGraphic' mode='multiply')
		
		filter#reveal-0(color-interpolation-filters='sRGB')
			feColorMatrix(values=`0 0 0 0 0 
			                      0 0 0 0 0 
														0 0 0 0 0 
														1 0 0 0 0`)
			feComponentTransfer(result='alphamap')
				feFuncA(type='discrete' 
				        tableValues=a.map((_, i) => i/m).join(' '))
			feColorMatrix(in='SourceGraphic' 
			              values=`0 0 0 0 1 
														0 0 0 0 1 
														0 0 0 0 1 
														0 0 1 0 0`)
			feComposite(in2='alphamap' operator='in')
		
		filter#reveal-1(color-interpolation-filters='sRGB'
		                primitiveUnits='objectBoundingBox')
			+base
			- for(let i = 0; i <= m; i++)
				feComponentTransfer(in=i ? 'basegrad' : null)
					feFuncA(type='discrete' 
					        tableValues=a.map((_, j) => (i === j) ? .8*i/m + .2 : 0).join(' '))
				feComposite(in='basetext' operator='in')
				feGaussianBlur(stdDeviation=.015*(m - i)/m 
				               result=i ? null : `layer${i}`)
				if i > 0
					feBlend(in=`layer${i - 1}` result=`layer${i}`)
		
		filter#reveal-2(color-interpolation-filters='sRGB'
		                primitiveUnits='objectBoundingBox')
			+base
			- for(let i = 2; i <= m; i++)
				feComponentTransfer(in=i ? 'basegrad' : null)
					feFuncA(type='discrete' 
					        tableValues=a.map((_, j) => (i === j) ? i/m : 0).join(' '))
				feComposite(in='basetext' operator='in')
				feGaussianBlur(stdDeviation=.01*(m - i)/m 
				               result=i ? null : `layer${i}`)
				if i > 0
					feBlend(in=`layer${i - 1}` result=`layer${i}`)
		
		filter#reveal-3(color-interpolation-filters='sRGB'
		                primitiveUnits='objectBoundingBox')
			+base(1)
			- for(let i = 0; i <= m; i++)
				feComponentTransfer(in=i ? 'basegrad' : null result=`cell${i}`)
					feFuncA(type='discrete' 
					        tableValues=a.map((_, j) => 1*(i === j)).join(' '))
				feComposite(in='basetext' operator='in')
				feDisplacementMap(in2='vertdmap' scale=.15*(m - i)/m
				                  xChannelSelector='G' result='displace')
				feMorphology(in='vertrect' operator='dilate' radius=`0 ${.2*i/m}`)
				feComposite(in='displace' operator='in')
				feComposite(in2=`cell${i}` operator='in')
				feGaussianBlur(stdDeviation=`${.02*(m - i)/m} ${.002*(m - i)/m}` 
				               result=i ? null : `layer${i}`)
				if i > 0
					feBlend(in=`layer${i - 1}` result=`layer${i}`)
		
		filter#reveal-4(color-interpolation-filters='sRGB'
		                primitiveUnits='objectBoundingBox')
			+base(1)
			- for(let i = 1; i <= m; i++)
				feComponentTransfer(in=i ? 'basegrad' : null result=`cell${i}`)
					feFuncA(type='discrete' 
					        tableValues=a.map((_, j) => (i === j) ? i/m : 0).join(' '))
				feComposite(in='basetext' operator='in')
				feDisplacementMap(in2='vertdmap' scale=.1*(m - i)/m
				                  yChannelSelector='G' result='displace')
				feMorphology(in='vertrect' operator='dilate' radius=`0 ${.2*i/m}`)
				feComposite(in='displace' operator='in' result='innercut')
				feMorphology(in=`cell${i}` operator='dilate' radius=`.5 0`)
				feComposite(in='innercut' operator='in')
				feGaussianBlur(stdDeviation=`${.01*(m - i)/m}` 
				               result=i ? null : `layer${i}`)
				if i > 0
					feBlend(in=`layer${i - 1}` result=`layer${i}`)
		
		filter#reveal-5(color-interpolation-filters='sRGB'
		                primitiveUnits='objectBoundingBox')
			+base(2)
			- for(let i = 1; i <= m; i++)
				feComponentTransfer(in=i ? 'basegrad' : null)
					feFuncA(type='discrete' 
					        tableValues=a.map((_, j) => (i === j) ? i/m : 0).join(' '))
				feComposite(in='basetext' operator='in')
				//-feGaussianBlur(stdDeviation=.01*(m - i)/m)
				feDisplacementMap(in2='noisemap' scale=.1*(m - i)/m 
				                  xChannelSelector='R' 
													result=i ? null : `layer${i}`)
				if i > 0
					feBlend(in=`layer${i - 1}` result=`layer${i}`)
		
		filter#reveal-6(color-interpolation-filters='sRGB'
		                primitiveUnits='objectBoundingBox')
			+base(1)
			- for(let i = 1; i <= m; i++)
				feComponentTransfer(in=i ? 'basegrad' : null result=`cell${i}`)
					feFuncB(type='discrete' tableValues='.5')
					feFuncA(type='discrete' 
					        tableValues=a.map((_, j) => (i === j) ? i/m : 0).join(' '))
				feComposite(in='basetext' operator='in')
				feDisplacementMap(in2=`cell${i}` scale=.175*(m - i)/m 
				                  xChannelSelector='B')
				feComposite(in2=`cell${i}` operator='in' 
													result=i ? null : `layer${i}`)
				if i > 0
					feBlend(in=`layer${i - 1}` result=`layer${i}`)
				
			
	
	header
		h2 no JS gallery of<br>char by char<br>on scroll<br>text reveal effects
		em without wrapping each character in an element!
		em without any text duplication whatsoever!
	- demo.forEach((c, i) => {
		article
			h3 #{c}
			p(style=`filter: url(#reveal-${i})`): span #{text}
	- })
	footer
		p
			strong One more thing.
			|  If you like the Maths and Physics infused CSS, canvas and SVG work that I've been putting out for over a decade, you can support it by being a cool cat and becoming a patron on 
			a(href='https://www.patreon.com/anatudor' target='_blank') Patreon
			|  or with a one time donation on 
			a(href='https://ko-fi.com/anatudor' target='_blank') Ko-fi
			| . Or at least by sharing this to show the world what can be done on the web these days... because I think it's pretty damn cool!
	aside
		.box.box--fail.box--view Sorry, it appears your browser does not support 
			a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/animation-range' target='_blank')
				code animation-range
			| , which is necessary for the scroll effects in this demo demo to work. As of June 2024, this is only supported by Chromium browsers 115+.
			em (dynamically displayed box based on CSS support test - 
				a(href='https://codepen.io/thebabydino/full/qBKvjKM' target='_blank') more info
				| )

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@600&family=Shantell+Sans:ital,wght,BNCE,INFM@0,300..800,100,100;1,300..800,100,100&display=swap');

@property --k {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

* { margin: 0 }

html, body, header, article { display: grid }

html { scrollbar-color: #f7b267 #212121 }

body {
	color: #ededed;
	
	&::before {
		position: fixed;
		inset: 0;
		z-index: -1;
		background: #1a1a1a;
		filter: url(#grainy);
		content: ''
	}
}

header, article, footer {
	grid-gap: 1em;
	justify-self: center;
	place-content: center;
	padding: min(4%, 1em);
	max-width: 25em;
	min-height: 100vh;
	font: clamp(1.5em, 6vmin, 12.5em)/ 1.125 inconsolata, sans-serif;
	text-wrap: balance
}

header, h3 {
	color: #f25c54;
	font-family: shantell sans, cursive;
	text-align: center
}

h2 {
	color: #f7b267;
	font-size: 1.75em
}

em {
	display: block;
	font-size: .75em;
	font-weight: 100
}

h3 { font-size: 1.375em }

a { color: #ffb703 }

p {
	--k: calc(-1*(var(--m) + 1));
	animation: k steps(calc(var(--n) + var(--m) + 1)) both;
	animation-timeline: view();
	animation-range: entry 50% cover 50%
}

@keyframes k { to { --k: var(--n) } }

span {
	overflow: hidden;
	background: 
		linear-gradient(#00f 0 0) text, 
		linear-gradient(90deg, 
			red calc(var(--k)*1ch), 
			#000 calc((var(--k) + var(--m) + 1)*1ch)), 
		linear-gradient(#000, #0f0);
	background-blend-mode: lighten;
	color: #0000
}

footer p {
	font: .625em shantell sans
}

/* styling support info boxes */
aside {
	position: fixed; /* prevent it from scrolling */
	inset: 0 0 auto;
}

.box {
	margin: 1em;
	border-left: solid 5px #dc3055;
	padding: 1em;
	box-shadow: 2px 2px 5px hsla(0, 0%, 0%, .35);
	background: #851d40;
	color: #fff;
	font: 1.25em/ 1.25 ubuntu, trebuchet ms, arial, sans-serif;
	
	@supports (animation-range: entry 0% exit 0%) {
		display: none
	}
}

code {
	padding: 2px;
	background: hsla(0, 0%, 0%, .35);
	font: 1.1em/ 1.2 ubuntu mono, consolas, monaco, monospace
}