Focus + opacity reveal
Blur
Sharpen images and content from a configurable blur radius, with optional directional movement.
BLUR
Live demo
Blur reveal
Sharpens from 24px blur while moving upward.
Blur revealdata-hf="blur" data-hf-set="dramatic"
Blur reveals sharpen from a configurable blur radius while fading into view. They can also translate from a direction.
<div class="hf-blur-in" data-hf-once="false">Replays on re-entry</div>Minimal
<div class="hf-blur-in">Content</div>Default behavior: 12 px blur, no directional movement, 700 ms duration.
Fully Customized Blur
<div
data-hf="blur"
data-hf-blur="24"
data-hf-direction="bottom"
data-hf-distance="36"
data-hf-duration="1000"
data-hf-delay="100"
data-hf-easing="cubic-bezier(0.16, 1, 0.3, 1)"
>
Dramatic blur reveal
</div>Blur Controls
| Attribute | Suggested Range | Notes |
|---|---|---|
| data-hf-blur | 6-16 | Good for body content and images |
| data-hf-blur | 18-30 | Dramatic; use sparingly |
| data-hf-duration | 650-1000 ms | Longer durations make blur feel smoother |
| data-hf-direction | none or bottom | none feels cinematic; bottom adds motion |
| data-hf-distance | 16-40 px | Keep translation modest when blur is strong |
Blurred Parallax Image
<div data-hf="parallax" data-hf-set="default">
<img
src="/images/feature.jpg"
alt="Feature"
data-hf="blur"
data-hf-blur="16"
data-hf-duration="900"
>
</div>