Scroll driven highlights

html #ui
<style>
	@font-face {
		font-family: 'Geist Sans';
		src: url("https://assets.codepen.io/605876/GeistVF.ttf") format('truetype');
	}

	body {
		min-height: 100vh;
		font-weight: 80;
		padding: 0 4rem 0 1rem;
		color: hsl(0 0% 6%);
		font-family: 'Geist Sans', 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif, system-ui;
	}

	mark {
		color: hsl(0 0% 6%);
	}

	section {
		margin-bottom: 2rem;
	}

	:where(h1, h2) {
		font-weight: 120;
	}

	main {
		padding: 0 1rem;
		width: 40ch;
		max-width: 100%;
		margin: 0 auto;
		font-size: 1.25rem;
		padding: 0 0 50vmin;
	}

	mark {
		--lightness: 80%;
		--highlighted: 1;
		--highlight: hsl(var(--hue, 45) 80% var(--lightness));
		background: transparent;

		@supports (animation-timeline: view()) {
			--highlighted: 0;
			animation: highlight steps(1) both;
			animation-timeline: view();
			animation-range: entry 100% cover 10%;
		}
	}

	mark span {
		background: linear-gradient(120deg, var(--highlight, lightblue) 50%, transparent 50%) 110% 0 / 200% 100% no-repeat;
		background-position: calc((1 - var(--highlighted)) * 110%) 0;
		transition: background-position 1s;
	}

	li,
	p {
		position: relative;
	}

	mark::after {
		content: attr(data-author);
		display: grid;
		place-items: center;
		font-variant-numeric: tabular-nums;
		font-weight: bold;
		position: absolute;
		width: 32px;
		aspect-ratio: 1;
		border-radius: 12px;
		background: var(--highlight);
		font-weight: 80;
		top: 0;
		left: 100%;
		translate: 50% 0;
		font-size: 0.875rem;
		scale: var(--highlighted);
		transition: scale 0.2s;
	}

	@keyframes highlight {
		to {
			--highlighted: 1;
		}
	}
</style>

<main>
	<section>
		<h1>Next.js on Vercel</h1>
		<span>Vercel is the native Next.js platform, designed to enhance the Next.js experience.</span>
		<p>Next.js is a fullstack React framework for the web, maintained by Vercel.</p>
		<p>
			While Next.js works when self-hosting, deploying to Vercel is zero-configuration and provides
			additional enhancements for
			<mark data-author="JT">
				<span>scalability, availability, and performance globally.</span></mark
			>
		</p>
	</section>
	<section>
		<h2 id="getting-started">Getting started</h2>
		<p>There are multiple ways to get started with Next.js on Vercel:</p>
		<ul>
			<li>
				If you already have a project with Next.js, install Vercel CLI and run the vercel command
				from your project&#39;s root directory
			</li>
			<li>
				Clone one of our Next.js example repos to your favorite git provider and deploy it on Vercel
				with the button below:
			</li>
			<li>Or, choose a template from Vercel&#39;s marketplace:</li>
		</ul>
		<p>
			<mark data-author="RH">
				<span
					>Vercel deployments can integrate with your git provider to generate preview URLs for each
					pull request you make</span
				></mark
			>
			to your Next.js project.
		</p>
	</section>
	<section>
		<h2 id="incremental-static-regeneration">Incremental Static Regeneration</h2>
		<p>
			Incremental Static Regeneration (ISR) allows you to
			<mark data-author="AB" style="--hue: 280">
				<span>create or update content without redeploying your site</span></mark
			>. ISR has three main benefits for developers: better performance, improved security, and
			faster build times.
		</p>
		<p>
			When self-hosting, (ISR) is limited to a single region workload. Statically generated pages
			are not distributed closer to visitors by default, without additional configuration or
			vendoring of a CDN. By default, self-hosted ISR does not persist generated pages to durable
			storage. Instead, these files are located in the Next.js cache (which expires).
		</p>
		<p>
			<mark data-author="GR" style="--hue: 30">
				<span
					>To enable ISR with Next.js in the app router, add an options object with a revalidate
					property to your fetch requests</span
				></mark
			>.
		</p>
		<p>To summarize, using ISR with Next.js on Vercel:</p>
		<ul>
			<li>Better performance with our global Edge Network</li>
			<li>Zero-downtime rollouts to previously statically generated pages</li>
			<li>Framework-aware infrastructure enables global content updates in 300ms</li>
			<li>Generated pages are both cached and persisted to durable storage</li>
		</ul>
	</section>
	<section>
		<h2 id="server-side-rendering-ssr-">Server-Side Rendering (SSR)</h2>
		<p>
			Server-Side Rendering (SSR) allows you to render pages dynamically on the server. This is
			useful for pages where the rendered data needs to be unique on every request. For example,
			checking authentication or looking at the location of an incoming request.
		</p>
		<p>
			On Vercel,
			<mark data-author="LR" style="--hue: 220">
				<span
					>you can server-render Next.js applications in either the Node.js runtime (default) with
					Serverless Functions or the Edge runtime with Edge Functions</span
				></mark
			>. This allows you to pick the best rendering strategy on a per-page basis.
		</p>
		<p>To summarize, SSR with Next.js on Vercel:</p>
		<ul>
			<li>Scales to zero when not in use</li>
			<li>Scales automatically with traffic increases</li>
			<li>
				Has zero-configuration support for Cache-Control headers, including stale-while-revalidate
			</li>
			<li>
				Framework-aware infrastructure enables switching rendering between Edge/Node.js runtimes
			</li>
		</ul>
	</section>
	<section>
		<h2 id="image-optimization">Image Optimization</h2>
		<p>
			Image Optimization helps you achieve faster page loads by reducing the size of images and
			using modern image formats.
		</p>
		<p>
			When deploying to Vercel,
			<mark data-author="MN" style="--hue: 140">
				<span>images are automatically optimized on demand</span></mark
			>, keeping your build times fast while improving your page load performance and Core Web
			Vitals.
		</p>
		<p>
			When self-hosting, Image Optimization uses the default Next.js server for optimization. This
			server manages the rendering of pages and serving of static files.
		</p>
		<p>
			To use Image Optimization with Next.js on Vercel,
			<mark data-author="IR" style="--hue: 10">
				<span
					>import the next/image component into the component you&#39;d like to add an image
					to</span
				></mark
			>.
		</p>
		<p>To summarize, using Image Optimization with Next.js on Vercel:</p>
		<ul>
			<li>Zero-configuration Image Optimization when using next/image</li>
			<li>Helps your team ensure great performance by default</li>
			<li>
				<mark data-author="SH" style="--hue: 190">
					<span>Keeps your builds fast by optimizing images on-demand</span></mark
				>
			</li>
			<li>Requires No additional services needed to procure or set up</li>
		</ul>
	</section>
</main>