@kentcdodds/invisible-software

<section class="slide uses-vc-app" data-label="3" data-duration="24" data-steps="[[2,4.65],[6.6,11.2],[11.5,12.9],[13.35,15],[15.3,15.8],[16.7,18],[18.25,20.2],[20.45,20.9],[21.1,22.4],[22.65,23.1]]" data-human="[1,2,3]">
<style>

@scope {
	.phone { left: 1150px; top: 102px; transform: scale(1.1); }
	.caption { left: 160px; width: 820px; }
	.sub b { color: var(--kody-text); font-weight: 650; }
	.safari-body { background: var(--vc-cream); }
	.flash { animation: flashPaid 1.2s ease var(--d) both; }
}
</style>
<div class="stage-pattern"></div>
<div class="bug"><img src="assets/kody-mark.png">Kody<span class="dom">kody.codes</span></div>

<div class="caption">
	<div class="cap" style="animation: capIn .8s cubic-bezier(.22,1,.36,1) .4s both, capOut .5s ease 6.6s forwards">
		<div class="kicker">Victoria's app</div>
		<div class="headline">Find who's<br><em>due for a cut</em></div>
		<div class="sub">Her client finder knows everyone's usual cadence.</div>
	</div>
	<div class="cap" style="animation: capIn .8s cubic-bezier(.22,1,.36,1) 7.2s both, capOut .5s ease 13.6s forwards">
		<div class="kicker">Her words</div>
		<div class="headline">Edit the text.<br><em>Send</em> in one tap.</div>
		<div class="sub">An iMessage template she can change anytime.</div>
	</div>
	<div class="cap" style="animation: capIn .8s cubic-bezier(.22,1,.36,1) 14.2s both">
		<div class="kicker">Live</div>
		<div class="headline">Paid, live<br>from <em>Stripe</em></div>
		<div class="sub">Deposits show up the moment they clear.</div>
	</div>
</div>

<div class="phone"><div class="screen">
	<div class="island"></div>
	<div class="safari">
		<div class="statusbar"></div>
		<div class="safari-top" data-url="victoria.kody.run"></div>
		<div class="safari-body">
		</div>
		<div class="safari-bottom"></div>
	</div>
	<div class="home-ind"></div>
	<div class="tap" style="left:78px;top:334px;animation: tap .6s ease 2.0s both"></div>
	<div class="tap" style="left:200px;top:236px;animation: tap .6s ease 8.0s both"></div>
	<div class="tap" style="left:196px;top:0;animation: tap .6s ease 11.7s both" id="tapSend"></div>
</div></div>
<div class="stage-vignette"></div>
<script>
deck.slide(({ root, onTime, mountFinder }) => {
	mountFinder(root.querySelector('.safari-body'))
	// Slide 2 already loaded the app in Safari; this slide picks up the same page, so it must not
	// replay the page-load progress bar (that read as a second load/refresh at 2.3).
	const pr = root.querySelector('.url-progress')
	onTime(() => { pr.style.width = '0%'; pr.style.opacity = 0 })
})
</script>
</section>