Skip to content

Css

The Idea

Lenis smooth scroll library is INCOMPATIBLE with CSS scroll-snap. They fight for scroll control.

Context

Wedding invitation site had both Lenis (for smooth parallax scrolling) and CSS scroll-snap (for section-by-section navigation). Neither worked properly.

Raw Exchange

Librarian agent research: “CRITICAL: Lenis and CSS scroll-snap are INCOMPATIBLE - Lenis hijacks native scrolling” Solution: “Remove Lenis, use CSS scroll-snap + native smooth scroll for better mobile performance”

Investigation

Lenis works by:

  1. Intercepting wheel/touch events
  2. Applying its own scroll animation via requestAnimationFrame
  3. Updating scroll position programmatically

CSS scroll-snap expects:

  1. Native scroll behavior
  2. Browser to handle snap points
  3. No interference with scroll position

When combined:

  • Lenis animates scroll → browser tries to snap → Lenis overrides → janky behavior
  • Mobile especially broken (touch events fight)

Resolution

Removed Lenis entirely:

// Before (Layout.astro)
import Lenis from 'lenis';
const lenis = new Lenis({ ... });
lenis.on('scroll', ScrollTrigger.update);

// After
// Just GSAP ScrollTrigger, no Lenis
gsap.registerPlugin(ScrollTrigger);

Added native smooth scroll:

Read more

The Prompt

Apply Wong Kar-wai cinematic color grading to photos using Cloudinary transforms:

<CldImage
  src="wedding/parallax/hk-skyline"
  effects={[
    { colorize: '20,rgb:8B0000' },  // deep red overlay
    { saturation: -10 },             // desaturated
    { contrast: 15 }                 // higher contrast
  ]}
/>

Context

Building a Korean wedding invitation with “Hong Kong Night” aesthetic inspired by Wong Kar-wai films (In the Mood for Love, Chungking Express). Needed to apply consistent film-like color grading to stock photos.

Outcome

Worked perfectly. Different colorize values per layer created depth:

  • Background layer: colorize: '20,rgb:8B0000' (heavy red)
  • Mid layer: colorize: '15,rgb:2D4A3E' (moody green)
  • Foreground: colorize: '10,rgb:D2691E' (warm amber)

Notable Because

  1. CDN-side processing: No local image editing needed
  2. Responsive: Cloudinary handles different sizes automatically
  3. Consistent aesthetic: Same effect applied across all photos
  4. Performance: Cached at CDN edge, no client-side processing

Code Pattern

// WKW color palette as Cloudinary effects
const wkwGrade = {
  background: [{ colorize: '20,rgb:8B0000' }, { saturation: -10 }, { contrast: 15 }],
  midground: [{ colorize: '15,rgb:2D4A3E' }, { saturation: 10 }, { contrast: 20 }],
  foreground: [{ colorize: '10,rgb:D2691E' }, { saturation: 5 }, { contrast: 25 }],
};

Potential Article

“Recreating Wong Kar-wai’s Film Aesthetic with Cloudinary Transforms”

Read more