Live preview
All effects active
Press. Glow. Release.
Glass surface, cursor bloom, tactile squeeze, and a whisper of zest — working together in one panel.
Move cursor · press and hold · release
A tiny visual effects library
Lemon DOM
Juicy UI effects for plain old websites.
No framework. No build step. No dependency pulp. Drop three files into any page, add a few data attributes, and call LemonDOM.init().
What it does
Five effects. One small API.
Each effect is opt-in via a data attribute or a method call. Mix them freely, customize with CSS variables, and keep your markup boring on purpose.
Glass
data-lemon-glass
Frosted surfaces with blur, soft borders, and inner light.
Juice
data-lemon-juice
Cursor-follow bloom using --lemon-x and --lemon-y.
Squeeze
data-lemon-squeeze
Tactile press feedback with subtle compression and spring.
Zest
data-lemon-zest
CSS-only grain for a quieter, more analog finish.
Peel
data-lemon-peel
Scroll-triggered reveal via IntersectionObserver.
Interactive gallery
See each effect on its own.
A composed demo grid — one featured surface, focused examples, and a peel reveal waiting below the fold.
Glass + Juice + Zest
The everyday stack: readable frosted surface, responsive highlight, and just enough texture to keep it from feeling flat.
data-lemon-glass data-lemon-juice data-lemon-zest
Squeeze
Tactile press
Subtle wide-and-flat compression on press — premium feedback without turning your UI into fruit cosplay.
Press me
Frosted panel
Translucent depth with graceful fallback when blur isn't available.
data-lemon-glass
Cursor bloom
Soft radial glow that follows pointer movement across the surface.
data-lemon-juice
Grain overlay
Quiet film grain via CSS — no image assets required.
data-lemon-zest
Scroll reveal
This panel peels into view as it enters the viewport — smooth mask, opacity, and motion with reduced-motion respect built in.
data-lemon-peel
Second reveal
Stack peel on cards, sections, or notes for staggered entrance rhythm.
data-lemon-peel
Basic usage
Three files. One init call.
Download or clone this repo, link the stylesheet and script, mark up your elements, then initialize. Per-element tuning lives in CSS custom properties.
<link rel="stylesheet" href="lemon-dom.css">
<script src="lemon-dom.js" defer></script>
<article
data-lemon-glass
data-lemon-juice
data-lemon-squeeze
style="--lemon-blur: 24px; --lemon-accent: #ffe66d;"
>
Your card content
</article>// Scan the page for all data-lemon-* attributes
LemonDOM.init();
// Or apply effects individually
LemonDOM.glass(".card");
LemonDOM.juice(document.querySelector(".hero"));
LemonDOM.squeeze(".btn-tactile");
LemonDOM.zest(".panel");
LemonDOM.peel(".reveal");
// Clean up listeners when needed
LemonDOM.destroy();Credit where it's due
Inspired by Liquid DOM.
A respectful tribute
Inspired by the experimental visual direction of Liquid DOM by Andrew Prifer. Lemon DOM is a lightweight vanilla-web tribute built for practical everyday sites — not affiliated, not a clone, and not claiming feature parity.
Fallbacks
Glass degrades to a solid translucent surface without backdrop-filter. Peel, squeeze, and juice honor prefers-reduced-motion.