A tiny visual effects library

Lemon DOM

Juicy interface effects for plain HTML, CSS, and JavaScript.

No framework. No build step. Zero dependencies. Drop the CSS and JS into any page, add data attributes, and call LemonDOM.init().

Get Lemon DOM Explore demos Read usage

Runtime: Vanilla JS
Dependencies: Zero
Build: None
Version: 1.0.0 preview
Minified: 20.2 KB
Gzipped: 5.3 KB
Updated: 2026-07-05

lemon-dom.css lemon-dom.js

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

Install

Use the local files directly.

Lemon DOM currently ships as plain CSS and JavaScript files. No npm package or public CDN build is published from this repo yet.

Local files

<link rel="stylesheet" href="lemon-dom.css">
<script src="lemon-dom.js" defer></script>

Required files

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.

Featured

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

Attribute order does not matter. Nested effects work, but dense lists should use interactive effects sparingly.

Squeeze

Tactile press

Subtle wide-and-flat compression on press — premium feedback without turning your UI into fruit cosplay.

data-lemon-squeeze

<button data-lemon-squeeze>
  Press me
</button>

Glass

Frosted panel

Translucent depth with graceful fallback when blur isn't available.

data-lemon-glass

<div data-lemon-glass>
  Frosted content
</div>

Juice

Cursor bloom

Soft radial glow that follows pointer movement across the surface.

data-lemon-juice

Touch devices use a static glow fallback.

<div data-lemon-juice>
  Glowing content
</div>

Zest

Grain overlay

Quiet film grain via CSS — no image assets required.

data-lemon-zest

<div data-lemon-zest>
  Textured content
</div>

Peel

Scroll reveal

This panel peels into view as it enters the viewport — smooth mask, opacity, and motion with reduced-motion respect built in.

Revealed on scroll

data-lemon-peel

<section data-lemon-peel>
  Revealed on scroll
</section>

Basic usage

Two files. One init call.

Download lemon-dom.css and lemon-dom.js, link the stylesheet and script, mark up your elements, then initialize. Minified builds are available as lemon-dom.min.css and lemon-dom.min.js.

<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();

Customize

Tune with implemented CSS variables.

Set variables globally or on individual elements.

Glass

--lemon-blur defaults to 20px; --lemon-border-opacity defaults to 0.18; --lemon-radius defaults to 20px.

Juice

--lemon-juice-size defaults to 480px; --lemon-juice-color defaults to rgba(255, 230, 109, 0.38).

Squeeze

--lemon-squeeze-scale-x, --lemon-squeeze-scale-y, and active scale variables accept unitless transform values.

Zest and Peel

--lemon-zest-opacity defaults to 0.07. --lemon-peel-duration defaults to 0.85s.

Browser support

Progressive effects, readable fallbacks.

Verified by source inspection of the current release and local static checks; broad browser claims still need real-device QA before a stable release.

Chrome, Edge, Safari, Firefox

Core rendering uses standard CSS, pointer events, and IntersectionObserver. Glass uses backdrop-filter where supported and keeps a translucent fallback where it is not.

Mobile Safari and Android Chrome

Squeeze supports touch through pointer events. Juice is pointer-specific; touch users keep the static surface without needing hover precision.

Reduced motion

prefers-reduced-motion: reduce disables squeeze transforms, peel transitions, smooth scrolling, and cursor animation transitions.

Fallback summary

Glass becomes a solid translucent panel. Peel appears without motion. Zest remains CSS-only. No polyfills are required for the documented baseline.

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.

Get Lemon DOM

Juicy interface effects for plain websites.

Preview v1.0.0. Local-file distribution. Zero dependencies.

Get Lemon DOM Install docs