Tailwind UI Pattern Registry for humans and agents

scroll highlight active viewport focus blur highlight active card in scroll-driven showcase focus effect for timeline or step components scroll-activated content spotlight need visual focus on the currently visible element surrounding elements should appear muted and blurred want smooth activation transition on scroll

Scroll Highlight

Fetch snippet JSON: curl https://webspire.de/snippets/scroll/scroll-highlight.json
Format
Section 1 Introduction
Section 2 Core Concept
Section 3 Implementation
Section 4 Edge Cases
Section 5 Summary
Stage Background
Customize

Quick Start

<div class="scroll-highlight-item">Content</div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
599 bytes · 27 lines
Custom Properties
--highlight-scale--highlight-blur
Classes
.scroll-highlight-item
scroll highlight active viewport focus blur

Apply .scroll-highlight-item to each element in a scroll container. Toggle .active via JavaScript (IntersectionObserver) when the element enters the viewport center.

Customize via CSS custom properties:

  • --highlight-scale — scale factor when active (default: 1.03)
  • --highlight-blur — blur amount when inactive (default: 1px)

Inactive items are dimmed (35% opacity), slightly scaled down, and blurred. Active items are fully visible with no blur. Reduced motion mode simplifies to opacity-only transitions.