Component field guide

WelkSticker

An image with an SVG outline following its alpha silhouette and a sticking animation after load. Transparent artwork produces a cutout; opaque backgrounds are outlined as part of the image. Optional hover elevation adds depth, and load failures can use fallbackSrc.

Usage

import { WelkSticker } from "@welkui/react";
import superman from "./superman.png";

<WelkSticker src={superman} alt="Superman sticker"
  width={140} height={160} elevateOnHover />

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

• One sticker presentation; configurable outline color/thickness and hover elevation.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

Default outline

Transparent artwork reveals the silhouette. Reloading the image plays the sticking animation.

Key propsoutlineThickness={6} outlineColor="white"

Colored thick outline

Use a stronger outline to make artwork stand out on its surface.

Key propsoutlineThickness={10} outlineColor="#ffdf52"

Hover elevation

Move over the sticker to lift it. Reduced-motion preferences are respected.

Key propselevateOnHover

No outline

Zero thickness leaves just the artwork and its sticker presentation.

Key propsoutlineThickness={0}

Fallback artwork

An intentionally invalid source demonstrates recovery with local fallback artwork.

Key propssrc={brokenImage} fallbackSrc={superman}

Usage notes and accessibility

• Use transparent PNG/WebP artwork for a silhouette cutout. The outline follows the alpha channel, so an opaque rectangular background remains a rectangle.
• outlineThickness is a finite non-negative pixel value. outlineColor sets the edge; elevateOnHover is optional decoration rather than an action.
• The sticking animation starts after load and honors reduced motion. Supply fallbackSrc when recovery is useful and descriptive alt text unless the artwork is decorative.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

Native props and refs

Inherits native image props except src, alt and children, including width, height, loading, onLoad, onError, className and style; forwards an image ref.