website: add pixelated image placeholders with fade-in transition
Build-time script generates tiny 32px-wide versions of all images in public/ using sharp. At runtime, PixelatedImage component renders these with CSS image-rendering: pixelated (nearest-neighbor / point sampling) for a crisp mosaic effect, then fades in the real image on load. - Auto-discovers images in public/, skips placeholder- prefixed files - Mtime check skips regeneration when placeholder is newer than source - Callback ref handles cached images where onLoad fires before mount - Explicit z-index prevents placeholder from covering the real image - Runs automatically as part of pnpm build in website package
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 636 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 380 B |
Reference in New Issue
Block a user