Components / Motion / Blur In

Blur In beta

Words arrive out of focus and sharpen one after another, like eyes adjusting.

Preview

Every part in this catalog was cast from a single mold.

<p class="k-blur" data-blur style="font-size:23px;font-weight:650;letter-spacing:-.02em;line-height:1.4;max-width:440px">Every part in this catalog was cast from a single mold.</p>
/* KATA Blur In — words sharpening in sequence. */
.k-blur{font-family:var(--k-font)}
.k-blur .w{display:inline-block;opacity:0;filter:blur(9px);transform:translateY(7px);animation:k-blur-in .7s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes k-blur-in{to{opacity:1;filter:blur(0);transform:none}}
@media (prefers-reduced-motion:reduce){.k-blur .w{animation:none;opacity:1;filter:none;transform:none}}

// KATA Blur In — splits the words, staggers the sharpening.
document.querySelectorAll('[data-blur]').forEach(function (el) {
  var words = el.textContent.trim().split(/\s+/);
  el.textContent = '';
  words.forEach(function (word, i) {
    var s = document.createElement('span');
    s.className = 'w';
    s.textContent = word;
    s.style.animationDelay = (i * 90) + 'ms';
    el.appendChild(s);
    el.appendChild(document.createTextNode(' '));
  });
});

Installation

CLI

node kata-ui.mjs add blur-in

Writes the part’s CSS and JS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs. The part has a script — include it after the markup; it initializes itself.

Examples

A paragraph

The sharpening runs word by word at reading speed, so a short paragraph lands like a sentence being understood — use it for the paragraph the page exists for, not for the footer.

<p class="k-blur" data-blur style="font-size:14.5px;line-height:1.85;color:var(--k-ink-2);max-width:460px">The sharpening runs word by word at reading speed, so a short paragraph lands like a sentence being understood — use it for the paragraph the page exists for, not for the footer.</p>

Usage

For the one sentence a page opens with. The script splits the element’s words into spans and staggers their sharpening; run it once, on load or on scroll into view — a headline that re-blurs on every visit is a jump scare. Pairs well with restraint everywhere else.

Accessibility

The words are all in the DOM from the start, in order — screen readers read the sentence, not the stagger. Under prefers-reduced-motion nothing blurs: the words simply stand there, which is what they were doing anyway.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-blurclass
.wclass
data-blurdata hook

Related parts

Accordion Gallery beta

Five scenes in a row; the one you touch opens up and tells its caption.

galleryaccordionexpandpanelshover

Aurora beta

A slow wash of color behind a hero — the accent and the core, drifting under glass.

gradientheroambient

Beam border beta

A single point of light travels the edge of a card. The beam is the core color — the one accent, in motion.

borderglowhighlightcard

Comparison Slider beta

Before and after, one image wide: drag the seam and the second state wipes over the first.

beforeafterimagecomparedrag
Previous
Beam border