BlurhashPlaceholder

Canvas-decoded blurhash blur-up placeholder that fades out once loaded.

Media & Icons

Loading (canvas visible)

Loaded (faded out)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for BlurhashPlaceholder — the canvas-based blur-up placeholder used by // product-card-simple.tsx (epic #1647, wave 6, gap batch #1661). Distinct from // ResponsiveImageCore's own CSS-background blur-up (components/responsive-image-core.tsx): // this component decodes a real blurhash string onto a <canvas> and fades out // via `isLoaded`, rather than painting a pre-baked data URI as a CSS background. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { BlurhashPlaceholder } from './blurhash-placeholder'; const meta: StoryMeta = { title: 'BlurhashPlaceholder', category: 'Media & Icons', description: 'Canvas-decoded blurhash blur-up placeholder that fades out once loaded.', usage: `import { BlurhashPlaceholder } from '@/components/blurhash-placeholder';\n\n<BlurhashPlaceholder hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj" isLoaded={imageLoaded} />`, }; export default meta; // Canonical demo hash from the blurhash reference implementation's README — // stable, well-formed, decodes without error. const DEMO_HASH = 'LEHV6nWB2yk8pyo0adR*.7kCMdnj'; export const Loading = defineStory({ name: 'Loading (canvas visible)', render: () => ( <div className="relative w-[240px] h-[160px] bg-zd-gray2"> <BlurhashPlaceholder hash={DEMO_HASH} isLoaded={false} /> </div> ), }); export const Loaded = defineStory({ name: 'Loaded (faded out)', render: () => ( <div className="relative w-[240px] h-[160px] bg-zd-gray2"> <BlurhashPlaceholder hash={DEMO_HASH} isLoaded={true} /> </div> ), });