Scroll unblur
As the paragraph scrolls in, word after word comes out of the blur and up to full strength while the block levels out.
- enhancer
- scroll
- words
- blur
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Scroll unblur example
Scroll down in this box
When the page moves, the words come out of the haze one after another.
Scroll down in this box
When the page moves, the words come out of the haze one after another.
Code
It follows the controls above: change an option and the code changes with it.
<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>
<div class="m-demo-scroll" tabindex="0" role="region" aria-label="Scroll inside this box"><p class="m-demo-note">Scroll down in this box</p><p class="m-demo-lg" data-motion="scroll-unblur">When the page moves, the words come out of the haze one after another.</p></div>import { ScrollUnblur } from "./motion/react/ScrollUnblur";
<ScrollUnblur>Your content</ScrollUnblur><script setup lang="ts">
import ScrollUnblur from "./motion/vue/ScrollUnblur.vue";
</script>
<template>
<ScrollUnblur>Your content</ScrollUnblur>
</template>const el = document.querySelector("#title");
el.dataset.motion = "scroll-unblur";The wrappers: ScrollUnblur.tsx (React, TypeScript) and ScrollUnblur.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-stagger | 0.06 | Head start of each word (share of the scroll) |
data-motion-blur | 5 | Blur at the start |
data-motion-dim | 0.14 | Strength at the start |
data-motion-tilt | 3 | Tilt at the start |
data-motion-start | 1 | Starts when the top reaches (share of the window height) |
data-motion-end | 0.5 | Ends when the top reaches |
Accessibility
The words stay real, selectable text in their places; only opacity, blur and one rotation of the block change, so nothing reflows. Text above the end line is simply shown (so a page's first screen reads at full strength). Reduced motion shows the paragraph plain. Frames run only while the page scrolls and the text is on screen.
Size
scroll-unblur.js is 0.7 KB gzip, with text-kit.js 3.2 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.