Reveal on View
A copy-paste scroll-driven component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Scroll-DrivenHTMLCSSany framework
Scroll ↓
Item one
Item two
Item three
Item four
Copy into your project
HTML
<!-- Elements fade + rise as they scroll into view (CSS only) -->
<div class="nuda-scrollrv__item">Item one</div>
<div class="nuda-scrollrv__item">Item two</div>
<div class="nuda-scrollrv__item">Item three</div>CSS
/* Reveal on View
Each element fades up as it enters the scrollport, using a native
view() timeline keyed to its own position. Customize:
--reveal-distance, --reveal-accent */
.nuda-scrollrv__item {
--reveal-distance: 18px;
--reveal-accent: #e4ff54;
opacity: 0;
transform: translateY(var(--reveal-distance));
animation: nuda-scrollrv-in linear both;
animation-timeline: view();
animation-range: entry 0% entry 55%;
}
@keyframes nuda-scrollrv-in {
to { opacity: 1; transform: translateY(0); }
}
/* Browsers without scroll timelines: show content immediately. */
@supports not (animation-timeline: view()) {
.nuda-scrollrv__item { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-scrollrv__item {
animation: none;
opacity: 1;
transform: none;
}
}How to use Reveal on View
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.