GitHub

Geometric image placeholders for Svelte 5

No blur. The placeholder is the image, approximated by geometric shapes fitted at build time — and because they're stored in fit order, replaying them makes the picture visibly sharpen until the real photo crossfades in.

In production on szkolyjogi.pl — 700+ listing photos resolve from their geometric preview — and kurcz.pl.

Playground

fitted live in your browser — in production this runs at build time
1200×800
Inline placeholder
8.8 KB
8.8 raw
Lighter first paint
—
vs. the photo
Shapes
100
in fit order
Fit time
build
prebuilt
Image
Pick any photo — it's geometrized on your device, nothing is uploaded.
Shape types
Reveal
how each shape animates in — replays on change
more shapes = more detail, bigger payload
lower = more layered, translucent shapes

How it works

a real preview in a couple of KB — no blank box, no layout shift, no blur
  1. 01

    Fit at build time

    A Vite plugin fits geometric shapes to each ?geometrize import. The expensive part never ships — the browser just gets a few KB of ordered SVG shapes, and the runtime stays tiny and dependency-free.

  2. 02

    Paint instantly, no layout shift

    The placeholder is inline in the server-rendered HTML, so a real preview fills the box before the photo's first byte arrives — and because its aspect ratio is reserved, nothing below it ever jumps.

  3. 03

    Reveal, then crossfade

    Pure CSS sharpens the shapes in — before hydration, respecting reduced motion — then the real photo resolves over the top. Content-aware, so it's the picture coming into focus, not a blur.

Use it

register the Vite plugin, then import with ?geometrize
import { GeometrizedImage } from '@nomideusz/svelte-geometrize';
import placeholder from './photo.jpg?geometrize';
import src from './photo.jpg';

<GeometrizedImage {placeholder} {src} alt="Sunset over mountains" />

Full options and the Node API are in the docs.